Chapter 3 — Linklar va Navigatsiya

Linklar (<a>) — vebni "veb" qiladigan asosiy element: sahifalar orasidagi bog'lanish.

---

3.1 Asosiy Linklar

Example

index.html
HTMLNusxalash
01<a href="https://example.com">Tashqi sayt</a>
02<a href="/about">Ichki sahifa</a>
03<a href="#section2">Sahifa ichidagi bo'limga</a>
04<a href="mailto:info@example.com">Email yuborish</a>
05<a href="tel:+998901234567">Qo'ng'iroq qilish</a>

3.2 target va rel Atributlari

Example

index.html
HTMLNusxalash
01<a href="https://example.com" target="_blank" rel="noopener noreferrer">
02  Yangi oynada ochish
03</a>

⚠️ Common Mistake
target="_blank" ishlatib, rel="noopener"ni unutish — bu xavfsizlik zaifligiga (yangi ochilgan sahifa window.opener orqali asl sahifaga ta'sir qilishi mumkin) yo'l qo'yadi.

3.3 Semantik Navigatsiya: <nav>

Example

index.html
HTMLNusxalash
01<nav aria-label="Asosiy navigatsiya">
02  <ul>
03    <li><a href="/">Bosh sahifa</a></li>
04    <li><a href="/about">Biz haqimizda</a></li>
05  </ul>
06</nav>

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Bosh sahifa, Xizmatlar, Aloqa sahifalariga havola beruvchi oddiy navigatsiya menyusini yarating.

🟡 Exercise 2 — Medium

Task: Tashqi saytga xavfsiz (noopener/noreferrer bilan) yangi tabda ochiluvchi link yarating.

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<a href="https://external-site.com" target="_blank">Tashqi sayt</a>

Your Task: Bu link nega xavfsizlik nuqtai nazaridan to'liq to'g'ri emas?

<details> <summary>Solution</summary> `rel="noopener noreferrer"` yetishmayapti. Bu bo'lmasa, yangi ochilgan sahifa `window.opener` orqali asl sahifaning URL'ini o'zgartira olishi mumkin (tabnabbing hujumi). Yechim: ```html <a href="https://external-site.com" target="_blank" rel="noopener noreferrer">Tashqi sayt</a> ``` </details>

📌 Chapter Summary

<a href> — sahifalar, sahifa ichidagi bo'limlar, email va telefon uchun havolalar yaratadi. target="_blank" bilan har doim rel="noopener noreferrer" ishlatilishi kerak. <nav> — asosiy navigatsiya bloklarini semantik belgilaydi.

🎯 Key Takeaways

• #id — sahifa ichidagi anchor linklar uchun
• target="_blank" + rel="noopener noreferrer" — xavfsiz yangi tab
• <nav> — navigatsiya uchun semantik konteyner

⚡ Quick Cheat Sheet

index.html
HTMLNusxalash
01<a href="/page">Link</a>
02<a href="#section">Anchor</a>
03<a href="https://x.com" target="_blank" rel="noopener noreferrer">Tashqi</a>
04<nav aria-label="Main">...</nav>

---