Важен принцип на движењето Web Standards, кој е одговорен за индустријата што ја имаме денес, е идејата за користење на HTML-елементи за она што тие го прават, а не како тие можат да се појавуваат во прелистувачот по дифолт. Ова е познато како користење на семантички HTML.
Што е семантички HTML
Семантички HTML или семантички маркап е HTML што го воведува значењето на веб-страницата, а не само презентација. На пример, ознаката
покажува дека приложениот текст е став.
Ова е семантички и презентациски, бидејќи луѓето знаат што се ставовите и прелистувачите знаат како да ги прикажат.
На другата страна на оваа равенка, таговите како и не се семантички, бидејќи тие дефинираат само како треба да изгледа текстот (задебелен или закосен) и не дава никакво дополнително значење за означувањето.
Примери за семантички HTML тагови вклучуваат насловите на заглавието
до , <блоккотот>, <кодот> и . Има многу повеќе семантички HTML тагови кои може да се користат кога ќе се изгради веб-страница што одговара на стандарди.
Зошто треба да се грижите за семантиката
Придобивката од пишување на семантички HTML произлегува од она што треба да биде целта за возење на секоја веб-страница - желбата за комуникација. Со додавање на семантички ознаки на вашиот документ, вие обезбедуваат дополнителни информации за тој документ, кој помага во комуникацијата. Поточно, семантичките ознаки им јасно на прелистувачот што значи значењето на една страница и нејзината содржина.
Таа јасност е исто така соопштена со пребарувачите, осигурувајќи дека вистинските страници се испорачуваат за вистинските пребарувања.
Семантички HTML тагови даваат информации за содржината на овие ознаки што оди подалеку од само како изгледаат на една страница. Текстот што е затворен во ознаката веднаш го препознава прелистувачот како некој вид јазик за кодирање.
Наместо да се обидува да го направи тој код, прелистувачот разбира дека го користите тој текст како пример на кодот за целите на една статија или онлајн туторијал од некој вид.
Користењето на семантички тагови ви дава многу повеќе куки за стилизирање на вашата содржина. Можеби денес претпочитате да ги прикажете вашите примероци на кодот во стандардниот стил на прелистувач, но утре, сакате да ги повикате со сива боја на позадина, а подоцна сакате да го дефинирате прецизното еднослободно семејство на фонтови или фонт магацинот за користење за вашите примероци. Можете лесно да ги направите сите овие работи со помош на семантичка маркап и умно применета CSS.
Користи ги семантичките ознаки правилно
Кога сакате да користите семантички ознаки за да пренесете значење, а не за презентациски цели, треба да бидете внимателни да не ги користите погрешно едноставно за нивните заеднички својства на екранот. Некои од најчесто злоупотребените семантички ознаки вклучуваат:
- blockquote - Некои луѓе ја користат тагот за внесување текст што не е цитат. Ова е затоа што блоккотите се стандардно зададени. Ако едноставно сакате да добиете придобивки од вовлекувањето, но текстот не е блокнот, наместо да користите CSS маргини.
- p - Некои веб уредници користат
& nbsp; (не-кршење простор содржан во параграфот) за да додадете дополнителен простор помеѓу елементите на страницата, наместо да ги дефинирате вистинските ставови за текстот на таа страница. Како и со претходно споменатиот пример за внесување, треба да го користите својството на маргина или стил на додавање за да додадете простор.
- ul - Како блоккоти, приложување на текст во рамките на
ознаката го наведува тој текст во повеќето прелистувачи. Ова е семантички неточен и неважечки HTML, бидејќи само - таговите се валидни во ознаката
. Повторно, користете го стилот на маргина или стил на дополнување на текстот за внесување.
- h1-h6 - Ознаките за наслов можат да се користат за да се направат фонтовите поголеми и похрабри, но ако текстот не е наслов, тој не треба да биде во ознака за наслов. Наместо тоа, ако сакате да ја промените големината или тежината на специфичен текст на вашата страница, користете ги CSS-тежината на фонтот и големината на фонтот.
Со користење на HTML тагови кои имаат значење, креирате страници кои даваат повеќе информации отколку само со околината со
таговите.
Кои HTML тагови се семантички?
Додека скоро секоја HTML4 ознака и сите тагови HTML5 имаат семантичко значење, некои ознаки се првенствено семантички по природа.
На пример, HTML5 го редефинираше значењето на ознаките и за семантички. Тенџерот не дава дополнителна важност, туку текстот што вообичаено е прикажан со задебелени букви. тагот, исто така, не дава дополнителна важност или акцент, туку дефинира текст кој вообичаено е прикажан со закосени букви.
Семантички HTML тагови
Кратенка <акроним> Акроним
Долги цитати Дефиниција <адреса> Адреса за авторот (ите) на документот <цитирај> Цитирање Код референца Текст на текст Логичка поделба Генерички контејнер во стилски стил Избришан текст Вметнат текст Акцент Силен акцент
Наслов од прво ниво
Наслов од второ ниво
Наслов од трето ниво
Наслов на четврто ниво
Наслов на петтото ниво
Наслов на шесто ниво
Тематски пауза Текст што го внесува корисникот
Претходно форматиран текст
Краток вметнат цитат Пример за излез Индекс Надпис Променлив или кориснички дефиниран текст
Зошто треба да се грижите за семантиката
Придобивката од пишување на семантички HTML произлегува од она што треба да биде целта за возење на секоја веб-страница - желбата за комуникација. Со додавање на семантички ознаки на вашиот документ, вие обезбедуваат дополнителни информации за тој документ, кој помага во комуникацијата. Поточно, семантичките ознаки им јасно на прелистувачот што значи значењето на една страница и нејзината содржина.
Таа јасност е исто така соопштена со пребарувачите, осигурувајќи дека вистинските страници се испорачуваат за вистинските пребарувања.
Семантички HTML тагови даваат информации за содржината на овие ознаки што оди подалеку од само како изгледаат на една страница. Текстот што е затворен во ознаката веднаш го препознава прелистувачот како некој вид јазик за кодирање.
Наместо да се обидува да го направи тој код, прелистувачот разбира дека го користите тој текст како пример на кодот за целите на една статија или онлајн туторијал од некој вид.
Користењето на семантички тагови ви дава многу повеќе куки за стилизирање на вашата содржина. Можеби денес претпочитате да ги прикажете вашите примероци на кодот во стандардниот стил на прелистувач, но утре, сакате да ги повикате со сива боја на позадина, а подоцна сакате да го дефинирате прецизното еднослободно семејство на фонтови или фонт магацинот за користење за вашите примероци. Можете лесно да ги направите сите овие работи со помош на семантичка маркап и умно применета CSS.
Користи ги семантичките ознаки правилно
Кога сакате да користите семантички ознаки за да пренесете значење, а не за презентациски цели, треба да бидете внимателни да не ги користите погрешно едноставно за нивните заеднички својства на екранот. Некои од најчесто злоупотребените семантички ознаки вклучуваат:
- blockquote - Некои луѓе ја користат тагот за внесување текст што не е цитат. Ова е затоа што блоккотите се стандардно зададени. Ако едноставно сакате да добиете придобивки од вовлекувањето, но текстот не е блокнот, наместо да користите CSS маргини.
- p - Некои веб уредници користат
& nbsp; (не-кршење простор содржан во параграфот) за да додадете дополнителен простор помеѓу елементите на страницата, наместо да ги дефинирате вистинските ставови за текстот на таа страница. Како и со претходно споменатиот пример за внесување, треба да го користите својството на маргина или стил на додавање за да додадете простор.
- ul - Како блоккоти, приложување на текст во рамките на
- ознаката го наведува тој текст во повеќето прелистувачи. Ова е семантички неточен и неважечки HTML, бидејќи само
- таговите се валидни во ознаката
- . Повторно, користете го стилот на маргина или стил на дополнување на текстот за внесување.
- h1-h6 - Ознаките за наслов можат да се користат за да се направат фонтовите поголеми и похрабри, но ако текстот не е наслов, тој не треба да биде во ознака за наслов. Наместо тоа, ако сакате да ја промените големината или тежината на специфичен текст на вашата страница, користете ги CSS-тежината на фонтот и големината на фонтот.
Со користење на HTML тагови кои имаат значење, креирате страници кои даваат повеќе информации отколку само со околината со
таговите.Кои HTML тагови се семантички?
Додека скоро секоја HTML4 ознака и сите тагови HTML5 имаат семантичко значење, некои ознаки се првенствено семантички по природа.
На пример, HTML5 го редефинираше значењето на ознаките и за семантички. Тенџерот не дава дополнителна важност, туку текстот што вообичаено е прикажан со задебелени букви. тагот, исто така, не дава дополнителна важност или акцент, туку дефинира текст кој вообичаено е прикажан со закосени букви.
Семантички HTML тагови
Кратенка <акроним> Акроним Долги цитати Дефиниција <адреса> Адреса за авторот (ите) на документот <цитирај> Цитирање Код референца Текст на текст Логичка поделба Генерички контејнер во стилски стил Избришан текст Вметнат текст Акцент Силен акцент Наслов од прво ниво Наслов од второ ниво Наслов од трето ниво Наслов на четврто ниво Наслов на петтото ниво Наслов на шесто ниво
Тематски пауза Текст што го внесува корисникот Претходно форматиран текст Краток вметнат цитат Пример за излез Индекс Надпис Променлив или кориснички дефиниран текст - таговите се валидни во ознаката