HTML semantika

Semantik elementlar = ma’noga ega elementlar.

Semantik elementlar nima?

Semantik element o‘z ma’nosini brauzerga ham, dasturchiga ham aniq tushuntirib beradi.

Non-semantik elementlar misollari: <div> va <span> - O‘z kontenti haqida hech narsa aytmaydi.

Semantik elementlar misollari: <img>, <table> va <article> - Kontentni aniq belgilaydi.

HTML’dagi semantik elementlar

Ko‘p veb-saytlarda navigatsiya, header va footer’ni ko‘rsatish uchun quyidagicha HTML kod mavjud: <div id="nav"> <div class="header"> <div id="footer">

HTML’da veb-sahifaning turli qismlarini belgilash uchun ishlatiladigan bir nechta semantik elementlar mavjud:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

HTML <section> elementi

<section> elementi hujjatdagi bo‘limni belgilaydi.

W3C ning HTML hujjatiga ko‘ra: "Section — kontentning mavzuli guruhlari, odatda sarlavha bilan birga keladi."

<section> elementi ishlatilishi mumkin bo‘lgan joylar misollari:

Boblar
Kirish
Yangiliklar
Aloqa ma’lumotlari

Veb-sahifa odatda kirish, kontent va aloqa ma’lumotlari uchun bo‘lumlarga bo‘linishi mumkin.

Misol

Hujjatdagi ikkita bo‘lim:

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

O‘zingiz sinab ko‘ring »

HTML <article> elementi

<article> elementi mustaqil, o‘z-o‘zidan to‘liq bo‘lgan kontentni belgilaydi.

Maqola o‘z-o‘zidan mazmunli bo‘lishi va saytning qolgan qismidan mustaqil tarqatilishi mumkin bo‘lishi kerak.

<article> elementi quyidagi joylarda ishlatilishi mumkin:

Forum postlari
Blog postlari
Foydalanuvchi izohlari
Mahsulot kartalari
Gazeta maqolalari

Misol

Mazmuni mustaqil va o‘z-o‘zidan tushunarli bo‘lgan uchta maqola:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

O‘zingiz sinab ko‘ring »

Misol 2

<article> elementiga uslub berish uchun CSS dan foydalaning:

<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}

.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}

.browser {
background: white;
}

.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>

</body>
</html>

O‘zingiz sinab ko‘ring »

<article>ni <section> ichiga yoki aksincha joylashtirish?

<article> elementi mustaqil, o‘z-o‘zidan to‘liq bo‘lgan kontentni belgilaydi.

<section> elementi hujjatdagi bo‘limni belgilaydi.

Bu ta’riflardan elementlarni ichma-ich joylashtirish tartibini aniqlashda foydalansam bo‘ladimi? Yo‘q, bo‘lmaydi!

Shuning uchun <section> elementlari ichida <article> elementlari, va <article> elementlari ichida <section> elementlari bo‘lgan HTML sahifalarni uchratasiz.

HTML <header> elementi

<header> elementi kirish matni yoki navigatsiya havolalari to‘plami uchun konteynerni anglatadi.

<header> elementida odatda quyidagilar bo‘ladi:

bitta yoki bir nechta sarlavha elementi (<h1> — <h6>)
logotip yoki ikonka
mualliflik ma’lumotlari

Eslatma: bitta HTML hujjatida bir nechta <header> elementi bo‘lishi mumkin. Ammo <header> ni <footer>, <address> yoki boshqa <header> elementi ichiga joylashtirib bo‘lmaydi.

Misol

<article> uchun sarlavha qismi:

<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>

O‘zingiz sinab ko‘ring »

HTML <footer> elementi

<footer> elementi hujjat yoki bo‘limning pastki qismini belgilaydi.

<footer> elementida odatda quyidagilar bo‘ladi:

mualliflik ma’lumotlari
mualliflik huquqi ma’lumotlari
Aloqa ma’lumotlari
sayt xaritasi
yuqoriga qaytish havolalari
tegishli hujjatlar

Bitta hujjatda bir nechta <footer> elementi bo‘lishi mumkin.

Misol

Hujjatdagi footer bo‘limi:

<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

O‘zingiz sinab ko‘ring »

HTML <nav> elementi

<nav> elementi navigatsiya havolalari to‘plamini belgilaydi.

Hujjatdagi barcha havolalar <nav> elementi ichida bo‘lishi shart emas. <nav> elementi faqat asosiy navigatsiya havolalari bloklari uchun mo‘ljallangan.

Nogiron foydalanuvchilar uchun mo‘ljallangan skrinriderlar kabi brauzerlar shu elementdan ushbu kontentni boshida render qilmaslik kerakmi yoki yo‘qligini aniqlashda foydalanadi.

Misol

Navigatsiya havolalari to‘plami:

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

O‘zingiz sinab ko‘ring »

HTML <aside> elementi

<aside> elementi o‘zi joylashgan kontentdan tashqari qo‘shimcha kontentni belgilaydi (masalan, yon panel).

<aside> kontenti atrofdagi kontentga bilvosita bog‘liq bo‘lishi kerak.

Misol

Asosiy kontent yonida unga qo‘shimcha kontentni ko‘rsating:

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

O‘zingiz sinab ko‘ring »

Misol 2

<aside> elementiga uslub berish uchun CSS dan foydalaning:

<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>

O‘zingiz sinab ko‘ring »

HTML <figure> va <figcaption> elementlari

<figure> tegi o‘z-o‘zidan to‘liq kontentni belgilaydi, masalan: illyustratsiyalar, diagrammalar, fotosuratlar, kod ro‘yxatlari va h.k.

<figcaption> tegi <figure> elementi uchun izoh (sarlavha) belgilaydi. <figcaption> elementini <figure> elementining birinchi yoki oxirgi farzandi sifatida joylashtirish mumkin.

<img> elementi asl rasmni/illyustratsiyani belgilaydi.

Misol

<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

O‘zingiz sinab ko‘ring »

Nega semantik elementlar?

W3C ga ko‘ra: "Semantik Web ma’lumotlarning ilovalar, korxonalar va jamoalar o‘rtasida baham ko‘rilishi va qayta ishlatilishiga imkon beradi."

HTML’dagi semantik elementlar

Quyida HTML dagi ba’zi semantik elementlar ro‘yxati keltirilgan.

Tag	Tavsif
<article>	Mustaqil, o‘z-o‘zidan tugallangan kontentni belgilaydi
<aside>	Sahifa mazmunidan tashqari tarkibni belgilaydi
<details>	Foydalanuvchi ko‘rishi yoki yashirishi mumkin bo‘lgan qo‘shimcha tafsilotlarni belgilaydi
<figcaption>	<figure> elementi uchun sarlavha (caption) belgilaydi
<figure>	Rasmlar, diagrammalar, fotosuratlar, kod listinglari va h.k. kabi o‘z-o‘zidan tugallangan kontentni belgilaydi
<footer>	Hujjat yoki bo‘lim uchun pastki ko‘rsatkichni belgilaydi
<header>	Hujjat yoki bo‘lim uchun sarlavhani belgilaydi
<main>	Hujjatning asosiy mazmunini belgilaydi
<mark>	Belgilangan/ajratib ko‘rsatilgan matnni belgilaydi
<nav>	Navigatsiya havolalarini belgilaydi
<section>	Hujjatdagi bo‘limni belgilaydi
<summary>	<details> elementi uchun ko‘rinadigan sarlavhani belgilaydi
<time>	Sana/vaqtni belgilaydi

Barcha mavjud HTML teglarining to‘liq ro‘yxati uchun HTML teglar ma’lumotnomamizga murojaat qiling.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish