HTML Semantik Elementlari
Semantik elementlar = ma'noga ega bo'lgan elementlar.
Semantik Elementlar Nima?
Semantik element o'z ma'nosini ham brauzerga, ham dasturchiga aniq ifodalaydi.
No-semantik elementlarga misollar: <div> va <span> — kontenti haqida hech qanday ma'lumot bermaydi.
Semantik elementlarga misollar: <img>, <table>, va <article> — kontenti aniq ko'rsatilgan.
HTMLda Semantik Elementlar
Ko'plab veb-saytlarda quyidagi HTML kodlar uchraydi: <div id="nav"> <div class="header"> <div id="footer"> navigatsiya, sarlavha va futerni belgilash uchun.
HTMLda veb-sahifaning turli qismlarini belgilash uchun bir nechta semantik elementlar mavjud:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
HTML <section> Elementi
<section> elementi hujjatda bo'limni belgilaydi.
W3C HTML hujjatiga ko'ra:
"Bo'lim — bu kontentning tematik guruhlanishi, odatda sarlavha bilan."
<section> elementidan foydalanish mumkin bo'lgan misollar:
- Boblar
- Kirish
- Yangiliklar
- Aloqa ma'lumotlari
Veb-sahifa odatda kirish, asosiy kontent va aloqa ma'lumotlari bo'limlariga bo'linadi.
Misol: Hujjatda ikki bo'lim
<section>
<h1>WWF</h1>
<p>WWF — tabiatni muhofaza qilish, tadqiqot va tiklash masalalari bilan shug'ullanuvchi xalqaro tashkilot. Avvalgi nomi World Wildlife Fund. WWF 1961-yilda tashkil etilgan.</p>
</section>
<section>
<h1>WWFning Panda ramzi</h1>
<p>Panda WWFning ramziga aylangan. Mashhur panda logosi Pekin hayvonot bog'idan London hayvonot bog'iga ko'chirilgan Chi Chi ismli pandadan kelib chiqqan.</p>
</section>HTML <article> Elementi
<article> elementi mustaqil, o'z-o'zini ta'minlaydigan kontentni belgilaydi.
Maqola o'z-o'zidan ma'noga ega bo'lishi kerak va uni veb-saytdan alohida tarqatish mumkin bo'lishi kerak.
<article> elementidan foydalanish mumkin bo'lgan misollar:
- Forum postlari
- Blog postlari
- Foydalanuvchi izohlari
- Mahsulot kartalari
- Gazeta maqolalari
Misol: Mustaqil, o'z-o'zini ta'minlaydigan uchta maqola
<article>
<h2>Google Chrome</h2>
<p>Google Chrome — Google tomonidan ishlab chiqilgan veb-brauzer, 2008-yilda chiqarilgan. Chrome bugungi kunda dunyodagi eng mashhur veb-brauzer!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox — Mozilla tomonidan ishlab chiqilgan ochiq kodli veb-brauzer. Firefox 2018-yil yanvaridan beri ikkinchi eng mashhur brauzer.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge — Microsoft tomonidan ishlab chiqilgan veb-brauzer, 2015-yilda chiqarilgan. Microsoft Edge Internet Explorer o'rnini egallagan.</p>
</article>Misol 2: <article> elementini CSS yordamida bezash
<html>
<head>
<style>
.barcha-brauzerlar {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.barcha-brauzerlar > h1, .brauzer {
margin: 10px;
padding: 5px;
}
.brauzer {
background: white;
}
.brauzer > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="barcha-brauzerlar">
<h1>Eng mashhur brauzerlar</h1>
<article class="brauzer">
<h2>Google Chrome</h2>
<p>Google Chrome — Google tomonidan ishlab chiqilgan veb-brauzer, 2008-yilda chiqarilgan. Chrome bugungi kunda dunyodagi eng mashhur veb-brauzer!</p>
</article>
<article class="brauzer">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox — Mozilla tomonidan ishlab chiqilgan ochiq kodli veb-brauzer. Firefox 2018-yil yanvaridan beri ikkinchi eng mashhur brauzer.</p>
</article>
<article class="brauzer">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge — Microsoft tomonidan ishlab chiqilgan veb-brauzer, 2015-yilda chiqarilgan. Microsoft Edge Internet Explorer o'rnini egallagan.</p>
</article>
</article>
</body>
</html><article>ni <section>ga joylash yoki aksincha?
<article> elementi mustaqil, o'z-o'zini ta'minlaydigan kontentni belgilaydi.
<section> elementi hujjatda bo'limni belgilaydi.
Bu ta'riflar asosida elementlarni qanday joylashni aniqlash mumkinmi? Yo'q, aniqlab bo'lmaydi!
Shuning uchun HTML sahifalarda <section> ichida <article> yoki <article> ichida <section> elementlarini uchratish mumkin.
HTML <header> Elementi
<header> elementi kirish kontenti yoki navigatsion havolalar to'plamini ifodalaydi.
<header> odatda quyidagilarni o'z ichiga oladi:
- bir yoki bir nechta sarlavha elementlari (
<h1>-<h6>) - logotip yoki ikonka
- mualliflik ma'lumotlari
Eslatma: Bir HTML hujjatda bir nechta <header> elementlari bo'lishi mumkin. Biroq, <header>ni <footer>, <address> yoki boshqa <header> ichida joylashtirib bo'lmaydi.
Misol: <article> uchun header
<article>
<header>
<h1>WWF nima qiladi?</h1>
<p>WWFning vazifasi:</p>
</header>
<p>WWFning vazifasi — sayyoramizning tabiiy muhitini yemirilishini to'xtatish va insonlar tabiat bilan uyg'unlikda yashaydigan kelajakni qurish.</p>
</article>HTML <footer> Elementi
<footer> elementi hujjat yoki bo'lim uchun futerni belgilaydi.
<footer> odatda quyidagilarni o'z ichiga oladi:
- mualliflik ma'lumotlari
- mualliflik huquqi
- aloqa ma'lumotlari
- sayt xaritasi
- yuqoriga qaytish havolalari
- tegishli hujjatlar
Bir hujjatda bir nechta <footer> elementlari bo'lishi mumkin.
Misol: Hujjatda footer bo'limi
<footer>
<p>Muallif: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>HTML <nav> Elementi
<nav> elementi navigatsion havolalar to'plamini belgilaydi.
TIP
Diqqat: Hujjatdagi barcha havolalar <nav> ichida bo'lishi shart emas. <nav> faqat asosiy navigatsion bloklar uchun mo'ljallangan.
Brauzerlar, masalan, imkoniyati cheklangan foydalanuvchilar uchun ekran o'quvchilari, ushbu elementdan kontentni dastlabki ko'rsatishni o'tkazib yuborish uchun foydalanishi mumkin.
Misol: Navigatsion havolalar to'plami
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>HTML <aside> Elementi
<aside> elementi joylashgan kontentdan alohida kontentni belgilaydi (masalan, yon panel).
<aside> kontenti atrofdagi kontentga bilvosita bog'liq bo'lishi kerak.
Misol: Joylashgan kontentdan alohida kontent ko'rsatish
<p>Oilam bilan bu yozda Epcot markaziga bordik. Ob-havo yaxshi edi, Epcot ajoyib edi! Oilam bilan ajoyib yoz o'tkazdim!</p>
<aside>
<h4>Epcot markazi</h4>
<p>Epcot — Walt Disney World Resortdagi tematik park bo'lib, unda qiziqarli attraksionlar, xalqaro pavilyonlar, mukofotli mushaklar va mavsumiy maxsus tadbirlar mavjud.</p>
</aside>Misol 2: <aside> elementini CSS yordamida bezash
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>Oilam bilan bu yozda Epcot markaziga bordik. Ob-havo yaxshi edi, Epcot ajoyib edi! Oilam bilan ajoyib yoz o'tkazdim!</p>
<aside>
<p>Epcot markazi — Walt Disney World Resortdagi tematik park bo'lib, unda qiziqarli attraksionlar, xalqaro pavilyonlar, mukofotli mushaklar va mavsumiy maxsus tadbirlar mavjud.</p>
</aside>
<p>Oilam bilan bu yozda Epcot markaziga bordik. Ob-havo yaxshi edi, Epcot ajoyib edi! Oilam bilan ajoyib yoz o'tkazdim!</p>
<p>Oilam bilan bu yozda Epcot markaziga bordik. Ob-havo yaxshi edi, Epcot ajoyib edi! Oilam bilan ajoyib yoz o'tkazdim!</p>
</body>
</html>HTML <figure> va <figcaption> Elementlari
<figure> tegi o'z-o'zini ta'minlaydigan kontentni belgilaydi, masalan, illyustratsiyalar, diagrammalar, fotosuratlar, kod ro'yxatlari va boshqalar.
<figcaption> tegi <figure> elementi uchun sarlavha belgilaydi. <figcaption> elementini <figure> ichida birinchi yoki oxirgi bolakay sifatida joylashtirish mumkin.
<img> elementi esa haqiqiy rasm/illyustratsiyani belgilaydi.
Misol
<figure>
<img src="/pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italiya.</figcaption>
</figure>Nima uchun Semantik Elementlar?
W3Cga ko'ra:
"Semantik Veb — ma'lumotlarni ilovalar, korxonalar va hamjamiyatlar o'rtasida almashish va qayta ishlatish imkonini beradi."
HTMLda Semantik Elementlar
Quyida HTMLdagi ba'zi semantik elementlar ro'yxati keltirilgan.
| Teg | Tavsifi |
|---|---|
<article> | Mustaqil, o'z-o'zini ta'minlaydigan kontentni belgilaydi |
<aside> | Sahifa kontentidan alohida kontentni belgilaydi |
<details> | Foydalanuvchi ko'rishi yoki yashirishi mumkin bo'lgan qo'shimcha tafsilotlarni belgilaydi |
<figcaption> | <figure> elementi uchun sarlavha belgilaydi |
<figure> | O'z-o'zini ta'minlaydigan kontentni belgilaydi, masalan, illyustratsiyalar, diagrammalar, fotosuratlar, kod ro'yxatlari va boshqalar |
<footer> | Hujjat yoki bo'lim uchun futerni belgilaydi |
<header> | Hujjat yoki bo'lim uchun sarlavha belgilaydi |
<main> | Hujjatning asosiy kontentini belgilaydi |
<mark> | Belgilangan/yoritilgan matnni belgilaydi |
<nav> | Navigatsion havolalarni belgilaydi |
<section> | Hujjatda bo'limni belgilaydi |
<summary> | <details> elementi uchun ko'rinadigan sarlavha belgilaydi |
<time> | Sana/vaqtni belgilaydi |
INFO
HTMLda mavjud barcha teglar ro'yxati uchun HTML Teglar Ma'lumotnomasi sahifasiga tashrif buyuring.