Introduction to Semantic HTML
Semantic HTML is an essential aspect of web development that helps create accessible, SEO-friendly websites. Semantic HTML refers to the use of HTML elements to convey the meaning of content on a web page, rather than just defining its appearance.
Semantic HTML provides a clear and structured markup, makes it easier for search engines to index and understand the content of a web page, and it also improves accessibility for users with disabilities.
Non-semantic HTML, on the other hand, describes content by its appearance rather than its meaning. For example, using a <div> element to structure a web page instead of a semantic element such as <nav>, <header>, or <section> can make it difficult for search engines and screen readers to determine the purpose of each element. This can lead to a poorer user experience for both sighted and visually-impaired users.
It can benefit web designers and developers by making the code more organized and maintainable. Using semantic elements to describe the content, makes it is easier to understand and modify the structure of a web page.
Examples of semantic and non-semantic use
Non-semantic HTML
In this example, the content is structured using <div> elements with classes to define the different parts of the web page. While this code will render as expected in a web browser, it does not provide any semantic meaning to the content.
<div class="services">
<div class="service">
<div class="service-icon">
<img src="service1.png" alt="Service 1">
</div>
<div class="service-name">
<h3>Service 1</h3>
</div>
<div class="service-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique quam eget sapien rutrum, vitae hendrerit tortor iaculis.</p>
</div>
</div>
<div class="service">
<div class="service-icon">
<img src="service2.png" alt="Service 2">
</div>
<div class="service-name">
<h3>Service 2</h3>
</div>
<div class="service-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique quam eget sapien rutrum, vitae hendrerit tortor iaculis.</p>
</div>
</div>
</div>Semantic HTML
In this example, the content is structured using semantic HTML elements. The <section> element defines a section of content, and the <article> element defines individual articles within that section. The <header> element is used to define the header of each article, which includes the service name and icon, and the <p> element is used to define the service description.
<section class="services">
<article class="service">
<header>
<img src="service1.png" alt="Service 1 icon">
<h3>Service 1</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique quam eget sapien rutrum, vitae hendrerit tortor iaculis.</p>
</article>
<article class="service">
<header>
<img src="service2.png" alt="Service 2 icon">
<h3>Service 2</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique quam eget sapien rutrum, vitae hendrerit tortor iaculis.</p>
</article>
</section>TL;DR
Semantic HTML allows the code becomes more organized and easier to understand. Additionally, it provides better accessibility for users with disabilities. Screen readers can better understand the content and provide a more accurate reading experience.
It is an essential aspect of web development that provides better accessibility and SEO for websites. It allows web developers to create well-organized and maintainable code. Making it easy for search engines and screen readers to understand.
Structuring content using semantic HTML elements such as <section>, <article>, <header>, and <p>, web developers can provide a more meaningful and accessible experience for all users.