Semantic HTML
Semantics is the science of meaning. Semantic HTML is the writing of code to makes it easier for both humans and computers to understand the content within an HTML document.
Semantic elements
Semantic elements replace non-semantic elements such as <div> and <span>, which are not descriptive, with more relevant terms.
Semantic HTML uses meaningful human terms to describe what an HTML element contains. For example, <header> is used to define content for the header of a page or section.
Semantic elements associated with document layout:
| <header> | the top of a document or section | ||
| <nav> | a group of navigation links | ||
| <main> | main content of a document | ||
| <article> | self contained article | ||
| <section> | defines a section within a document | ||
| <aside> | indirectly related document | ||
| <footer> | the base of a document or section | ||
Using these standardised semantic HTML terms makes markup easier to create, organise and maintain.
The diagram below illustrates how Semantic markup can be used to group and organise HTML content.
Nesting semantic elements
Semantic markup can be divided into areas which make the HTML document easier to organise.
Semantic elements can also be nested within other semantic elements. For example, a <header> element may have <nav> nested within it, a <section> and <footer> could also include a nested <nav> element.
<header><nav class="main-menu"><ul><li>Menu item</li><li>Menu item</li><li>Menu item</li></ul></nav></header><section><nav class="section-menu"><ul><li>Section menu item</li><li>Section meun item</li><li>Section meun item</li></ul></nav></section><footer><nav class="footer-menu"><ul><li>Footer menu item</li><li>Footer menu item</li><li>Footer menu item</li></ul></nav></footer>Why do computers care about semantic markup?
Search engines can better understand semantic markup as it uses standardised terms to describe the content. This makes it is easier for search engines to index content and deliver more accurate and relevant search results.
Semantic markup aids accessibility by helping screenreaders to understand which are the significant areas of content, especially when used in conjunction with Aria terms.
Semantic HTML markup should be used to make create a standardised HTML code which is simple to understand and can be easily shared with other designers/developers for any future updates.
Next step
HTML – 10 – Learning more