You're viewing old version number 5. - Current version
HTML5 Semantic Markup Tags
article, section, aside, hgroup, nav, header, footer, figure, figcaption {
display: block;
}
http://www.w3.org/wiki/HTML_structural_elements
The new HTML5 elements we will cover in this article are:
<header>: Used to contain the header content of a site.
<footer>: Contains the footer content of a site.
<nav>: Contains the navigation menu, or other navigation functionality for the page.
<article>: Contains a standalone piece of content that would make sense if syndicated as an RSS item, for example a news item.
<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.
<aside>: Defines a block of content that is related to the main content around it, but not central to the flow of it.
Some example code:
<body>
<header>
<!-- header content goes in here -->
</header>
<nav>
<!-- navigation menu goes in here -->
</nav>
<section id="sidebar1">
<!-- sidebar content goes in here -->
</section>
<section id="main">
<!-- main page content goes in here -->
</section>
<aside>
<!-- aside content goes in here -->
</aside>
<footer>
<!-- footer content goes in here -->
</footer>
</body>
http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-tags
Actually, you are quite right when it comes to header/footer. Here is some basic information on how each of the major HTML5 tags can/should be used (I suggest reading the full source linked at the bottom):section – Used for grouping together thematically-related content. Sounds like a div element, but its not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Is all of the content related?”
aside – Used for tangentially related content. 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.
header – There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”
nav – Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.
footer – Sounds like its a description of the position, but its not. Footer elements contain information about it’s containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
http://alistapart.com/article/previewofhtml5
http://www.w3schools.com/html/html5_semantic_elements.asp
HTML5 offers new semantic elements
to clearly define different parts of a web page:
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
http://webdesignledger.com/tips/html5-essentials-and-good-practices
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<h1></h1>
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Post title</h1>
<h2>Subtitle and info</h2>
</hgroup>
<p>Content goes here.</p>
</article>
<article>
<!-- Another article here -->
</article>
</section>
<aside>
<!-- Sidebar here -->
</aside>
<footer></footer>
</body>
</html>
http://webdesignledger.com/wp-content/uploads/2011/12/html5-2.jpg
From JR's : articles
583 words - 4533 chars
- 3 min read
created on
updated on
- #
source
- versions