How to semantically divide content on a page?

Semantic content separation is achieved using appropriate HTML5 tags.

Main semantic tags:

• <header>: Introduction or group of navigation or introductory elements. Often contains the site title, navigation, logo.
• <nav>: Block of navigation links.
• <main>: Main content of the document. Should be unique on the page (not duplicated in footer, header, sidebar).
• <article>: Self-contained, independent content fragment (article, blog post, comment).
• <section>: A separate section of the document (chapter, paragraph, content block on the main page). Should have a heading (<h1>-<h6>).
• <aside>: Part of the content indirectly related to the main content (sidebar, quote inset, advertisement).
• <footer>: Footer of a section or document. Usually contains information about the author, copyrights, links to related documents.
• <figure>: Self-contained content (image, diagram, table) that can be moved out of the main document flow without losing meaning. Often used with <figcaption>.
• <figcaption>: Caption for the <figure> element.
• <mark>: Highlights (marks) text that has special significance or interest in the context of surrounding text.
• <time>: Represents a specific time or time interval.

Applying semantic tags improves accessibility, SEO, and maintainability of the code. Search engines and assistive technologies (screen readers) better understand the structure of the page.