Semantic markup is a way of writing and structuring your HTML (Hypertext Markup Language) so that it reinforces the semantics, or meaning, of the content rather than its appearance. ... All of these semantic tags make it clearer what information is on the web page as well as its importance.
Semantic HTML refers to syntax that makes the HTML more comprehensible by better defining the different sections and layout of web pages. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.
Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are, and browsers know how to display them.
These are the most important advantages that semantic markup give us:
1. Clearer code and easier to maintain
But… Why use certain tags? For example, a <nav> tag to contain your navigation bar, if you can use a <div> tag.
Many of these tags will not represent any change in the distribution of content or in the way in which the text is displayed, but this practice allows our code to make more sense, and to be closer to a natural language, where each element uses the adequate words.
In addition, when a project grows, adding more pages and more lines of code, the presence of semantic tags helps us orientate ourselves.
2. Help your site be accessible
There is a considerable amount of users that depend on a screen reader software to navigate the internet and only surf the internet through the use of the keyboard.
So making sure that screen readers can read each element, and that each of them can be accessed through the keyboard is ESSENTIAL. We have to code for all users.
Semantic HTML is not only about using the new semantic tags, but about using the correct tags for each element, so that it is easy to navigate for all users.
3. Improve your SEO positioning
Your SEO positioning can be affected, positively or negatively depending on factors such as: the way in which the content is written, a ‘responsive’ design or that the site is accessible.
