Semantika

Semantik elementlar = ma'noga ega elementlar.

Semantik elementlar nima ?

Semantik element brauzer va dasturchi uchun element mazmunini aniq tasvirlab beradi.

Semantik bo'lmagan elementlarga misollar : <div> va <span>- Bular nimalarni o'z ichiga olishi haqida avvaldan hech narsa deb bo'lmaydi.

Semantik elementlarga misollar : <form>, <table>, va <article>- Bular nimalarni o'z ichiga olishi, element nomidan bilinib turadi.

HTMLdagi semantik elementlar

Ko'pgina saytlarda navigatsiya, sarlavha va footerni ifodalash uchun quyidagi kabi HTML kodlar mavjud: <div id="nav"> <div class="header"> <div id="footer">.

HTMLda veb-sahifaning turli qismlarini ifodalash uchun ishlatilishi mumkin bo'lgan ba'zi semantik elementlar mavjud:

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

<section> elementi

<section> elementi html fayldagi ma'lum bir bo'limni ifodalaydi.

W3C ning HTML qo'llanmasiga ko'ra: "Section odatda sarlavhali kontentning tematik guruhlanishidir."

<section> elementini qayerlarda ishlatish mumkinligiga misollar:

Bo'limlar
Tanishtiruv qismlar
Yangiliklarda
Kontakt ma'lumotlarda

Veb-sahifa odatda tanishtiruv, kontent va kontakt ma'lumotlari uchun bo'limlarga bo'linishi mumkin.

HTMLdagi 2ta bo'limni ajratish:

<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>

<article> elementi

<article> elementi mustaqil kontentni ifodalaydi.

Article o'zining ma'zmuniga ega bo'lishi kerak va uni veb-saytning qolgan qismidan mustaqil tarzda ajratish imkoniyati bo'lishi kerak.

<article> elementini qayerda ishlatish mumkinligiga misollar:

Forum xabarlarida
Blog postlarda
Foydalanuvchining izohlarida
Mahsulot uchun kartochkalarda
Gazeta maqolalarida

Mustaqil kontentga ega 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>

Ikkinchi misol

<article> elementiga stil berish uchun CSSdan 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>

<article> elementini <section> ichiga joylashtirasizmi yoki aksinchami ?

Ushbu elementlarni qanday joylashtirish kerakligiga qaror qabul qilish uchun biror bir ta'rifdan foydalana olamizmi ? Albatta yo'q.

Shunday ekan, siz <section> elementlarni o'z ichiga olgan <article> elementlarini va <article> elementlarni o'z ichiga olgan <section> elementlariga ega HTML sahifalarni topishingiz mumkin.

<header> elementi

<header> elementi tanishtiruv ma'lumotlari yoki navigatsiya havolalari uchun konteyner hisoblanadi.

<header> elementi odatda quyidagilarni o'z ichiga oladi:

bir yoki bir nechta sarlavha elementlari (<h1> - <h6>)
logotip yoki ikonka
mualliflik ma'lumotlari

Eslatma: Bitta HTMLda bir nechta <header> elementlari bo'lishi mumkin. Lekin <header> elementi <footer>, <address> yoki boshqa <header> elementi ichiga joylashtirilmaydi.

<article> uchun header

<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>

<footer> elementi

<footer> elementi sahifa yoki bo'lim uchun uning pastki qismini ifodalaydi.

<footer> elementi odatda quyidagilarni o'z ichiga oladi:

mualliflik ma'lumotlari
mualliflik huquqi haqida ma'lumot
kontakt ma'lumotlari
sayt xaritasi
yuqoriga qaytish havolasi
tegishli ma'lumotlar

Bir sahifada bir nechta <footer> elementlaridan foydalanishingiz mumkin.

Sahifaning footer bo

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

<nav> elementi

<nav> elementi navigatsiya havolalarini ifodalaydi.

Eslab qoling, sahifadagi barcha havolalar<nav>elementining ichida bo'lishi kerak emas. <nav> elementi faqat navigatsiya havolalarining asosiy bloklari uchun mo'ljallangan.

Brauzerlar nogiron foydalanuvchilar uchun ekranni o'qish vositasi sifatida ushbu bo'limni o'tkazib yubormaslik kerakligini aniqlash uchun ushbu tegdan foydalanishi mumkin.

Navigatsiya havolalari

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

<aside> elementi

<aside> elementi o'zi joylashtirilgan kontentdan tashqari ba'zi tarkibiy qismni ifodalaydi (masalan, yon panelni).

<aside> kontenti, boshqa bo'lim kontentlari bilan bilvosita bog'liq bo'lishi kerak.

<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>

<aside> elementiga stil berish uchun CSSdan foydalanish:

<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>

<figure> va <figcaption> elementlari

<figure> tegi rasmlar, diagrammalar, fotosuratlar, kodlar ro'yxati va shu kabi boshqa mustaqil kontentlarni ifodalaydi.

<figcaption> tegi <figure> elementi uchun sarlavha nomini bildiradi. <figcaption> elementi <figure> elementining birinchi yoki oxirgi bolasi sifatida joylashtirilishi mumkin.

<img> elementi haqiqiy rasm/illyustratsiyani ifodalaydi.

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

Nega aynan Semantik elementlar ?

W3C ga ko'ra: "Semantika Internetdagi ma'lumotlarni, dasturlar, korxonalar va kommunitylar aro almashish va qayta foydalanish imkonini beradi."

HTMLdagi semantik elementlar

Quyidagi ro'yhatda HTMLning ba'zi semantik elementlari keltirilgan:

Teg nomi

Tarifi

Mustaqil kontentni ifodalaydi

O'zi joylashtirilgan kontentdan tashqari ba'zi tarkibiy qismni ifodalaydi

Foydalanuvchi ko'rishi yoki yashirishi mumkin bo'lgan qo'shimcha ma'lumotlarni ifodalaydi

<figure> elementi uchun sarlavhani ifodalaydi

Illyustratsiyalar, diagrammalar, fotosuratlar, kodlar ro'yxati va shu kabi boshqa mustaqil kontentlarni ifodalaydi.

Sahifa yoki bo'lim uchun footerni ifodalaydi

Sahifa yoki bo'lim uchun Headerni ifodalaydi

Sahifaning asosiy qismini ifodalaydi

Belgilangan va ajratib ko'rsatilgan matn yaratadi

Navigatsiya havolalarini ifodalaydi

Sahifadagi ma'lum bir bo'limni ifodalaydi

<details> elementi uchun ko'rinadigan sarlavhani ifodalayd

Sana/vaqtni ifodalaydi

PreviousKlasslar NextCSS qo'llanma

Last updated 1 year ago

Semantika

Semantik elementlar = ma'noga ega elementlar.

Semantik elementlar nima ?

Semantik element brauzer va dasturchi uchun element mazmunini aniq tasvirlab beradi.

Semantik bo'lmagan elementlarga misollar : <div> va <span>- Bular nimalarni o'z ichiga olishi haqida avvaldan hech narsa deb bo'lmaydi.

Semantik elementlarga misollar : <form>, <table>, va <article>- Bular nimalarni o'z ichiga olishi, element nomidan bilinib turadi.

HTMLdagi semantik elementlar

Ko'pgina saytlarda navigatsiya, sarlavha va footerni ifodalash uchun quyidagi kabi HTML kodlar mavjud: <div id="nav"> <div class="header"> <div id="footer">.

HTMLda veb-sahifaning turli qismlarini ifodalash uchun ishlatilishi mumkin bo'lgan ba'zi semantik elementlar mavjud:

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

<section> elementi

<section> elementi html fayldagi ma'lum bir bo'limni ifodalaydi.

W3C ning HTML qo'llanmasiga ko'ra: "Section odatda sarlavhali kontentning tematik guruhlanishidir."

<section> elementini qayerlarda ishlatish mumkinligiga misollar:

Bo'limlar
Tanishtiruv qismlar
Yangiliklarda
Kontakt ma'lumotlarda

Veb-sahifa odatda tanishtiruv, kontent va kontakt ma'lumotlari uchun bo'limlarga bo'linishi mumkin.

HTMLdagi 2ta bo'limni ajratish:

<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>

W3Schools online HTML editor

<article> elementi

<article> elementi mustaqil kontentni ifodalaydi.

Article o'zining ma'zmuniga ega bo'lishi kerak va uni veb-saytning qolgan qismidan mustaqil tarzda ajratish imkoniyati bo'lishi kerak.

<article> elementini qayerda ishlatish mumkinligiga misollar:

Forum xabarlarida
Blog postlarda
Foydalanuvchining izohlarida
Mahsulot uchun kartochkalarda
Gazeta maqolalarida

Mustaqil kontentga ega 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>

W3Schools online HTML editor

Ikkinchi misol

<article> elementiga stil berish uchun CSSdan 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>

W3Schools online HTML editor

<article> elementini <section> ichiga joylashtirasizmi yoki aksinchami ?

Ushbu elementlarni qanday joylashtirish kerakligiga qaror qabul qilish uchun biror bir ta'rifdan foydalana olamizmi ? Albatta yo'q.

Shunday ekan, siz <section> elementlarni o'z ichiga olgan <article> elementlarini va <article> elementlarni o'z ichiga olgan <section> elementlariga ega HTML sahifalarni topishingiz mumkin.

<header> elementi

<header> elementi tanishtiruv ma'lumotlari yoki navigatsiya havolalari uchun konteyner hisoblanadi.

<header> elementi odatda quyidagilarni o'z ichiga oladi:

bir yoki bir nechta sarlavha elementlari (<h1> - <h6>)
logotip yoki ikonka
mualliflik ma'lumotlari

Eslatma: Bitta HTMLda bir nechta <header> elementlari bo'lishi mumkin. Lekin <header> elementi <footer>, <address> yoki boshqa <header> elementi ichiga joylashtirilmaydi.

<article> uchun header

<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>

W3Schools online HTML editor

<footer> elementi

<footer> elementi sahifa yoki bo'lim uchun uning pastki qismini ifodalaydi.

<footer> elementi odatda quyidagilarni o'z ichiga oladi:

mualliflik ma'lumotlari
mualliflik huquqi haqida ma'lumot
kontakt ma'lumotlari
sayt xaritasi
yuqoriga qaytish havolasi
tegishli ma'lumotlar

Bir sahifada bir nechta <footer> elementlaridan foydalanishingiz mumkin.

Sahifaning footer bo

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

W3Schools online HTML editor

<nav> elementi

<nav> elementi navigatsiya havolalarini ifodalaydi.

Eslab qoling, sahifadagi barcha havolalar<nav>elementining ichida bo'lishi kerak emas. <nav> elementi faqat navigatsiya havolalarining asosiy bloklari uchun mo'ljallangan.

Brauzerlar nogiron foydalanuvchilar uchun ekranni o'qish vositasi sifatida ushbu bo'limni o'tkazib yubormaslik kerakligini aniqlash uchun ushbu tegdan foydalanishi mumkin.

Navigatsiya havolalari

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

W3Schools online HTML editor

<aside> elementi

<aside> elementi o'zi joylashtirilgan kontentdan tashqari ba'zi tarkibiy qismni ifodalaydi (masalan, yon panelni).

<aside> kontenti, boshqa bo'lim kontentlari bilan bilvosita bog'liq bo'lishi kerak.

<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>

<aside> elementiga stil berish uchun CSSdan foydalanish:

<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>

W3Schools online HTML editor

<figure> va <figcaption> elementlari

<figure> tegi rasmlar, diagrammalar, fotosuratlar, kodlar ro'yxati va shu kabi boshqa mustaqil kontentlarni ifodalaydi.

<figcaption> tegi <figure> elementi uchun sarlavha nomini bildiradi. <figcaption> elementi <figure> elementining birinchi yoki oxirgi bolasi sifatida joylashtirilishi mumkin.

<img> elementi haqiqiy rasm/illyustratsiyani ifodalaydi.

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

W3Schools online HTML editor

Nega aynan Semantik elementlar ?

W3C ga ko'ra: "Semantika Internetdagi ma'lumotlarni, dasturlar, korxonalar va kommunitylar aro almashish va qayta foydalanish imkonini beradi."

HTMLdagi semantik elementlar

Quyidagi ro'yhatda HTMLning ba'zi semantik elementlari keltirilgan:

Teg nomi

Tarifi

Mustaqil kontentni ifodalaydi

O'zi joylashtirilgan kontentdan tashqari ba'zi tarkibiy qismni ifodalaydi

Foydalanuvchi ko'rishi yoki yashirishi mumkin bo'lgan qo'shimcha ma'lumotlarni ifodalaydi

<figure> elementi uchun sarlavhani ifodalaydi

Illyustratsiyalar, diagrammalar, fotosuratlar, kodlar ro'yxati va shu kabi boshqa mustaqil kontentlarni ifodalaydi.

Sahifa yoki bo'lim uchun footerni ifodalaydi

Sahifa yoki bo'lim uchun Headerni ifodalaydi

Sahifaning asosiy qismini ifodalaydi

Belgilangan va ajratib ko'rsatilgan matn yaratadi

Navigatsiya havolalarini ifodalaydi

Sahifadagi ma'lum bir bo'limni ifodalaydi

<details> elementi uchun ko'rinadigan sarlavhani ifodalayd

Sana/vaqtni ifodalaydi

PreviousKlasslar NextCSS qo'llanma

Last updated 1 year ago