Bugungi kunda mavjud bo'lgan sanoat uchun javobgar bo'lgan Veb-Standartlar harakati muhim printsipi bu HTML elementlarini sukut bo'yicha brauzerda qanday paydo bo'lishidan qat'i nazar, ulardan foydalanish fikridir. Bu semantik HTML sifatida ishlatiladi.
Semantik HTML nima?
Semantik HTML yoki semantik belgilar - bu faqat taqdimotdan ko'ra veb-sahifaga ma'no keltiradigan HTML. Masalan,
yorlig'i qo'shilgan matnning paragraf ekanligini ko'rsatadi.
Bu ikkala semantik va prezentional hisoblanadi, chunki odamlar paragraflarning nima ekanligini bilishadi va brauzerlar ularni qanday namoyish qilishni bilishadi.
Ushbu tenglamaning tirqish tomonida, va kabi teglar semantik emas, chunki ular matnning qanday ko'rinishini (qalin yoki kursiv) aniqlashi va belgilanishga qo'shimcha ma'no bermasligi kerak.
Semantik HTML teglarining namunalari
dan , , va tagidagi nomlarni o'z ichiga oladi. Standartlarga asoslangan veb-saytni yaratishda foydalanish mumkin bo'lgan juda ko'p semantik HTML teglari mavjud.
Nima uchun semantik haqida g'amxo'rlik qilishingiz kerak
Semantik HTML yozishning foydasi har qanday veb-sahifaning haydash maqsadidan iborat bo'lishi kerak - muloqot qilish istagi. Hujjatingizga semantik teglar qo'shsangiz, siz ushbu hujjat haqida qo'shimcha ma'lumot beradi, bu esa muloqotda yordam beradi. Ayniqsa, semantik teglar brauzerda sahifaning mazmuni va mazmuni nimani anglatishini aniqlab beradi.
Ushbu ravshanlik, shuningdek, to'g'ri so'rovlar uchun to'g'ri sahifalar taqdim etilishini ta'minlab, qidirish mexanizmlari bilan ham bog'lanadi.
Semantik HTML teglari, bu sahifalarni qanday qarashni ortda qoldiradigan teglar mazmuni haqida ma'lumot beradi. tegiga olingan matn brauzer tomonidan darhol kodlashning ba'zi bir turi sifatida tan olingan.
Ushbu kodni ko'rsatishga urinishning o'rniga, brauzer ushbu maqolani kod sifatida misol sifatida qo'llayotganingizni tushunadi yoki biror maqola yoki onlayn o'quv qo'llanmalari uchun.
Semantik teglardan foydalanib sizning tarkibingizni shakllantirish uchun sizga yana ko'p sonli kanca beriladi. Ehtimol, bugungi kunda siz o'zingizning kod namunangizni standart brauzer uslubida ko'rishni afzal ko'raman, ammo ertaga ularni kulrang fon rangi bilan qo'ng'iroq qilishni istaysiz va keyinchalik siz bir nechta intervalgacha shrift oilasi yoki harflar to'plamini sizning namunalaringiz. Bularning barchasini semantik formatlash va chuqur tatbiq CSS yordamida osongina qilishingiz mumkin.
Semantik teglardan to'g'ri foydalaning
Taqdimot uchun emas, balki ma'noni yetkazish uchun semantik teglardan foydalanishni istasangiz, siz ularni umumiy ekran xususiyatlari uchun noto'g'ri ishlatmasligingizga ehtiyot bo'lishingiz kerak. Eng ko'p ishlatiladigan semantik teglardan ba'zilari quyidagilardir:
- blockquote - Ba'zi odamlar yorlig'ini taklifnoma bo'lmagan matnni kiritish uchun ishlatadi. Buning sababi, blockquotes sukut bo'yicha indented. Agar siz shunchaki chikish foyda olishni istasangiz, lekin matn blokka emas, balki uning o'rniga CSS chekkalarini ishlating.
- p - Ba'zi veb-muharrirlar sahifadagi matn uchun haqiqiy xatlarni belgilash o'rniga sahifa elementlari orasida qo'shimcha bo'shliqni qo'shish uchun
& nbsp; (paragraofdagi parchalanadigan bo'sh joy) dan foydalanadi. Yuqorida aytib o'tilgan indenting misolida bo'lgani kabi, bo'sh joy qo'shish uchun chekka yoki padding uslubi xususiyatidan foydalaning.
- ul - blokquote kabi, matnni
bosish indentslari ichida ko'pchilik brauzerlarda matn qo'shib qo'yadi. Bu ikkala semantik noto'g'ri va yaroqsiz HTML, chunki - taglari
yorlig'i ichida amal qiladi. Shunga qaramay matnni chertish uchun chekka yoki padding uslubini ishlating.
- h1-h6 - Sarlavha teglari fontlarni kattaroq va murakkab qilish uchun ishlatilishi mumkin, ammo agar matn matning bo'lmasa, u sarlavha yorlig'i ichida bo'lishi kerak. Shriftning og'irligi va harflarning kattaligi CSS xususiyatlaridan foydalaning, buning o'rniga o'z sahifangizdagi muayyan matn hajmini yoki vaznini o'zgartirmoqchi bo'lsangiz
Ma'nolarga ega bo'lgan HTML teglaridan foydalangan holda,
teglari bilan atrofdagi narsalarni ko'ra ko'proq ma'lumot beruvchi sahifalar yaratasiz.
HTML teglar nimani anglatadi?
Taxminan har bir HTML4 yorlig'i va barcha HTML5 teglari semantik ma'noga ega bo'lsa-da, ayrim teglar asosan tabiatda semantik.
Masalan, HTML5 semantik sifatida va teglarining ma'nosini o'zgartirdi. yorlig'i qo'shimcha ahamiyatga ega emas, balki matnni odatda qalin qilib ko'rsatiladi. yorlig'i, shuningdek, qo'shimcha ahamiyatga ega yoki diqqatni keltirmaydi, balki odatda kursiv kursatilgan matnni belgilaydi.
Semantik HTML teglari
Qisqartirish O'chirish
Uzoq tirnoq Ta'rif Hujjat muallifi (lar) ning manzili Citation Kod mos yozuvlar Teletype matni Mantiqiy bo'linish Umumiy inline uslublar konteyneri O'chirilgan matn Qo'shilgan matn Ta'kidlash Kuchli diqqat
Birinchi darajali sarlavha
Ikkinchi darajali sarlavha
Uchinchi darajali sarlavha
To'rtinchi darajali sarlavha
Beshinchi darajali sarlavha
Oltinchi darajali sarlavha
Tematik tanaffus Foydalanuvchi tomonidan kiritiladigan matn
Oldindan formatlangan matn
Qisqa satr ichidagi tirnoq Namuna chiqishi Subscript Superscript Argumentlar yoki foydalanuvchi tomonidan belgilangan matn
, va tagidagi nomlarni o'z ichiga oladi. Standartlarga asoslangan veb-saytni yaratishda foydalanish mumkin bo'lgan juda ko'p semantik HTML teglari mavjud.
Nima uchun semantik haqida g'amxo'rlik qilishingiz kerak
Semantik HTML yozishning foydasi har qanday veb-sahifaning haydash maqsadidan iborat bo'lishi kerak - muloqot qilish istagi. Hujjatingizga semantik teglar qo'shsangiz, siz ushbu hujjat haqida qo'shimcha ma'lumot beradi, bu esa muloqotda yordam beradi. Ayniqsa, semantik teglar brauzerda sahifaning mazmuni va mazmuni nimani anglatishini aniqlab beradi.
Ushbu ravshanlik, shuningdek, to'g'ri so'rovlar uchun to'g'ri sahifalar taqdim etilishini ta'minlab, qidirish mexanizmlari bilan ham bog'lanadi.
Semantik HTML teglari, bu sahifalarni qanday qarashni ortda qoldiradigan teglar mazmuni haqida ma'lumot beradi. tegiga olingan matn brauzer tomonidan darhol kodlashning ba'zi bir turi sifatida tan olingan.
Ushbu kodni ko'rsatishga urinishning o'rniga, brauzer ushbu maqolani kod sifatida misol sifatida qo'llayotganingizni tushunadi yoki biror maqola yoki onlayn o'quv qo'llanmalari uchun.
Semantik teglardan foydalanib sizning tarkibingizni shakllantirish uchun sizga yana ko'p sonli kanca beriladi. Ehtimol, bugungi kunda siz o'zingizning kod namunangizni standart brauzer uslubida ko'rishni afzal ko'raman, ammo ertaga ularni kulrang fon rangi bilan qo'ng'iroq qilishni istaysiz va keyinchalik siz bir nechta intervalgacha shrift oilasi yoki harflar to'plamini sizning namunalaringiz. Bularning barchasini semantik formatlash va chuqur tatbiq CSS yordamida osongina qilishingiz mumkin.
Semantik teglardan to'g'ri foydalaning
Taqdimot uchun emas, balki ma'noni yetkazish uchun semantik teglardan foydalanishni istasangiz, siz ularni umumiy ekran xususiyatlari uchun noto'g'ri ishlatmasligingizga ehtiyot bo'lishingiz kerak. Eng ko'p ishlatiladigan semantik teglardan ba'zilari quyidagilardir:
- blockquote - Ba'zi odamlar yorlig'ini taklifnoma bo'lmagan matnni kiritish uchun ishlatadi. Buning sababi, blockquotes sukut bo'yicha indented. Agar siz shunchaki chikish foyda olishni istasangiz, lekin matn blokka emas, balki uning o'rniga CSS chekkalarini ishlating.
- p - Ba'zi veb-muharrirlar sahifadagi matn uchun haqiqiy xatlarni belgilash o'rniga sahifa elementlari orasida qo'shimcha bo'shliqni qo'shish uchun
& nbsp; (paragraofdagi parchalanadigan bo'sh joy) dan foydalanadi. Yuqorida aytib o'tilgan indenting misolida bo'lgani kabi, bo'sh joy qo'shish uchun chekka yoki padding uslubi xususiyatidan foydalaning.
- ul - blokquote kabi, matnni
bosish indentslari ichida ko'pchilik brauzerlarda matn qo'shib qo'yadi. Bu ikkala semantik noto'g'ri va yaroqsiz HTML, chunki - taglari
yorlig'i ichida amal qiladi. Shunga qaramay matnni chertish uchun chekka yoki padding uslubini ishlating.
- h1-h6 - Sarlavha teglari fontlarni kattaroq va murakkab qilish uchun ishlatilishi mumkin, ammo agar matn matning bo'lmasa, u sarlavha yorlig'i ichida bo'lishi kerak. Shriftning og'irligi va harflarning kattaligi CSS xususiyatlaridan foydalaning, buning o'rniga o'z sahifangizdagi muayyan matn hajmini yoki vaznini o'zgartirmoqchi bo'lsangiz
Ma'nolarga ega bo'lgan HTML teglaridan foydalangan holda,
teglari bilan atrofdagi narsalarni ko'ra ko'proq ma'lumot beruvchi sahifalar yaratasiz.
HTML teglar nimani anglatadi?
Taxminan har bir HTML4 yorlig'i va barcha HTML5 teglari semantik ma'noga ega bo'lsa-da, ayrim teglar asosan tabiatda semantik.
Masalan, HTML5 semantik sifatida va teglarining ma'nosini o'zgartirdi. yorlig'i qo'shimcha ahamiyatga ega emas, balki matnni odatda qalin qilib ko'rsatiladi. yorlig'i, shuningdek, qo'shimcha ahamiyatga ega yoki diqqatni keltirmaydi, balki odatda kursiv kursatilgan matnni belgilaydi.
Semantik HTML teglari
Qisqartirish O'chirish
Uzoq tirnoq Ta'rif Hujjat muallifi (lar) ning manzili Citation Kod mos yozuvlar Teletype matni Mantiqiy bo'linish Umumiy inline uslublar konteyneri O'chirilgan matn Qo'shilgan matn Ta'kidlash Kuchli diqqat
Birinchi darajali sarlavha
Ikkinchi darajali sarlavha
Uchinchi darajali sarlavha
To'rtinchi darajali sarlavha
Beshinchi darajali sarlavha
Oltinchi darajali sarlavha
Tematik tanaffus Foydalanuvchi tomonidan kiritiladigan matn
Oldindan formatlangan matn
Qisqa satr ichidagi tirnoq Namuna chiqishi Subscript Superscript Argumentlar yoki foydalanuvchi tomonidan belgilangan matn