The Importance of Semantic Elements in HTML
What the heck are semantic elements? Why do we need them?
Okay, most developers know the definition of it but they don’t use it because instead of remembering those semantic elements, it's very easy to use a <div> tag. Well, here we will see how important is this Semantic Markup concept in the world of HTML.
The term Semantic itself represents something relating to the meaning, So, Semantic Markup is special HTML tags that describe what kind of content it contains. In very simple terms: it offers you very simple and understandable clean code — something that helps all SEOs and increases accessibility
Semantic Elements
It helps structure the code we create, making it more readable and easier to maintain. They help us think about the structure of our dynamic data and to understand the hierarchy properly.
Let’s have a look on some of the Semantic Elements
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
By seeing these tags you can guess their uses on the webpage.
Examples
To clarify more we will see some websites -
If you check medium.com, you will see the all tags are <div>, there are no semantic elements.
Now if you check stripe.com, you can see how they use semantic elements.
It has <nav>,<main>,<header>,<section>,<footer>,<article> etc..
Advantages of Semantice Elements
Clean code and easier to maintain
If we use Semantic tags instead of <div>, it's very helpful for new developers to understand the project structure, also the code will be more readable and clean.
Many of these tags will not change how content is distributed or how text is displayed, but this practice allows our code to make more sense and be closer to human-understandable language, where each element uses the appropriate words.
Improvement in SEO
Identification — As previously stated, semantic elements are extremely helpful in identifying key page components. Google’s Hummingbird engine, for example, focuses on the conversational aspects of page content, and using HTML5 semantics will aid Hummingbird in better understanding the entire page.
Keeping visitors on the website — HTML5 can help keep visitors on websites for longer periods of time, and the more time visitors spend on a specific page, the higher the ranking for that page.
Semantic elements encourage the syndication of website content across channels, which aids in repurposing or syndicating page content. This means that your site has more trusted “external” links, which greatly improves page rankings.
Better at handling rich content — This is especially useful for content-heavy pages (audio and video).
Increases accessibility
A significant number of users rely on screen reader software to navigate the internet and only use the keyboard to surf the internet.
As a result, ensuring that screen readers can read each element and that each can be accessed via the keyboard is ESSENTIAL. We must write code for all users.
Semantic HTML is more than just using the new semantic tags; it is also about using the correct tags for each element so that all users can navigate easily.
Finally, to sum up this topic, learning semantic markup will make your life easier and your code better.
More content at plainenglish.io
