HTML 5 Semantics           - Prashanth Krish               @Krish_Prashanth
HTML 5 Semantics                                     Open Web Technology StackWhat is presented in following slides?  Disc...
HTML 5 Semantics                                Personal Note    HTML expands to Hyper Text Markup Language.   It is NOT a...
HTML 5 Semantics                                            Semantic TagsList of Semantic/Structural Elements – Alphabetic...
HTML 5 Semantics                                            OLDER SEMATICS                            <div class=”header”>...
HTML 5 Semantics                                    <Section> “The section element represents a generic section of a docum...
HTML 5 Semantics                                      <Section>  “Authors are encouraged to use the article element  inste...
HTML 5 Semantics                                                                     <Section> Dos •   DO use section for ...
HTML 5 Semantics                                                                    <Section> Donts •    DON’T use section...
HTML 5 Semantics                                             <Article >     "An article element represents a self-containe...
HTML 5 Semantics                                         <Aside >    “ The aside element represents a section of a page th...
HTML 5 Semantics                                                       A Sample Code   <header>                           ...
HTML 5 Semantics                                            References /ATTRIBUTION  http://www.adobe.com/devnet/dreamweav...
Upcoming SlideShare
Loading in …5
×

Html5 semantics

426 views
336 views

Published on

Contains description regarding major semantic elements <article><aside><nav><section>

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
426
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 semantics

  1. 1. HTML 5 Semantics - Prashanth Krish @Krish_Prashanth
  2. 2. HTML 5 Semantics Open Web Technology StackWhat is presented in following slides? Discussion will be about semantic elements from Structure Layer present in Open Web Technology Stack and not on other items or other layers.
  3. 3. HTML 5 Semantics Personal Note 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.
  4. 4. HTML 5 Semantics Semantic TagsList of Semantic/Structural Elements – Alphabetical order <article> <aside> <bdi> <command> <details> <ruby> <summary> <rp> <figure> <rt> <figcaption> <scetion> <footer> <time> <header> <wbr> <hgroup> <mark> <meter> <nav> <progress>
  5. 5. HTML 5 Semantics OLDER SEMATICS <div class=”header”> My Company Logo </div <div id="main-nav" class="navigation"> <div class="header"> <ul> <div class="navigation"> <li><a href="index.html">Home</a></li> <div class="footer"> <li><a href="/about/">About</a></li> <li><a href="/blog/">Blog</a></li> </ul> </div> <div class=”footer”> Copyleft </div>
  6. 6. HTML 5 Semantics <Section> “The section element represents a generic section of a document or application. A section, in this context, is athematic grouping of content, typically with a heading.”
  7. 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. 8. HTML 5 Semantics <Section> Dos • 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 http://www.impressivewebs.com/html5-section/
  9. 9. HTML 5 Semantics <Section> Donts • 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 http://www.impressivewebs.com/html5-section/
  10. 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."Syndication means that this article of content could standalone if needed and you would have all the information youneed to understand what it was and where it came from
  11. 11. 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.”
  12. 12. HTML 5 Semantics A Sample Code <header> <article> <hgroup> <header> <h1>Page Title</h1> <h2><a href="#">Article Title</a></h2> <h2>Page Subtitle</h2> </header> </hgroup> <section> </header> Some more large content <nav> </section> <ul> </article> <li><a href="#">Home</a></li> </section> <li><a href="#">Tutorials</a></li> <aside> </ul> <h2>Top links</h2> </nav> <ul> <section id="articles"> <li><a ref="extl" href="#">Link 1</a></li> <article> <li><a ref="extl" href="#">Link 2</a></li> <header> </ul> <h2> <figure> <a href="#">Article <img src="..."/>Title</a></h2> <figcaption>Chart 1.1</figcaption> </header> </figure> <section> </aside> Big content goes here <footer> </section> Footer content </article> </footer>
  13. 13. HTML 5 Semantics References /ATTRIBUTION http://www.adobe.com/devnet/dreamweaver/articles/understanding-html5- semantics.html This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

×