Benefits of sematinc html in web development

Nowadays aspiring web developers need to study a growing number of technologies. Thanks to component libraries that offer out of the box components and the illusion that courses that take only a few months are sufficient to make anybody a programmer, the html knowledge of the average programmer remains superficial.

If you feel guilty reading these lines, start studying now: dev/dom.html

What is Semantic HTML?
Semantic HTML refers to the use of HTML elements that provide meaning and structure to the content of a web page. Instead of using generic elements or divs without clear semantics, use specific elements that reflect the meaning of the content.

The use of Semantic HTML offers several advantages. First, it improves website accessibility for people with disabilities through assistive tools such as screen readers, as it provides clear information about the structure of documents. It also helps search engines better understand the content of the page, facilitating indexing and ranking in search results.

Here are some examples of semantic HTML elements:

<header>	represents a page or section header.
<nav>	represents a navigation section.
<main>	represents the main content of a page.
<article>	represents an article within a page.
<section>	represents a logical or thematic section of a page.
<aside>	represents content aside from the page content
<footer>	represents the footer of a page or section.
<abbr>	Abbreviation
<acronym>	Acronym
<blockquote>	Long quotation
<dfn>	Definition
<address>	Address for author(s) of the document
<cite>	Citation
<button>	Button
<code>	Code reference
<tt>	Teletype text
<del>	Deleted text
<ins>	Inserted text
<em>	Emphasis
<strong>	Strong emphasis
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>	First-level headline, Second-level headline, Third-level headline, Fourth-level headline, Fifth-level headline, Sixth-level headline
<hr>	Thematic break
<kbd>	Text to be entered by the user
<pre>	Pre-formatted text
<q>	Short inline quotation
<samp>	Sample output
<sub>	Subscript
<sup>	Superscript
<var>	Variable or user defined text

An important aspect of Semantic HTML concerns the proper use of attributes. For example, the alt attribute should be used to provide alternative text to images, enabling people with visual impairments to understand visual content. Similarly, the label attribute should be used to associate explicit labels with input elements in forms, improving usability for users with cognitive or motor disabilities.

Why use Semantic HTML?
We have seen some benefits of Semantic HTML but they are worth repeating:

• Accessibility: Semantic HTML is the foundation of web accessibility, it greatly improves the experience of users that browse the web with assistive technology. This is because screen readers and browsers are able to interpret the code better. I recommend this excellent article: docs/Learn/Accessibility/HTML
• SEO: It improves website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately. An additional important resource can be found at this link: schema.org
• Easy to Understand: Semantic HTML also makes the website’s source code easier to read for other web developers. You can find a more practical resource here: guides/semantic-html

How do I start writing better markup?
This is a very good question, my advice is to take your markup and have fun refactoring. By correcting your markup as you go along, writing better markup will come more and more naturally.

How do I know if my markup is well-written?
Do you think you have improved all improvable markup? This specific checklist can help you answering that question: topics/html-semantics-checklist