What is HTML5 Semantic Layout?

Question

Ok, This is a silly question but what does mean by 'HTML5 provides Semantic Layout'. What really is a 'Semantic Layout'?

Answer 1

This is in reference to a shift in how tags are named in the HTML markup. So in addition to things like div which could mean anything, there are new tags like:

• header
• article
• aside
• nav
• footer
• etc.

The use of these tags provides more information about the semantic content of the markup, as opposed to relying on specifications that are more about style than content (such as <div class="header">).

The idea here is that the content itself tells you "what" it is. A clear benefit is for things like screen readers for visually impaired users, which can more effectively present the content to the user in a more structured manner.

Answer 2

Semantic markup will shift the focus away from presentation to structure. For example, instead of using h tags to make text larger or smaller, you use h tags to denote text that serves as headings for paragraphs or sections.

Instead of generic divs with IDs or classes to denote their purpose, semantic markup will use tags such as header, footer and nav to clearly identify sections of the document.

The HTML markup will become purely structural and presentation information will be moved to a separate layer such as CSS.