More Web Design Tutorials

HTML5 Structural Tags

November 15, 2012

Aside from list and paragraph tags, HTML 4 and earlier didn’t provide any actual structure tags, and we had to use the div tag for our layout framework. HTML5 gives us tags so we can call things as we see them.

Some of the more frequently occurring tags are:

article

Self-explanatory: an article

aside

A section ‘aside’ from the page content. Example: Your right or left side-panel

figure

This could surround things like photos, illustrations, listings, diagrams, and such.

figcaption

This would be the title of your figure item.

footer

Guess!!!

header

Opposite end of the footer

nav

This would contain your navigation

section

This can be used for any section on the page, much like the ‘div’ tag.

time

This tag would contain a date and/or time.

When defining the look of above tags in your CSS, they are targeted directly, without any class or id symbols. For example:

section {
     width: 980px;
     margin: 0 auto;
}
 
header {
     padding: 10px;
     background: silver;
}
 
nav {
     define your nav here;
}
aside {
     float: left;
     width: 275px;
}

Just a few examples to give you the idea.

Of course you can still add an ID or class to any of these, if you need more than one, and then target that class or ID in your CSS. For example:

.....
 
....

And the CSS for the tags with an ID would look like this:

#wrapper {
     define your wrapper;
}
 
.content {
     define your content area (or section - or division);
}

If you have any questions about this tutorial or run into trouble trying it yourself, post your question/problem in the Killersites Forum for help.