Сохтори саҳифа

Ин барои чӣ лозим аст

Қариб ҳар сайт «скелет»-и якхела дорад: дар боло сарлавҳа бо логотип ва меню, дар мобайн мундариҷаи асосӣ, баъзан дар паҳлӯ сутуни канорӣ, дар поён поёни саҳифа бо тамосҳо. Барои ин қисмҳо дар HTML тегҳои семантикӣ — тегҳои маънодор ҳастанд. Аз берун онҳо аз блоки оддӣ фарқ надоранд, аммо:

• системаи ҷустуҷӯ мефаҳмад, ки матни асосӣ дар куҷост ва меню дар куҷо;
• одами нобино бо як тугма метавонад ба мундариҷаи асосӣ «ҷаҳад»;
• кодро хондан осонтар аст: <nav> аз блоки беном фаҳмотар аст.

Қисмҳои асосии саҳифа

<header>
  <a href="/">Логотип</a>
  <nav>
    <a href="/">Асосӣ</a>
    <a href="/about">Дар бораи мо</a>
  </nav>
</header>

<main>
  <h1>Хуш омадед</h1>
  <p>Матни асосии саҳифа.</p>
</main>

<footer>
  <p>© 2026 CodeWithMe</p>
</footer>

Натиҷа: дар боло истиноди логотип ва меню, дар мобайн сарлавҳа ва матн, дар поён сатр бо ҳуқуқи муаллиф.

Тег	Дар дохил чист
<header>	сарлавҳа: логотип, ном, меню
<nav>	навигатсияи асосӣ — менюи истинодҳо
<main>	мундариҷаи асосӣ; дар саҳифа як аст
<footer>	поёни саҳифа: тамосҳо, ҳуқуқи муаллиф, истинодҳо ба қоидаҳо
<aside>	иловагӣ: сутуни канорӣ, реклама, «инро ҳам хонед»

Қисмҳо ва мақолаҳо

Дар дохили <main> мундариҷаро боз тақсим мекунанд:

• <section> — қисми саҳифа дар бораи як мавзӯъ. Қисм одатан сарлавҳаи худро дорад.
• <article> — пораи мустақил, ки алоҳида ҳам маъно дорад: пост дар блог, хабар, корти мол, шарҳ.

Чӣ тавр интихоб кунем? Аз худ бипурс: «Оё ин пораро бурида дар сайти дигар нашр кардан мумкин аст?» Агар ҳа — <article>. Агар ин танҳо қисми саҳифа бошад — <section>.

<main>
  <section>
    <h2>Фикрҳо</h2>
    <article>
      <h3>Нигина</h3>
      <p>Курси аъло!</p>
    </article>
    <article>
      <h3>Темур</h3>
      <p>Ҳама чиз аз бори аввал фаҳмо аст.</p>
    </article>
  </section>
</main>

Натиҷа: қисми «Фикрҳо» ва дар он ду фикр, ҳар кадом бо сарлавҳаи худ.

<header> ва <footer> дар дохили мақола ҳам мешаванд — масалан, сарлавҳаи мақола бо муаллиф ва сана.

Сана: <time>

Санаро одам чун «31 октябр» мехонад, барнома бошад 2026-10-31-ро бештар дӯст медорад. <time> ҳардуро медиҳад:

<p>Нашр шуд <time datetime="2026-10-31">31 октябр</time></p>

Натиҷа: дар саҳифа «Нашр шуд 31 октябр» намоён аст.

<div> ва <span> — блокҳои бе маъно

Баъзан печонак танҳо барои гурӯҳбандии унсурҳо ва баъдтар ороиш додани онҳо дар CSS лозим аст. Барои ин тегҳои «холӣ» ҳастанд:

• <div> — зарфи блокӣ (аз сатри нав, ба тамоми бар);
• <span> — зарфи сатрӣ (дар дохили матн).

<div class="card">
  <p>Нарх: <span class="price">99 сомонӣ</span></p>
</div>

Натиҷа: мисли сархати оддӣ менамояд. <div> ва <span> маъно надоранд — онҳо чун «қалмоқ» барои CSS лозиманд (атрибути class-ро дар мавзӯи 9 таҳлил мекунем).

Қоида: аввал теги семантикии мувофиқро ҷӯй, <div>-ро вақте гир, ки мувофиқ нест.

Дар дохил чӣ тавр кор мекунад

Браузер <header>, <main>, <section>, <div>-ро якхела нишон медиҳад — чун блокҳои оддӣ. Фарқ на ба чашм, балки ба барномаҳо намоён аст: барномаи хониши экран аз рӯи ин тегҳо «харитаи нишонаҳо»-и саҳифаро месозад, ва одам метавонад гӯяд «ба навигатсия гузар» ё «ба мундариҷаи асосӣ».

Хатоҳои маъмул

1. Ҳама чиз аз <div>. Чунин тартиб кор мекунад, аммо барои системаҳои ҷустуҷӯ ва барномаҳои хониш гунг аст.
2. Ду <main>. Мундариҷаи асосӣ дар саҳифа як аст.
3. <section> бе сарлавҳа. Агар сарлавҳа нест ва лозим ҳам нест — эҳтимол ин танҳо <div> аст.
4. <nav> барои ҳар истинод. <nav> — барои блокҳои асосии навигатсия, на барои ҳар истинод дар матн.
5. Интихоби тег барои намуди зоҳирӣ. Теги семантикиро аз рӯи маъно интихоб мекунанд, намудро дар CSS танзим мекунанд.

Ёддошт

Тег	Маъно
<header>	сарлавҳаи саҳифа ё мақола
<nav>	менюи навигатсия
<main>	мундариҷаи асосӣ, яке дар саҳифа
<section>	қисми мавзӯӣ бо сарлавҳа
<article>	сабти мустақил: пост, хабар, корт
<aside>	канорӣ, дуюмдараҷа
<footer>	поёни саҳифа
<time datetime="…">	сана/вақт
<div> / <span>	печонаки блокӣ / сатрии бе маъно