SEMENTIC HTML
IMPLEMENTATION AND BENEFITS OF SEMENTIC HTML TO WEB DEVELOPMENT
1.WHAT IS SEMANTIC HTML?
Semantic HTML refers to the use of HTML elements that clearly describe their meaning in a human and machine-readable way. In simple terms, when we use semantic elements, we’re telling the browser and other technologies (like screen readers and search engines) what kind of content is inside the element.
For Example;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Semantic Page</title>
</head>
<body>
<header>
<h1>My Blog Post</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
2.ELEMENTS OF SEMANTIC HTML
(a).HEADER
The element represents introductory content or a group of navigational links. It typically contains headings, logos or other elements that are at the beginning of a section or page.
(b).NAV
The element is used for defining a set of navigation links. This helps users and search engines easily identify the main navigation areas of your site.
(c).MAIN
The element is used to enclose the dominant content of the of a document. The content inside should be unique to the document and not include content that is repeated across documents like sidebars or footers.
(d).ARTICLE
The element is intended to represent a self-contained composition in a document, page or website, which is designed to be independently distributed or repurposed, such as in syndication.
(e).SECTION
The element represents a standalone section of content that typically comes with a heading. It’s used to group related content together.
(f).ASIDE
The element is intended for content that is related to the surrounding content but not essential to its primary message.
(g).FOOTER
The element signifies the end section of a page or content, often including details about the author, copyright information or related links.
3.CODE COMPARISON(SEMANTIC VS NON-SEMANTIC)
(a).SEMANTIC
<!DOCTYPE html>
<html>
<head><title>Semantic</title></head>
<body>
<header><h1>My Website</h1></header>
<nav>
<a href="/">Home</a>
<a href="/">About</a>
</nav>
<main>
<article>
<h2>Welcome</h2>
<p>This page uses semantic tags with meaning.</p>
</article>
</main>
<footer>powered by Tukode</footer>
</body>
</html>
(b).NON SEMANTIC
<!DOCTYPE html>
<html>
<head><title>Non-Semantic</title></head>
<body>
<div class="header">My Website</div>
<div class="nav">
<a href="/">Home</a>
<a href="/">About</a>
</div>
<div class="content">
<div class="title">Welcome</div>
<div class="text">This page uses only divs.</div>
</div>
<div class="footer">BY TUKODE</div>
</body>
2.WHY IS SEMANTIC HTML IMPORTANT?
(a).ACCESIBILITY
Accessibility is a key consideration when developing modern websites, and semantic HTML plays a vital role in making a website accessible to users with disabilities. For example, screen readers rely on semantic elements to understand the structure of a page and to provide meaningful navigation options to users. When we use semantic tags like , , and , we help screen readers to better interpret the content, which enhances the user experience for individuals who rely on these technologies.
(b).SEO-SEARCH ENGINE OPTIMIZATION
Search engines like Google also benefit from semantic HTML. Semantic tags give additional context and meaning to the content, which search engines use to understand the hierarchy and context of a webpage. This understanding helps search engines to rank a webpage more accurately for relevant queries.
(C).CODE MAINTENANCE
Writing clean, semantic HTML improves the maintainability of a codebase. When we use meaningful elements, other developers (or even your future self) can more easily understand the purpose of each section of the code. This can save time and reduce errors during updates and debugging.
