Бетте мазмұнды семантикалық түрде қалай бөлуге болады?

Мазмұнды семантикалық бөлу сәйкес HTML5 тегтері арқылы жүзеге асырылады.

Негізгі семантикалық тегтер:

• <header>: Кіріспе немесе навигациялық немесе кіріспе элементтердің тобы. Әдетте сайттың тақырыбы, навигация, логотип қамтиды.
• <nav>: Навигациялық сілтемелер блогы.
• <main>: Құжаттың негізгі мазмұны. Бетте бірегей болуы керек (футерде, хедерде, сайдбарда қайталанбауы керек).
• <article>: Өздігінен жеткілікті, тәуелсіз мазмұн бөлігі (мақала, блог жазбасы, пікір).
• <section>: Құжаттың бөлек бөлігі (тарау, абзац, басты беттегі мазмұн блогы). Тақырып болуы керек (<h1>-<h6>).
• <aside>: Негізгі мазмұнмен жанама байланысты мазмұн бөлігі (сайдбар, цитата, жарнама).
• <footer>: Бөлімнің немесе құжаттың төменгі тақырыбы. Әдетте автор туралы ақпарат, авторлық құқықтар, байланысты құжаттарға сілтемелер қамтиды.
• <figure>: Өздігінен жеткілікті мазмұн (сурет, диаграмма, кесте), ол негізгі құжат ағынынан мағына жоғалтпай ауыстырылуы мүмкін. Әдетте <figcaption>-пен бірге пайдаланылады.
• <figcaption>: <figure> элементіне сипаттама.
• <mark>: Мәтінді ерекше мәні немесе қызығушылығы бар деп белгілейді.
• <time>: нақты уақытты немесе уақыт аралығын көрсетеді.

Семантикалық тегтерді қолдану қол жетімділікті, SEO-ны және кодтың қолдауын жақсартады. Іздеу жүйелері мен көмекші технологиялар (скринридерлер) бет құрылымын жақсы түсінеді.