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

HTML 5 has introduced a new method of structuring your webpage based on what type of content you have in a section. This new type of coding called "Semantic markup" is used to help web developers structure a page that will assist screen readers locate sections on a webpage more easily than before. Search engines may also place more importance on certain sections of semantic markup over others.  Semantic markup is a newer way of coding that's been getting more popular over the last few years. It's starting to replace some sections of code that used to be organized with a div class – a lot of developers think semantic markup and divs will be used in tandem on websites of the future.

Semantic markup aims to structure the page based on different content. As of right now, the most common types of semantic markup are (in no particular order): <header>, <nav>, <aside>, <article>, <form>, <section>, <table>, <img>, <fig>, <figcaption> and <footer>.     As you can see these titles clearly identify the content contain within.  It's important to note that certain browsers such as Internet Explorer have difficult rendering certain portions of a marked up site but solutions are being worked on currently to mitigate this for the future.

A breakdown of the following elements is as follows:

<header> – This tag would contain elements that sit in a common website head such as contact details, a logo or anything excluding the nav.

<nav> – As you might have guessed this includes the main nav portion of a website.

<aside> – This is for elements that add importance to the main page but could be found on multiple pages. Think sidebars or newsletter signup boxes here.

<article> – This tag would include articles such as blogs or written pieces on a website.

<form> – A way to organize the contents of a web form.

<section> – One of the most common semantic markups, a section is a collection of related content that usually has a heading. For example, this would be the main part of your website underneath a main banner – it could contain keyword rich content, buckets, etc.

<table> – A way of grouping table elements together.

<img> – A way of indicating that an image is contained within the tag.

<fig> – This tag usually contains images or videos. It's content that isn't as important as something found in say, the <section>.

<figcaption> – This contains a caption if necessary for he <fig>. For example it may include text describing a photo.

<footer> – This is content in the very bottom of the site such as copyright information or a secondary nav, sitemap, etc.

These elements will usually appear in enwer browsers; however to ensure that they display properly in older browsers the display property for the stylesheet should be set as "block". In the next article we'll look at building a basic webpage with a few of these semantic elements.

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