Semantik elementlar
Semantik elementlar = ma’noga ega elementlar.
Foydalanuvchiga saytingizda harakatlanish va u bilan ishlashning qulay usulini taqdim eting. HTML kodingizni semantik qiling. Semantika — HTML’da to‘g‘ri elementdan foydalanish demakdir. HTML 5 da taxminan 110 ta element bor.
Ulardan ikkitasi hech qanday ma’noga ega emas – <div> va <span>. Ular kontent haqida hech narsa aytmaydi. Ularda o‘rnatilgan qulaylik imkoniyatlari yo‘q, shuning uchun har doim boshqa elementlar mosroq emasligini tekshirib ko‘rishimiz kerak. Semantik elementlarga misollar: <form>, <table> va <article>. Ular kontentni aniq belgilaydi.
Uber’dan oddiy misol
Uber’dan olingan ushbu misolda beshta element bor:
- Sarlavha
- Paragraf
- Tugma
- Havola
- Rasm
Bu elementlarni HTML’ga quyidagicha o‘girish mumkin:
<h2><p><button><a><img>
Bu to‘g‘rimi? Sign up to drive tugmaga o‘xshasa ham, Uber <button> o‘rniga <a> ishlatgan. Mana biroz soddalashtirilgan kod:
<h2>Get in the driver's seat and get paid</h2>
<p>Drive on the platform with the largest network of active riders.</p>
<a href="/signup/drive/>Sign up to drive</a>
<a href="/en/drive/">Learn more about driving and delivering</a>
<img src="driver.jpg" alt="">
Bu semantik jihatdan to‘g‘ri. Tugma havola sifatida kodlangan, chunki u havola kabi ishlaydi. U foydalanuvchini boshqa ko‘rinishga (sahifaga) olib o‘tadi. Havolaning tugma ko‘rinishida bezatilgani ahamiyatsiz, u baribir havola bo‘lib qoladi.
<button> elementi joriy sahifada biror amalni bajaradigan har qanday o‘zaro ta’sir uchun ishlatilishi kerak. <a> elementi esa boshqa ko‘rinishga o‘tkazadigan har qanday o‘zaro ta’sir uchun ishlatilishi kerak.
Semantika asoslarini o‘rganib oldingiz, endi HTML asboblar to‘plamimizda qanday semantik elementlar borligini ko‘rib chiqamiz. Navbatda — mo‘ljal hududlari (landmarks).
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!