HTML5 AND CSS <Aside>Explaining the “Aside” function in HTML5and how to use Cascading Style Sheets(CSS) to style HTML5
PURPOSETo 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
WEB ACCESSIBILITY STANDARDS The Web Accessibility Initiative - WAIWAI (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 moreusers 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 beconsidered 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 themain 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.
OUR HTML5 PAGEThe page has the correct doctypeformat for HTML 5. It contains aTitle tag, a body, an article, aparagraph tag and an aside tag. The<p>tag contains a paragraph about acurrent craze – Gangnam Style -taken from wikipedia.
THE ASIDE TAGThe aside tag lives within the articletag. The content of the tag is notessential information about the craze,but is interesting enough to note amention. Information that appearswithin this tag is not meant to be vitalinformation regarding a topic.
GANGNAM CSSWe have added some more CSS codeto change the aside tag, we havechanged the colour to blue, changedthe font family to Arial, and created aborder with padding and a margin.
GANGNAM HTMLThis is how our page looks like withthe CSS changing it. It looks morehighlighted now; more of ainteresting tidbit.
GANGNAM HTMLThis is how our page looks like withthe CSS changing it. It looks morehighlighted now; more of ainteresting titbit. We‟ve now addedanother paragraph in to highlight theaside sitting in the middle.
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 interfacesPrinciple 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 itusing Cascading style sheets(CSS). We have shown how the concept of„aside‟ works within HTML and explained the context of where it wouldbest be used. We have shown the WCAG 2.0 Guidelines – and how the page we created fits in to those guidelines.