HTML / Жагсаалт (ul, ol, li)

Жагсаалт (ul, ol, li)

Жагсаалт нь вэбийн хамгийн нийтлэг бүтцүүдийн нэг. Навигацийн цэс, алхамт заавар, материалын жагсаалт — бүгд HTML жагсаалтаар хийгдсэн.

Эрэмбэгүй жагсаалт: <ul>

ul = unordered list. Дараалал чухалгүй зүйлсийн жагсаалт. Хөтчид цэгээр харагдана:

html

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Харагдах байдал:

HTML
CSS
JavaScript

<ul> дотор зөвхөн <li> (list item) байна.

Эрэмбэтэй жагсаалт: <ol>

ol = ordered list. Дараалал чухал зүйлсийн жагсаалт. Хөтчид дугаараар харагдана:

html

<ol>
  <li>Файл үүсгэх</li>
  <li>HTML бичих</li>
  <li>Хөтчид нээх</li>
  <li>Үр дүнгээ харах</li>
</ol>

Харагдах байдал:

Файл үүсгэх
HTML бичих
Хөтчид нээх
Үр дүнгээ харах

ol-ын attribute-ууд

html

<!-- 5-аас эхлэх -->
<ol start="5">
  <li>Тав дахь зүйл</li>
  <li>Зургаа дахь зүйл</li>
</ol>

<!-- Буурах дараалал -->
<ol reversed>
  <li>Алт медаль</li>
  <li>Мөнгөн медаль</li>
  <li>Хүрэл медаль</li>
</ol>

<!-- Том үсгийн дугаар -->
<ol type="A">
  <li>Хувилбар A</li>
  <li>Хувилбар B</li>
</ol>

Хаана аль жагсаалт ашиглах вэ?

| Нөхцөл | Аль жагсаалт | |--------|--------------| | Дараалал чухалгүй (материал, жагсаалт) | <ul> | | Дараалал чухал (алхам, зэрэглэл) | <ol> | | Навигацийн цэс | <ul> | | TOP 10 жагсаалт | <ol> | | Жор — орц | <ul> | | Жор — хийх арга | <ol> |

Nested жагсаалт

Жагсаалт дотор жагсаалт байж болно:

html

<ul>
  <li>
    Frontend
    <ul>
      <!-- Дотоод ul шинэ <li> дотор байна -->
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>Go</li>
    </ul>
  </li>
</ul>

<ul> эсвэл <ol> нь <li> дотор байна — <ul> шууд <ul>-ийн хүү биш.

Тодорхойлолтын жагсаалт: dl, dt, dd

Нэр томьёо болон тодорхойлолтыг хосоор харуулах жагсаалт:

html

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — вэб хуудасны бүтцийг тодорхойлдог хэл.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — вэб хуудасны харагдах байдлыг хянадаг хэл.</dd>

  <dt>JavaScript</dt>
  <dd>Вэб хуудасны харилцан үйлдлийг хангадаг програмчлалын хэл.</dd>
</dl>

<dl> — definition list (тодорхойлолтын жагсаалт)
<dt> — definition term (нэр томьёо)
<dd> — definition description (тодорхойлолт)

Нэг <dt>-д олон <dd> байж болно:

html

<dl>
  <dt>Монгол</dt>
  <dd>Монгол Улсын албан ёсны хэл</dd>
  <dd>Алтайн хэлний бүлэгт хамаарна</dd>
  <dd>2 сая гаруй хүн ярьдаг</dd>
</dl>

Навигацийн цэс — жишээ

Вэбийн навигацийн цэс ихэвчлэн <ul> ашиглан хийгддэг:

html

<nav>
  <ul>
    <li><a href="/">Нүүр</a></li>
    <li><a href="/courses">Сургалтууд</a></li>
    <li><a href="/projects">Төслүүд</a></li>
    <li><a href="/profile">Профайл</a></li>
  </ul>
</nav>

CSS нэмснээр цэгийг нуух, хэвтээ байрлуулах боломжтой. Гэхдээ HTML бүтцийн хувьд жагсаалт хэрэглэх нь семантик хувьд зөв.

Нийтлэг алдаа

html

<!-- БУРУУ — li-г ul/ol-гүйгээр ашиглах -->
<li>Зүйл</li>

<!-- БУРУУ — ul дотор li биш элемент -->
<ul>
  <p>Энэ буруу</p>
</ul>

<!-- БУРУУ — nested ul li-гүйгээр -->
<ul>
  <ul> <!-- ← Буруу! ul шууд ul дотор байж болохгүй -->
    <li>Зүйл</li>
  </ul>
</ul>

<!-- ЗӨВ — nested ul li дотор -->
<ul>
  <li>
    Гадна
    <ul>
      <li>Дотно</li>
    </ul>
  </li>
</ul>

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

<table> tag ашиглан хүснэгт үүсгэж сурна. thead, tbody, tfoot, tr, th, td элементүүд болон colspan, rowspan attribute хэрхэн ажилладаг талаар үзнэ.

← Өмнөх хичээлЗураг (img tag)Дараах хичээл →Хүснэгт (table)