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.