Aside, within HTML5 + CSS

HTML5 AND CSS
<Aside>

Explaining the “Aside” function in HTML5
and how to use Cascading Style Sheets(CSS)
to style HTML5

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

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

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).

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).

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.

LETS LOOK AT SOME
HTML5 CODE

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.

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.

LETS LOOK AT OUR CSS
PAGE

GANGNAM CSS
Currently empty. This is the page that
will create style within the page.

LETS LOOK AT OUR HTML
PAGE

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

LETS ADD SOME CODE TO
OUR CSS PAGE

GANGNAM CSS
We have added some CSS code to
change the aside tag, we have given it
an orange colour and aligned it in the
centre of the page.

GANGNAM HTML
This is how our page looks like with
the CSS changing it.

LETS ADD SOME MORE
CODE TO OUR CSS PAGE

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.

GANGNAM HTML
the CSS changing it. It looks more
highlighted now; more of a
interesting tidbit.

GANGNAM HTML
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.

GANGNAM HTML
We have validated our HTML and it
is now valid in HTML5.

GANGNAM CSS
We have validated our CSS Code and
it is now successfully valid.

LETS TEST OUR PAGE IN
DIFFERENT BROWSERS

PAGE IN INTERNET PAGE IN GOOGLE
EXPLORER CHROME

PAGE IN MOZILLA
FIREFOX PAGE IN OPERA

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.

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.

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.

REFERENCES
http://www.w3schools.com/html/html5_intro.asp

http://www.w3schools.com/quality/quality_accessibility.asp

http://html5doctor.com/understanding-aside/

http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-
footer-elements-not-as-obvious-as-they-sound/

http://en.wikipedia.org/wiki/Gangnam_Style

Aside, within HTML5 + CSS

More Related Content

Aside, within HTML5 + CSS