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