I wanted to understand the new HTML5 tags. This is a record of my studies and doesn’t include every new element and attribute.
<article>
This represents independent content which can stand on its own – content that could be syndicated. In other words, if it can show up in a RSS feed, it should be wrapped in this tag. Therefore, a blog entry, forum post, and user comments should be wrapped in <article>.
We used to code a blog entry/article like so: <div id="maincontent">, now it’s written like this: <article id="maincontent">. Within an article tag, I can use the section tag to start the user comment section in which I would still continue to use the article tag – wrapping each comment in an article tag with a class of "user-comment".
<figure> and <figcaption>
Similar to instructional books which use figures and and captions, these tags do the same by wrapping images and videos. Within the figure tag, before or after the content, the <figcaption> child element wraps the text describing the figure.
<video> and <audio>
Thanks to these two new elements, we don’t have to use flash to embed a video or music. We can simply use the video and audio tags much like the <img> tag.
<aside>
Basically, this tag is used for content that is off to the side. In other words: not closely related to the main content which is what <article> is mainly used for. What we used to mark up as: <div id="sidebar>or a pull quote within an blog post, we now use <aside>.
<nav>
This tag is used to indicate content that includes links which help navigate a user to different pages within the same website or content within the same webpage. Therefore, I don’t think this tag would be appropriate for a blogroll because these are links that navigate to other websites.
<header>
This is used to indicate the beginning (or head) of a webpage document and or article. When used in the website’s layout, <header> would wrap a nav and logo content which is usually in the head part of the site’s layout. Within an article, it would represent the beginning of the article and usually wrap <h1>. We used to do this: <div id="header">.... Now we do this <header>.... Header, when used within an article tag should be used to indicate not just the title of the article, but other information like the time it was written, author, amount of comments etc.
<hgroup>
This if for tag line headings. <hgroup> must only contain heading tags (h1-h6). <hgroup> is also used within the header tag, or as a specialized header alone, indicating a tag-lined heading. Example:
<hgroup>
<h1>Spider-man</h1>
<h2>The greatest superhero ever</h2>
</hgroup>
<header>
<hgroup>
<h1>Spider-man</h1>
<h2>The greatest superhero ever</h2>
</hgroup>
</header>
<details> and <summary>
This is used to give details about the website or the article. This tag is usually placed within the header or the footer. The details tag includes a summary tag. The summary acts as a heading for the details. The spec says that the summary must be the first child element within the details tag. It seems, from the spec, that it can not be placed independently and that it must be housed as child of the details tag. Here’s an example from W3Schools:
<details>
<summary>Copyright 1999-2011.</summary>
<p>All pages and graphics on this web site are the property of the company XYZ.</p>
</details> The HTML5 Doctor gave some clarity:
This is designed to produce an “expando” box that is closed by default (but can be open by default using the boolean open attribute), only displaying the text specified by the summary as a control. Activating that control opens the whole details element; re-activating closes it again. If no summary text is present, the browser defaults to the rubric “details”. (Added 4 Feb 10:) In browsers that support details, this behaviour does not depend on author scripting, and should work even if JavaScript is disabled or not present.
<footer>
This is used to indicate the end of an article or the whole webpage document. Footer can include nav, time, details and summary. The point of the footer is to indicate the end of something, and include any relevant information. We used to do this: <div id="footer">. Now we do this: <footer>.
<section>
This represents a section of a document as a whole, which can’t otherwise be labeled a header, footer, article, nav, or aside. It’s a generic tag for content that needs to be sectioned off. This is not the newdiv tag. Div will continually be used but for styling purposes only. Section must start with a h1, hgroup or header tag, followed by whatever content.
This tag obviously means: “a section of the website/page” and or “a section of the article”. This can be used as described before: within an article tag to separate the article’s content from the comment’s section. On a blog homepage, you may have different sections like: a list of articles, top user comments and the most popular articles. Each of these represent sections and would be wrapped as such.
<mark>
The tag is used to indicate highlighted text. We used to do something like this: <span class="highlight">some text</span>. Now we just wrap the content with <mark> and define its style in an external style sheet.
<time>
This tag is used to indicate the date or time of something stated within the content. I would probably just stick to using it to express the time of a blog post and user comment. Adding the attribute pubdateindicates that the time is the “published date” of the article document and not just a general reference to a time. Example:
<time pubdate>December 12th, 2012</time>Also there’s a datetime attribute. This is to be included if there is no date specified. For instance:
<time datetime="2008-12-25">Meet me on Christmas Day</time>Final Notes
Articles and sections can be nested within themselves and contain individual h1-h6 tags and not screw up the document outline as before with (x)HTML4. Header and footer define the scope of article, asideand section. These are just some of the new HTML5 features. Overall, these will provide more meaning to web documents.
Shorthand background property doesn’t work
To get HTML5 to work in older browsers like Internet Explorer 6-8, we use a javascript solution. However, I’ve run into a slight problem with the background property. Shorthand background declarations don’t render in IE6-8 with the javascript HTML5 fix in place. You’ll have to write the entire thing out – annoying but worth it, if you want to use HTML5.