What you need to know
Semantic HTML gives each part of a page a job. That improves keyboard and screen-reader navigation, makes markup easier for teammates to scan, and provides useful structure to search engines without adding extra JavaScript.
How to apply it
Use one main landmark for the page, nav for navigation groups, article for self-contained content, and section when a heading introduces a related group. Choose elements by meaning, then style them with CSS.
Common mistake to avoid
Do not choose an element because its default appearance looks right. A div with a clear class can be styled like anything; the semantic element should describe what the content is.