HTML Semantics

#webdev #beginners #tutorial #html

Html semantics was introduced in HTML 5 by the introduction of semantic elements. Semantic elements mean elements that have meaning.

Text was divided in elements using the div element. (div, short for 'divider'). Now, there are many other elements that can be used <article>, <section>, <header>, <footer>, <nav> and so much more.

The <b> or bold element is now replaced by the <strong> element.
The <i> or italic element is now replaced by the <emphasis> element.

They are still there, i mean replaced in common modern usage.

div everything, why complicate it?

Well, the introduction of semantics have been of immense benefit.

For starters, search engines are now much better at understanding the context of the webpage. A navigation element might include titles of other topics. Without the element being highlighted as a navigation element by using the element, it would be harder for the search engine to know that the page is not about the titles included in the navigation.

Secondly, webpages with semantic elements have a higher SEO (search engine optimization) score ranking them higher in the search results.

Thirdly, screen readers will be better at reading content, they could skip reading the navigation or start reading the main content only so it's better for accessibility.

Let's look at some of the usage cases of some of the most common semantic elements.

<main>