I wanted to understand the new HTML5 tags. This is a record of my studies and doesn’t include every new element and attribute.
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
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
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.
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
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
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.
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.
This if for tag line headings.
<hgroup> must only contain heading tags (
<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>
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 used to indicate the end of an article or the whole webpage document.
Footer can include
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:
This represents a section of a document as a whole, which can’t otherwise be labeled a
aside. It’s a generic tag for content that needs to be sectioned off. This is not the new
Div will continually be used but for styling purposes only.
Section must start with a
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.
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.
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>
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
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