HTML / article, section, aside

article, section, aside

<article>, <section>, <aside> гурав нь агуулгыг утга учиртайгаар зохион байгуулдаг semantic элементүүд. Гурвыг ялгаж сурах нь анхандаа хэцүү боловч дараах зарчмыг санавал хялбарна.

<article> — бие даасан нийтлэл

<article> нь хуудсаас тусгаарлагдан гарсан ч утгаа алдахгүй, бие даасан агуулгыг бүлэглэнэ.

Тест: "Энэ агуулгыг RSS feed, өөр сайт, эсвэл и-мэйлд оруулж болох уу?" — Хэрэв тийм бол <article>.

html
<!-- Блог нийтлэл -->
<article>
  <header>
    <h2>JavaScript-ийн шинэ онцлогууд</h2>
    <time datetime="2024-03-15">2024 оны 3 сарын 15</time>
  </header>
  <p>ES2024-д олон шинэ онцлог нэмэгдлээ...</p>
  <footer>
    <a href="/blog/js-features">Дэлгэрэнгүй унших →</a>
  </footer>
</article>

<!-- Мэдэгдэл карт -->
<article>
  <h3>Шинэ курс нэмэгдлээ</h3>
  <p>Docker курс одоо ашиглах боломжтой боллоо.</p>
</article>

<!-- Сэтгэгдэл -->
<article>
  <header>
    <strong>Бат</strong>
    <time datetime="2024-03-16">Өчигдөр</time>
  </header>
  <p>Маш хэрэгтэй хичээл байлаа, баярлалаа!</p>
</article>

<section> — сэдвийн хэсэг

<section> нь нэг сэдвийн хүрээнд нэгтгэгдсэн агуулгын бүлэг. <article>-аас ялгаа: section нь хуудсын нэг хэсэг — тусдаа гарч болохгүй.

Тест: "Энэ хэсгийн гарчиг байх уу?" — Хэрэв тийм бол <section>.

html
<main>
  <section>
    <h2>Онцлох сургалтууд</h2>
    <article>...</article>
    <article>...</article>
  </section>

  <section>
    <h2>Сүүлийн мэдээ</h2>
    <article>...</article>
    <article>...</article>
  </section>

  <section>
    <h2>Хэрэглэгчдийн сэтгэгдэл</h2>
    <article>...</article>
    <article>...</article>
  </section>
</main>

Nested section

<section> дотор <section> байж болно — агуулгын шатлал үүсгэхэд:

html
<article>
  <h1>HTML гарын авлага</h1>

  <section>
    <h2>Үндэс</h2>
    <section>
      <h3>Tag гэж юу вэ</h3>
      <p>...</p>
    </section>
    <section>
      <h3>Attribute гэж юу вэ</h3>
      <p>...</p>
    </section>
  </section>

  <section>
    <h2>Form</h2>
    <p>...</p>
  </section>
</article>

<aside> — хажуугийн агуулга

<aside> нь үндсэн агуулгатай холбоотой боловч гол утгаас тусдаа байж болох агуулга. Sidebar, нэмэлт мэдээлэл, сурталчилгаа, холбоотой нийтлэлийн жагсаалтад ашиглана.

html
<main>

  <!-- Гол нийтлэл -->
  <article>
    <h1>CSS Grid-ийн бүрэн гарын авлага</h1>
    <p>Grid-ийн бүтэц...</p>

    <!-- Нийтлэлийн дотоод aside — холбоотой тэмдэглэл -->
    <aside>
      <p><strong>Тэмдэглэл:</strong> Grid нь IE11-д бүрэн дэмжигддэггүй.</p>
    </aside>

    <p>Grid-ийн column тохируулга...</p>
  </article>

  <!-- Хуудасны sidebar -->
  <aside>
    <section>
      <h2>Холбоотой нийтлэл</h2>
      <ul>
        <li><a href="/css/flexbox">Flexbox гарын авлага</a></li>
        <li><a href="/css/responsive">Responsive дизайн</a></li>
      </ul>
    </section>

    <section>
      <h2>Хамгийн их үзсэн</h2>
      <ol>
        <li><a href="/js/async">Async/Await тайлбар</a></li>
        <li><a href="/html/forms">HTML form бүрэн жишээ</a></li>
      </ol>
    </section>
  </aside>

</main>

Гурвын харьцуулалт

| Элемент | Утга | Тест асуулт | |---------|------|-------------| | <article> | Бие даасан агуулга | Тусдаа гарч болох уу? | | <section> | Сэдвийн хэсэг | Гарчигтай хэсэг үү? | | <aside> | Хажуугийн нэмэлт | Гол агуулгаас тусгаарлаж болох уу? |

Практик жишээ — блог хуудас

html
<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <title>Технологийн блог</title>
  </head>
  <body>

    <header>
      <a href="/">Технологийн блог</a>
      <nav>
        <a href="/html">HTML</a>
        <a href="/css">CSS</a>
        <a href="/js">JavaScript</a>
      </nav>
    </header>

    <main>

      <!-- Үндсэн нийтлэлүүдийн хэсэг -->
      <section>
        <h1>Сүүлийн нийтлэлүүд</h1>

        <article>
          <header>
            <h2><a href="/html/semantic">Semantic HTML яагаад чухал вэ</a></h2>
            <time datetime="2024-03-20">2024.03.20</time>
          </header>
          <p>Semantic HTML нь SEO, accessibility, код уншигдах чанарт...</p>
        </article>

        <article>
          <header>
            <h2><a href="/css/grid">CSS Grid дэлгэрэнгүй</a></h2>
            <time datetime="2024-03-18">2024.03.18</time>
          </header>
          <p>CSS Grid нь хоёр хэмжээст layout хийх хамгийн хүчирхэг арга...</p>
        </article>

      </section>

    </main>

    <!-- Sidebar -->
    <aside>
      <section>
        <h2>Сэдвүүд</h2>
        <ul>
          <li><a href="/html">HTML (15)</a></li>
          <li><a href="/css">CSS (22)</a></li>
          <li><a href="/js">JavaScript (31)</a></li>
        </ul>
      </section>
    </aside>

    <footer>
      <p>© 2024 Технологийн блог</p>
    </footer>

  </body>
</html>

Дараагийн хичээлд:

<div> ба <span> элементүүдийг хэзээ, хэрхэн ашиглах талаар үзнэ. Semantic элементтэй харьцуулан аль тохиолдолд <div> зөв сонголт болохыг тайлбарлана.

← Өмнөх хичээлheader, nav, main, footerДараах хичээл →div ба span