HTML / Зураг (img tag)

Зураг (img tag)

Зураг нь вэб хуудасны чухал бүрдэл хэсэг. <img> tag ашиглан хуудсанд зураг оруулна.

Үндсэн синтакс

html

<img src="зураг.jpg" alt="Зургийн тайлбар" />

<img> нь self-closing tag — хаалтын хос байхгүй. Хоёр чухал attribute:

src — зургийн эх үүсвэр (source), файлын зам эсвэл URL
alt — зургийн текст тайлбар (alternative text)

src — зургийн зам

html

<!-- Мөн фолдерийн зураг -->
<img src="profile.jpg" alt="Профайл зураг" />

<!-- images фолдер доторх зураг -->
<img src="images/banner.png" alt="Баннер" />

<!-- Гадаад URL -->
<img src="https://example.com/photo.jpg" alt="Гадаад зураг" />

alt — заавал бичих!

alt attribute нь зургийн текст тайлбар. Яагаад чухал вэ?

Accessibility: Screen reader ашиглагчид (харааны бэрхшээлтэй хүмүүс) зургийг харж чадахгүй — alt текстийг уншиж өгнө.

SEO: Google зургийг "харж" чадахгүй, alt текстийг уншиж агуулгыг ойлгодог. Зөв alt текст хайлтад тусална.

Алдаа гарахад: Зураг ачаалагдахгүй бол alt текст харагдана.

html

<!-- МУУГИЙН МУУ — alt байхгүй -->
<img src="dog.jpg" />

<!-- МУУГИЙН МУУ — утгагүй alt -->
<img src="dog.jpg" alt="зураг" />

<!-- МУУГИЙН МУУ — файлын нэр тавих -->
<img src="dog.jpg" alt="dog.jpg" />

<!-- ЗӨВ — тайлбарлах alt -->
<img src="dog.jpg" alt="Хүрэн өнгийн нохой цагаан цасан дунд тоглож байна" />

<!-- Чимэглэлийн зураг бол alt хоосон үлдээнэ -->
<img src="divider.png" alt="" />

width ба height

html

<!-- Пиксэлээр хэмжээ заах -->
<img src="photo.jpg" alt="Гэрэл зураг" width="800" height="600" />

width ба height attribute заавал биш боловч заасан нь page layout shift болохоос сэргийлнэ — хуудас ачаалах үед зургийн зай урьдчилан тусгаарлагдана, агуулга эргэлдэхгүй. Core Web Vitals (Google-ийн гүйцэтгэлийн хэмжилт)-д нөлөөтэй.

Хэмжээг CSS-ээр хянах бол attribute-даа оригинал ratio-г хадгалах хэрэгтэй.

loading="lazy"

html

<!-- Хэрэглэгч доош гүйлгэхэд л ачаалагдана -->
<img src="big-photo.jpg" alt="Том зураг" loading="lazy" />

<!-- Дэлгэцэнд шууд харагдах зураг — lazy хэрэглэхгүй -->
<img src="hero.jpg" alt="Hero banner" />

loading="lazy" нь хуудасны анхны ачааллыг хурдасгадаг. Fold-оос доогуур (скролл хийж харах) зурагт заавал хэрэглэнэ. Хамгийн дээрх (hero) зурагт хэрэглэхгүй.

figure ба figcaption

Зураг болон түүний тайлбарыг хамт бүлэглэхэд:

html

<figure>
  <img
    src="ulaanbaatar.jpg"
    alt="Улаанбаатар хотын агаараас харсан панорама"
    width="1200"
    height="600"
    loading="lazy"
  />
  <figcaption>
    Улаанбаатар — Монголын нийслэл хот. 2024 он.
  </figcaption>
</figure>

<figure> нь агуулгын бие даасан блок (зураг, диаграм, код жишээ гэх мэт). <figcaption> нь зургийн харагдах тайлбар тэмдэглэгээ. <figure> дотор <figcaption> нэг л байна — эхэнд эсвэл төгсгөлд байж болно.

Дэмжигддэг форматууд

| Формат | Хэрэглэх тохиолдол | |--------|-------------------| | .jpg / .jpeg | Гэрэл зураг, нарийн өнгөтэй зураг | | .png | Ил тод дэвсгэртэй зураг, screenshot | | .webp | Орчин үеийн, хамгийн хурдан формат | | .svg | Icon, лого — хэмжээгээр сунгана | | .gif | Хөдөлгөөнт зураг |

html

<!-- WebP формат — дэмжихгүй хөтчид fallback -->
<picture>
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="Гэрэл зураг" />
</picture>

Бүрэн жишээ

html

<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <title>Зургийн жишээ</title>
  </head>
  <body>
    <h1>Монголын байгаль</h1>

    <!-- Hero зураг — lazy ашиглахгүй -->
    <img
      src="mongolia-hero.jpg"
      alt="Монголын өргөн тал нутаг, цэнхэр тэнгэр"
      width="1200"
      height="500"
    />

    <h2>Говь цөл</h2>

    <!-- Тайлбартай зураг -->
    <figure>
      <img
        src="gobi.jpg"
        alt="Говийн элсэн манхан нарны жаргалд улаан туссан байдал"
        width="800"
        height="450"
        loading="lazy"
      />
      <figcaption>Говь цөл — Монгол, Хятадын хилд орших дэлхийн хамгийн том цөлүүдийн нэг.</figcaption>
    </figure>

    <!-- Чимэглэлийн зураг — alt хоосон -->
    <img src="divider.svg" alt="" />
  </body>
</html>

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

<ul>, <ol>, <li> tag ашиглан жагсаалт үүсгэж сурна. Эрэмбэтэй, эрэмбэгүй жагсаалтын ялгаа болон nested жагсаалт хэрхэн бичих талаар үзнэ.

← Өмнөх хичээлХолбоос (a tag)Дараах хичээл →Жагсаалт (ul, ol, li)