Hello coders👩💻👨💻, in this blog, I will guide you on why we use HTML Semantic Elements in our applications. Are you excited? Let's get started!
Semantic HTML tags provide several benefits, including improved accessibility for users with disabilities, better search engine optimization (SEO), improved maintainability of code, and future-proofing. By using descriptive tags, you can make it easier for others to understand the structure and purpose of your web pages, and adapt to new technologies and devices in the future.
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
Semantic Elements in HTML
While many websites use non-semantic HTML code like <div id="nav">, <div class="header">, and <div id="footer"> to define navigation, header, and footer sections, HTML also provides semantic elements that can be used for this purpose. Semantic elements like <nav>, <header>, and <footer> have a clear and specific meaning, which can improve the accessibility, maintainability, and search engine optimization (SEO) of a web page. By using semantic HTML, we can create web pages that are easier to understand, maintain, and use for both humans and machines.
Some examples of semantic HTML tags include:
<header>: Defines a header section for a document or section
<nav>: Defines a section of navigation links
<main>: Defines the main content of a web page
<article>: Defines a self-contained article or piece of content
<section>: Defines a section of content
<aside>: Defines content that is tangentially related to the main content
<footer>: Defines a footer section for a document or section Using semantic HTML tags can make your code more readable and maintainable, as well as improve the accessibility and usability of your web pages.
<!DOCTYPE html>
<html>
<body>
<section>
<h1>
WWF</h1>
<p>
The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>
WWF's Panda symbol</h1>
<p>
The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
<section>
<figure>
<img src="https://avatars.githubusercontent.com/u/69744397?v=4" alt="myimage" style="width:50%">
<figcaption>
Fig.1 -Richa<sub>
sheCode</sub>
</figcaption>
</figure>
</section>
</body>
</html>
🎯 Conclusion**!**
To summarize, while it is common for websites to use non-semantic HTML code like <div> to define different parts of a web page, using semantic HTML elements like <nav>, <header>, and <footer> provides several benefits. These benefits include improved accessibility, maintainability, and search engine optimization. By using semantic HTML, we can create web pages that are easier to understand and use, both for human users and machines like search engines and screen readers.
🎯 Wrap Up!!
Thank you for taking the time to read my blog on the importance of using HTML Semantic Elements in web development. If you found this information helpful, please share it with your network to help spread awareness of the benefits of semantic HTML. Your support and feedback are greatly appreciated!