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.

1. HTML 5 Semantics
- Prashanth Krish
@Krish_Prashanth

2. HTML 5 Semantics Open Web Technology Stack
What 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. 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. HTML 5 Semantics Semantic Tags
List 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. 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. 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's
•
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. HTML 5 Semantics <Section>
Dont's
•
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. 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 stand
alone if needed and you would have all the information you
need to understand what it was and where it came from

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