HTML5 Semantics

Contains description regarding major semantic elements

HTML expands to Hyper Text Markup Language. It is NOT a styling language, you have CSS for that purpose. So stop abusing the existence of HTML.

Transcript

1. HTML 5 Semantics - Prashanth Krish @Krish_Prashanth
2. HTML 5 Semantics What is presented in following slides? Discussion will be about important semantic elements from Structure Layer present in Open Web Technology Stack and not on other items or other layers. Open Web Technology Stack
3. HTML 5 Semantics HTML expands to Hyper Text Markup Language. It is NOT a styling language, you have CSS for that purpose. So stop abusing the existence of HTML. Personal Note
4. HTML 5 Semantics List of Semantic/Structural Elements – Alphabetical order <article> <aside> <bdi> <command> <details> <summary> <figure> <figcaption> <footer> <header> <hgroup> <mark> <meter> <nav> <progress> Semantic Tags <ruby> <rp> <rt> <scetion> <time> <wbr>
5. HTML 5 Semantics <div class="header"> <div class="navigation"> <div class="footer"> Older Semantics <div class=”header”> My Company Logo </div <div id="main-nav" class="navigation"> <ul> <li><a href="index.html">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/blog/">Blog</a></li> </ul> </div> <div class=”footer”> Copyleft </div>
6. HTML 5 Semantics <Section> “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”
7. HTML 5 Semantics <Section> “Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.” “The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”
8. HTML 5 Semantics <Section> • DO use section for each individual section of a tab switcher or content slider (if an unordered list isn’t needed) • DO use section to divide a lengthy “terms and conditions” (or similar) page into numbered sections • DO nest section elements if necessary (as you might do with the “terms and conditions” page) • DO use section to divide the different sections of a one-page website or portfolio Do's http://www.impressivewebs.com/html5-section/
9. HTML 5 Semantics <Section> • DON’T use section to divide content from the header and footer; use div instead • DON’T use section to wrap a tab switcher for DOM manipulation or styling • DON’T use section for sidebar or other tangentially-related content boxes; use aside instead • DON’T use section just to add a border or drop shadow around something; use div instead • DON’T use section for the wrapper when implementing faux columns; again, use div instead • DON’T use section to nest elements when trying to avoid IE6′s float double-margin bug (or a similar layout-related issue); again, use div • DON’T use section to hold an individual author bio on a blog post or news article; use aside instead Dont's http://www.impressivewebs.com/html5-section/
10. HTML 5 Semantics <Article> "An article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content." <article> Syndication means that this article of content could stand alone if needed and you would have all the information you need to understand what it was and where it came from </article>
11. HTML 5 Semantics <nav> The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to common pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element. <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> </ul> </nav>
12. HTML 5 Semantics <nav> • Use <nav> only for major navigation elements • Table of Contents • Previous/next buttons (or pagination) • Search form • Breadcrumbs When to use
13. HTML 5 Semantics <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. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.” <aside> <ul> <li><a ref="extl" href="#">Link 1</a></li> <li><a ref="extl" href="#">Link 2</a></li> </ul> </aside>
14. HTML 5 Semantics <header> <hgroup> <h1>Page Title</h1> <h2>Page Subtitle</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> </ul> </nav> <section id="articles"> <article> <header> <h2> <a href="#">Article Title</a></h2> </header> <section> Big content goes here </section> </article> A Sample Code <article> <header> <h2><a href="#">Article Title</a></h2> </header> <section> Some more large content </section> </article> </section> <aside> <h2>Top links</h2> <ul> <li><a ref="extl" href="#">Link 1</a></li> <li><a ref="extl" href="#">Link 2</a></li> </ul> <figure> <img src="..."/> <figcaption>Chart 1.1</figcaption> </figure> </aside> <footer> Footer content </footer>
15. HTML 5 Semantics HTML5 Elements Flowchart
16. HTML 5 Semantics Thank You Am Done This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.