HTML / Холбоос (a tag)

Холбоос (a tag)

Вэбийн хамгийн гол шинж чанар бол хуудас хоорондын холбоос — hyperlink. <a> tag нь энэ холбоосыг үүсгэдэг.

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

html
<a href="https://www.ulaanbaatar.app">ulaanbaatar.app руу очих</a>
  • <a> — anchor tag
  • href — холбоосын хаяг (hypertext reference)
  • Tag хоорондох текст хөтчид харагдах, дарж болох холбоос болно

Absolute болон relative URL

Absolute URL — бүтэн хаяг, протоколоос эхэлнэ:

html
<!-- Гадаад сайт руу холбоос -->
<a href="https://www.google.com">Google</a>
<a href="https://github.com">GitHub</a>

Relative URL — одоогийн сайтын дотор, эхний / эсвэл . -ээс эхэлнэ:

html
<!-- Мөн сайтын дотор хуудас руу -->
<a href="/about">Бидний тухай</a>
<a href="/courses/html">HTML курс</a>

<!-- Мөн фолдерийн файл руу -->
<a href="contact.html">Холбоо барих</a>

<!-- Дээшхи фолдер руу -->
<a href="../index.html">Нүүр хуудас</a>

Дотоод холбоосонд relative URL ашигласан нь дээр — домэйн өөрчлөгдсөн ч холбоос ажилласаар байна.

target attribute — шинэ tab нээх

html
<!-- Мөн tab-д нээнэ (default) -->
<a href="/courses">Сургалтууд</a>

<!-- Шинэ tab-д нээнэ -->
<a href="https://mdn.dev" target="_blank">MDN Docs</a>

target="_blank" ашиглахдаа аюулгүй байдлын тулд rel="noopener" нэмэх нь зөв дадал:

html
<a href="https://mdn.dev" target="_blank" rel="noopener">MDN Docs</a>

Урт хуудасны тодорхой хэсэгт шууд үсрэхэд ашиглана:

html
<!-- Навигацийн холбоос -->
<nav>
  <a href="#introduction">Танилцуулга</a>
  <a href="#features">Онцлог</a>
  <a href="#contact">Холбоо барих</a>
</nav>

<!-- Тухайн хэсэг — id давхцахгүй байх -->
<section id="introduction">
  <h2>Танилцуулга</h2>
  <p>...</p>
</section>

<section id="features">
  <h2>Онцлог</h2>
  <p>...</p>
</section>

<section id="contact">
  <h2>Холбоо барих</h2>
  <p>...</p>
</section>

href="#features" дарахад хуудас id="features" элемент рүү гүйлгэн очно.

mailto: болон tel:

html
<!-- И-мэйл клиент нээнэ -->
<a href="mailto:info@ulaanbaatar.app">И-мэйл илгээх</a>

<!-- Гар утсанд залгах -->
<a href="tel:+97699112233">+976 9911-2233</a>

<!-- Сэдэв болон мессежтэй mailto -->
<a href="mailto:info@ulaanbaatar.app?subject=Асуулт&body=Сайн байна уу">
  Асуулт илгээх
</a>

mailto: болон tel: нь хөтчийн тохиргоотой програмыг (и-мэйл клиент, утасны апп) нээнэ.

Зураг холбоос болгох

<a> дотор дурын элемент байж болно — зураг ч мөн:

html
<!-- Зургийг дарахад холбоос ажиллана -->
<a href="/courses/html">
  <img src="html-cover.png" alt="HTML курс" />
</a>

Практик жишээ

html
<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <title>Холбоосын жишээ</title>
  </head>
  <body>
    <h1>Холбоосын жишээ</h1>

    <!-- Дотоод холбоос -->
    <p>
      <a href="/courses">Бүх сургалтыг харах</a>
    </p>

    <!-- Гадаад холбоос — шинэ tab -->
    <p>
      <a href="https://developer.mozilla.org" target="_blank" rel="noopener">
        MDN дээр HTML-ийн бүрэн баримт бичиг үзэх
      </a>
    </p>

    <!-- Anchor link -->
    <p><a href="#more">Доош үсрэх ↓</a></p>

    <!-- Холбоо барих -->
    <p>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </p>

    <div id="more">
      <h2>Энд иртлээ гүйлгэсэн байна</h2>
      <p>Anchor link зөв ажиллалаа!</p>
    </div>
  </body>
</html>

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

html
<!-- БУРУУ — href байхгүй -->
<a>Холбоос</a>

<!-- БУРУУ — # утгагүй placeholder -->
<a href="#">Холбоос</a>

<!-- ЗӨВ — бодит хаягтай -->
<a href="/about">Бидний тухай</a>

href="#" нь хуудсыг дээш гүйлгэдэг учир JavaScript товч хийхдээ <button> ашиглах нь зөв.

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

<img> tag ашиглан хуудсанд зураг нэмнэ. src, alt, width, height attribute-ууд болон loading="lazy" тохируулах талаар үзнэ.

← Өмнөх хичээлГарчиг ба параграфДараах хичээл →Зураг (img tag)