HTML 5 Semantik kodlar haqida...

Semantik kodlar nima uchun ?
» HTML 4 bilan ishlab chiquvchilar o'zlarining id / class nomlarini uslublar kodlariga ishlatishgan: header, top, bottom, footer, menu, navigatsiya, main, container, content, article, sidebar, topnav va boshqalar.

› Bu qidiruv tizimlarining tez va aniq veb-sahifa mazmunini aniqlashga imkon bermadi.

› Yangi HTML 5 kodlarida ( <header>, <footer>, <nav>, <section>, <article>... ) bilan bu osonlashadi.

-------------

› Semantika - tilda so'zlar va iboralar ma'nosini o'rganishdir.
› Semantik kodlar ≠ ma'noga ega elementlar.
› Semantik kod o'z mazmunini brauzerlar tez va oson topadi.

Semantik bo'lmagan kodlar ≥
Misol: <div> va <span> - uning mazmuni haqida hech narsa aytilmagan va xar xil usullar va xolatlarda qullaniladi.

Semantik kodlar ≥
Misol: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time> - kodlarni mazmunini aniq belgilangan.

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <section> - haqida.
<section> - kodi hujjatdagi bo'limni belgilaydi.

Misol
<section>
<h1>HTML Yangilliklar</h1>
<p>...</p>
</section>

<section>
<h1>CSS Yangilliklar</h1>
<p>...</p>
</section>

<section>
<h1>JS Yangilliklar</h1>
<p>...</p>
</section>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <article> - haqida.
<article> - Forum post, Blog post, Gazeta maqolalarida foydalaniladi.

Misol:
<article>
<h1>HTML haqida Forum yoki Blog...</h1>
<p>...</p>
</article>

<article>
<h1>CSS haqida Forum yoki Blog...</h1>
<p>...</p>
</article>

<article>
<h1>JS haqida Forum yoki Blog...</h1>
<p>...</p>
</article>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <section> va <article> - kodlari birlashtirish mumkin ≥

<section>
<article>
<h1>HTML Yangilliklar</h1>
<p>...</p>
</article>
</section>

<section>
<article>
<h1>CSS Yangilliklar</h1>
<p>...</p>
</article>
</section>

<section>
<article>
<h1>JS Yangilliklar</h1>
<p>...</p>
</article>
</section>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <header> - haqida.
<header> kodi hujjat yoki bo'lim uchun (sarlavha)ni bildiradi.

<header> kodi kirish kontenti uchun konteyner sifatida ishlatilishi kerak.

Bitta hujjatda bir necha <header> - kodi bo'lishi mumkin.

Quyidagi misol, blog postni sarlavhasini belgilaydi:

Misol:
<article>
<header>
<h1>...</h1>
<p>...</p>
</header>
<p>...</p>
</article>

<article>
<header>
<h1>...</h1>
<p>...</p>
</header>
<p>...</p>
</article>

<article>
<header>
<h1>...</h1>
<p>...</p>
</header>
<p>...</p>
</article>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <footer> haqida.

<footer> - Bir footer odatda hujjatning muallifini, mualliflik huquqi ma'lumotlarini, foydalanish
shartlariga havolalarni, aloqa ma'lumotlarini va boshqalarni o'z ichiga oladi.

Bitta hujjatda bir necha <footer> kodi bo'lishi mumkin.

Misol:
<footer>
<p>...</p>
<p>...</p>
</footer>

<footer>
<p>...</p>
<p>...</p>
</footer>

<footer>
<p>...</p>
<p>...</p>
</footer>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <nav> - haqida.
<nav> kodi navigatsiya (<a href=""></a>) - havolalari to'plamini belgilaydi.

Hujjatning barcha havolalarining <nav> elementi bo'lmasligiga e'tibor bering. <nav> kodi faqat asosiy navigatsion bloklar blokiga mo'ljallangan.

Misol:
<nav>
<a href="test.html">HTML</a> ~
<a href="test.html">CSS</a> ~
<a href="test.html">JavaScript</a>
</nav>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <aside> - haqida.
<aside> kodi ba'zi kontentni joylashtirilgan kontentdan chetga suradi (chekka panel kabi).

Misol:
<aside>
<h2>...</h2>
<p>...</p>
</aside>

Mukamalashtirish uchun CSS-dan foydalaniladi.


@w3_uz › #html5 › #semantik › #section, #article, #header, #footer, #nav, #aside