Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Aside, within HTML5 + CSS
1. HTML5 AND CSS
<Aside>
Explaining the “Aside” function in HTML5
and how to use Cascading Style Sheets(CSS)
to style HTML5
2. PURPOSE
To explain the “Aside” function in HTML5 for the everyday person. To demonstrate
how Cascading style sheets (CSS) can be used to manipulate code within HTML5.
To show how to style code so that it adheres to the web accessibility standards required
for modern day use
3. WHAT IS HTML5 ?
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In
2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:
New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public
4. WEB ACCESSIBILITY
STANDARDS
The Web Accessibility Initiative - WAI
WAI (created by W3C, in 1997) is a set of guidelines intended for web developers, authors,
and designers- about how to make the web content accessible to people with disabilities.
The goal of these guidelines is accessibility, but they will also help make web contents
available to more browsers (voice browsers, cell phones, hand-held devices), and to more
users working in difficult environments (hands-free, strong light, darkness, bad sight, heavy
noise).
5. CASCADING STYLE SHEETS
(CSS)
CSS defines HOW HTML elements are to be displayed.
CSS describes the visual style (appearance, layout, colour, fonts) of HTML elements.
CSS was designed to separate document layout from document content (which
greatly improved HTML flexibility and reduced HTML complexity).
6. ASIDE
The aside element represents a section of a page that consists of content that is
tangentially related to the content around the aside element, and which could be
considered separate from that content. Such sections are often represented as sidebars
in printed typography. Just because some content appears to the left or right of the
main content isn‟t enough reason to use the aside element. Ask yourself if the content
within the aside can be removed without reducing the meaning of the main content.
Pullquotes are an example of tangentially related content.
8. OUR HTML5 PAGE
The page has the correct doctype
format for HTML 5. It contains a
Title tag, a body, an article, a
paragraph tag and an aside tag. The
<p>tag contains a paragraph about a
current craze – Gangnam Style -
taken from wikipedia.
9. THE ASIDE TAG
The aside tag lives within the article
tag. The content of the tag is not
essential information about the craze,
but is interesting enough to note a
mention. Information that appears
within this tag is not meant to be vital
information regarding a topic.
13. GANGNAM HTML
This is how our page looks like
without any CSS to style it. You
cannot tell the difference between the
text inside the article tag and inside
the aside tag
18. GANGNAM CSS
We have added some more CSS code
to change the aside tag, we have
changed the colour to blue, changed
the font family to Arial, and created a
border with padding and a margin.
19. GANGNAM HTML
This is how our page looks like with
the CSS changing it. It looks more
highlighted now; more of a
interesting tidbit.
20. GANGNAM HTML
This is how our page looks like with
the CSS changing it. It looks more
highlighted now; more of a
interesting titbit. We‟ve now added
another paragraph in to highlight the
aside sitting in the middle.
27. WEB ACCESSIBILITY
STANDARDS
WCAG 2.0 Guidelines
Principle 1: Perceivable - Information and user interface components must be presentable to users in
ways they can perceive.
Principle 2: Operable - User interface components and navigation must be operable.
Principle 3: Understandable - Information and the operation of user interface must be understandable.
Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety
of user agents, including assistive technologies.
28. HOW THE PAGE MEETS WCAG
2.0 GUIDELINES
Principle 1: Perceivable – The page is all text.
The Principle 2: Operable – There are no operable interfaces
Principle 3: Understandable – The information is presented in an easy to understand
manor.
Principle 4: Robust – The page can be loaded up in a variety of browsers and still
keep its format.
29. SUMMARY
We have created a webpage using HTML5. We have created styled it
using Cascading style sheets(CSS). We have shown how the concept of
„aside‟ works within HTML and explained the context of where it would
best be used. We have shown the WCAG 2.0 Guidelines – and how the
page we created fits in to those guidelines.
