Free code

How to use HTML 5 semantic markup in your website (Part 2/2)

In our last article we broke down some of the most commonly used semantic markup tags you'll see on the web. In this article we'll build a basic blog page that contains several of these markup tags in action so you an see how they work in a web building software such as Dreamweaver CS6 (which is what we're using). It will help if you have the last article handy as well to reference our descriptions for the different markup tags.

The page below is a basic page we built using semantic markup language and lorem ipsum text. We also broke down the various elements you see to help you better understand why we decided to place content in certain sections.

1

1a

If we deconstruct the site above, we decided to build the top portion (That includes the title "How to build a semantic markup website") into a main <header> tag that includes a <nav> tag nested within it. Nesting semantic markup is useful for proper html 5 structure. On the left hand side of the page, the larger box (that surrounds the smaller box containing "A brief article" text) is an <article> tag and the smaller bo inside at the top is another <header> tag since it's the heading of a main article.

Along the right-hand side of the page we have an <aside> tag that's the larger box and nested within this box is the <section> tag since it contains a section of thematically related content (in this case, an about us section and a small menu).

For the bottom image, the large box surrounding the Learn More, Discuss, Share and larger About the Author section is a <footer> tag since it contains a lot of information a user would expect to see on the bottom of a webpage. The very bottom of the page is a separate <footer> class that contains a copyright. We could have contained both of these elements together in one <footer> tag but decided it would be easier for sreen readers to dissect the contents if they read from one <footer> tag to the next. And finally the right-hand side element (the newseletter and job board) is nested in the <aside> and <section> portion we mentioned in the first image.

Here's some screen captures of the html code and CSS we did as well so you can see how similar these elements look to using regular divs:

2

3a

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image