Semantic Webpages
Semantic HTML
Semantic HTML is basically a way of writing your webpages in a structured way. This covers many areas such as use of headers (H1, H2, H3 …), use of paragraphs, styling etc.
The correct usage of Headers in your webpage can be a little confusing at first so I have drawn up a quick list here of simple rules:
-
Each webpage must have at least one heading
-
I have only one H1 heading per webpage
-
H1 heading is the first heading on the webpage
-
Try to use the webpage keywords in the H1 heading
-
Order headings correctly and never skip headers, for example never go from H1 to H3 without having a H2 in-between
Benefits of Semantic HTML
Here are a few benefits of semantic HTML
· Page load
· Accessibility
· Industry standards
· Quicker development
Page Load
By making your HTML uncluttered, using external stylesheets etc it will make the download time of your webpage quicker and also make the rendering speed of your webpage quicker – giving a much better user experience. And fast load times also impresses search engines so this is also an SEO benefit too.
Accessibility
Your website may be viewed and accessed by numerous types of devices and applications. Obviously the main application will be browsers such as Internet Explorer, Firefox, Chrome, Safari etc. These browsers will all need to decipher what your webpage will look like and if your site is developed to industry standards it will make it a lot easier for you to produce webpage pages that are friendly for all browsers.
Screen readers for the visually impaired will also visit your website. These will read the content from your page to the user. So, by having your website structured correctly will enable screen readers navigate though your webpage in the correct order. This is also applicable to search engine robots. Search Engine robots will navigate through your webpages when they are being indexed. If things are not structured correctly then the search engine robot may index the page incorrectly.
Industry Standard
By following industry standard techniques your website will not be left behind when things change. As new versions of browsers come on the market they will accommodate webpages that follow industry standard techniques as these browsers are bound to these techniques themselves. By not following industry standard technique you will be exposing yourself to owning a website that may not render correctly beyond the current release of browsers.
Quicker Development
Once you have fully understood the semantics you will find it really easy and quick to develop and maintain webpages.
Remember, always keep styling in stylesheets. A webpage contains the content for the webpage and the stylesheet says how it will look. Keeping these two apart will make it easier and quicker for you to make changes as you will know exactly where to look from the offset.
Summary
Test your webpages using free online tools such as WAVE (http://wave.webaim.org/)
And remember, by coding your webpages semantically it will benefit everyone, you, ALL website visitors, SEO, cross browser support etc etc etc.

Add A Comment