Certified HTML5 Developer Learning Resources HTML5 new structure and inline elements

Learning Resources
 

HTML5 new structure and inline elements

It therefore makes a lot of sense to define a consistent set of elements for everyone to use for the common structural blocks that appear on so many web sites, and this is exactly what is defined in HTML5.

The new HTML5 elements covers:

  • : Used to contain the header content of a site.
  • : Contains the footer content of a site.
  • : Contains a standalone piece of content that would make sense if syndicated as an RSS item, for example a news item.
  • : Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.

As shown in the example:

File:htmlstructure4.png

Figure: The example site, with appropriate HTML5 elements indicated for different major structural sections.

In code, this looks like so:

Let's explore some of the HTML5 elements in more detail.

The

element is for containing distinct different areas of functionality or subjects area, or breaking an article or story up into different sections. So in this case:

  • "sidebar1" contains various useful links that will persist on every page of the site, such as "subscribe to RSS" and "Buy music from store".
  • "main" contains the main content of this page, which is blog posts. On other pages of the site, this content will change.

It is a fairly generic element, but still has way more semantic meaning than the plain old

.

is related to
, but is distinctly different. Whereas
is for grouping distinct sections of content or functionality,
is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way - if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then
is suitable for marking them up.

In our example,

contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore
is perfect for them:

Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this:

and

as we already mentioned above, the purpose of the

and
elements is to wrap header and footer content, respectively. In our particular example the
element contains a logo image, and the
element contains a copyright notice, but you could add more elaborate content if you wished. Also note that you can have more than one header and footer on each page - as well as the top level header and footer we have just discussed, you could also have a
and
element nested inside each
, in which case they would just apply to that particular article. Adding to our above example:

The

 For Support