Semantic HTML is the proper use of HTML to emphasize the semantics, or the meaning, of content in web pages and web applications rather than simply defining its appearance. Traditional web browsers and numerous other user agents process Semantic HTML. CSS is also used to suggest its appearance to users.
Why Should You Use Semantic HTML?
Semantically valid HTML helps screen readers, search engines, and other user devices decide the context and significance of web content. To effectively represent content meaning, developers choose appropriate HTML elements regarding the intrinsic meaning of a web page rather than how they appear visually.
Five main benefits of using semantic HTML are:
- Lighter code
- Maintainable code
- Accessibility
- Search visibility
- Future-proofing
Text-level HTML Semantics
In HTML, text-level elements such as <em>, <cite>, and <strong> add semantic data within phrasing content, to clearly indicate stress emphasis, citations, and strong importance, to name a few examples.
Sectioning HTML Semantics
With the progress of HTML5, new elements are now available that add semantic meaning to entire sections of web page sections, including <nav>, <header>, <aside>,and <footer>.
Structured Metadata – beyond Semantic HTML
Several technologies build on HTML syntax to signify objects, such as events, organizations, products, and people, to achieve more precise semantics than those achievable only with HTML.
For example, search engines are already using formats such as Microformats, RDFa, and Microdata to obtain meaningful data from a web page as part of the next era of the Semantic Web.