You're viewing old version number 16. - Current version
HTML5 Semantic Markup Tags
Medium.com and the Ghost Casper theme uses:
article
section
/section
section
/section
/article
Ghost also used the main tag
Examples:
http://www.svenread.com/readium-ghost-theme/
http://thatemil.com/blog/2013/09/16/webmentioning-adactio/
reset in css: http://html5doctor.com/html-5-reset-stylesheet/
http://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-boilerplates/
http://www.w3schools.com/tags/default.asp HTML reference updated with new HTML5 tags
http://theclassy.themespectre.com/css/style.css
"HTML5 display definitions"
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary
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>
With all those new elements some people are bound to get confused. Should we use a header inside an article to contain all the title info? Should we wrap every heading with an <hgroup>? To help you out, here are some good practices about these new elements.
The less is more motto stands in HTML5 markup too. For example when you have a single <h1> heading in your <article>, there is no need to wrap it with an <hgroup> tag. If you have two or more headings, then wrapping both of them with an <hgroup> would be a good use of the <hgroup> element.
<!-- incorrect use of hgroup -->
<article>
<hgroup>
<h1>Heading</h1>
</hgroup>
<!-- rest of content here -->
</article>
<!-- correct use of hgroup -->
<article>
<hgroup>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</hgroup>
<!-- rest of content here -->
</article>
More info ...
Do you really need to have a <header> and a <footer> element on your <article>? Depends. Do you have many info regarding the article like multiple headings, date information, comment information etc? Then the <header> would have semantic meaning and would be used correctly. Again refrain in using too many elements when they are really not needed. No need to nest a single <h1> in a <header>. Same goes for the <footer> element. Do you have post information, author information etc? Then a <footer> would be appropriate.
<!-- incorrect use of header -->
<article>
<header>
<h1>Heading</h1>
</header>
<!-- rest of content here -->
</article>
<!-- correct use of header -->
<article>
<header>
<hgroup>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</hgroup>
<p>Date and Author information</p>
</header>
<!-- rest of content here -->
</article>
more ..
Should you use <section> or <article>? There really is only one way to tell whether you should use one of these elements. <section> refers to a structure that contains related content. <article> on the other side, contains independent content. So a <section> can have many <article>s and an <article> can have many <section>s. It all gets down to what the content is.
Do you use <aside> only for a sidebar structure? <aside> started out that way, but the specs have changed since then. Nowadays <aside> gets another semantic meaning when used inside an <article>. It denotes secondary content related of course to the main content inside the <article>. When used outside of an <article> it is still considered secondary content but for the page as a whole, sidebars being a perfect example.
<!-- aside outside of article -->
<div>
<aside>
<!-- use as sidebar for example -->
</aside>
</div>
<!-- aside inside of article -->
<article>
<!-- main article content here -->
<aside>
<!-- secondary related content -->
</aside>
</article>
Feb 2014
What is HTML5 - https://medium.com/web-design-code/e8ac221cd95f
May 2014
I think that for my purposes, an article page would be:
- HEADER
- NAV /
- /HEADER
- ARTICLE
- SECTION /
- SECTION /
- SECTION /
- /ARTICLE
- ARTICLE
- FOOTER /
I mostly make my header area also be the nav, so my nav tags would occur within the header tags. Some sites will display a header area with the nav following underneath, which would mean their nav tags would exist outside and under the header tags.
<header>
<nav>
</nav>
</header>
<article>
<section></section>
<section></section>
<section></section>
</article>
<footer>
</footer>
June 1
<header class="sitewide">
<nav>
</nav>
</header>
<footer class="sitewide">
</footer>
From JR's : articles
1177 words - 8549 chars
- 6 min read
created on
updated on
- #
source
- versions