HTML5 Semantic Elements give the language structure.
These include the following:

  • ‘Header’ <header></header> tags.
  • ‘Main’ <main></main> tags.
  • ‘Section’ <section></section> tags.
  • ‘Article’ <article></article> tags.
  • ‘Aside’ <aside></aside> tags.
  • ‘Footer’ <footer></footer> tags.

Lets start by creating a simple page that demonstrates how to use ‘semantic‘ HTML5 tags.
Below is a basic webpage that contains code for the doctype,head and body. Also added are ‘title‘ tags and a ‘meta‘ tag to the ‘head‘ element.

Now add some content into the ‘body‘ tags.
Start with an opening ‘<header>‘ tag on line 8 ‘. On line 9 place an opening ‘<h1>‘ tag after the opening ‘<header>‘ tag. Also place the heading, I will name the page ‘Webpage Design’. Next add the closing tags ‘</h1>‘ tag on line 9. Finally on line 10 add the closing ‘</header> tag.

The ‘<main>‘ tags are for the main content and the ‘<footer>‘ tags are for the information at the bottom of the document.

Inside the ‘main‘ tags is where ‘section‘ tags are placed. We add these on line 14 and then use a ‘h2’ header to name the section ‘Local News’.

Load the document into your browser to see how it looks so far.

Next on line 16 we add ‘article’ tags into the section tags. And we give the article a ‘<h3>‘ heading and ‘<p>‘ tags for a paragraph.

Try it in your browser!

Now on line 21 add another set of ‘section‘ tags with two sets of ‘article‘ tags. Give the section a heading of ‘Sports’ by using ‘h2‘ tags and give each article a heading and avparagraph by using ‘h3‘ tags and ‘p‘ tags.

Test it in your browser!

Finally on line 34 we need to add some information to our ‘footer’ tags. We will use ‘p’ tags to add a couple of simple sentences for the author and date.

All done! A semantic webpage.

HTML5 Semantic Elements

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

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