Member-only story
Semantic HTML
What? Why? How?
What
HTML is the markup or layout language of web pages. It describes the layout or structure of the page using Tags. Example:
<!DOCTYPE html>
<html>
<body>
<h1>Heading</h1>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Footer</p>
</body>
</html?Semantic HTML uses tags for each element that describe the purpose of the element. Example:
<!DOCTYPE html>
<html>
<body>
<main>
<header>Heading</header>
<section>
<p>First paragraph.</p>
<p>Second paragraph.</p>
</section>
<footer>Footer</footer>
</main>
</body>
</html>Why
Semantic HTML is about creating web content that is human and computer-readable. When both humans and computers can read the web, it becomes more accessible since computers can analyze its contents, index it, and deliver it.
Creating semantic HTML is mandatory if you want your website to be accessible to all visitors, achieve a high search engine ranking, be available to visitors worldwide, and effectively interface with other web services.
How
The div element identified and grouped sections of a website in the past. However, with the release of HTML5, we have several…
