What is Semantic HTML?
The Collins Dictionary gives the following definition of Semantic :
Semantic adjective
-
Semantic is used to describe things that deal with the meanings of words and sentences.
And in American English:
-
of or pertaining to meaning, esp. meaning in language
Semantic HTML element names have meaning and describe the part of the webpage they contain. It is a markup language that is logical and increases accessibility for the web browser and search engine.
For example: <nav> is the tag for navigation, and <article> is the tag for an article. <p> denotes a paragraph and <header> and <footer> are the sections you see at the top and bottom of each page.
You can read more about this on the page about HTML.
Why use it?
Accessibility - an important factor in any website design. Screen readers can use it to help visually impaired users to navigate through a page.
Search engines use the element names as important keywords - your page will appear higher in search results.
It's easier to write - you don't have to remember the class names of all those divs you previously used.
The type of data to be entered into elements is more easily identified for the web developer. For instance: is it a list of things?; is it an article with sections or sub-sections?; is this an image that needs a caption?
With thoughtful styling (CSS) added it can reduce the number of elements on a page, thereby reducing the amount of source code and making the webpage load faster - another important in website design.
It makes it easier for other websites to pick out elements of your page and include them in their own, should they so wish. For instance, anything within an <article> element should be a complete article or blog post.
When other websites can pick out elements of your pages to share it also gives you a bigger presence on the web and increases your search rankings - a desirable factor for any website.
Interested so far? Good. Let's take a look at how you use semantic HTML5.