Семантычная вёрстка сайта, дапамажыце робату зразумець ваш сайт

1. Што такое семантычная вёрстка?
2. Чаму семантычная вёрстка сайта так важная?
3. Як рэалізаваць семантычную вёрстку старонкі?
4. Тэгі структуры дакумента
5. тэкставыя тэгі
6. медыя тэгі
7. карэляцыйныя тэгі

Чым глыбей вы вывучаеце html і web распрацоўку, тым часцей чуеце адно загадкавае слова "семантыка". У гэтым артыкуле мы разгадаем загадку, і раскажам што такое семантычная вёрстка. Разбяром асноўныя тэгі якія выкарыстоўваюцца для апісання семантычнай структуры.

Што такое семантычная вёрстка?

Семантычная вёрстка - гэта вывучэнне значэнняў слоў і выразаў. У html нішто іншае як напісанне элементаў з сэнсам. Семантычны элемент выразна апісвае сваё значэнне як для браўзэраў, так і для распрацоўнікаў.

Давайце зірнем на адрозненне семантычнага элемента ад звычайнага.

Напрыклад div або span - простыя элементы, гледзячы на ​​іх мы не можам зразумець якога тыпу кантэнт у іх утрымліваецца. Гэта можа быць проста тэкст, малюнак, або іншыя тэгі.

Цяпер семантычныя form, table, і article тут ужо зусім іншая справа. Толькі прачытаўшы назвы мы можам з лёгкасцю зразумець што ўнутры гэтых тэгаў. Прыклад вёрсткі звычайнай і семантычнай:

<! - звычайная блочная вёрстка ->

<Div class = "content">

<Img src = "/pictures.jpg" alt = "">

<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis. </ P>

<a href = ""> Чытаць Далей </a>

</ Div>

<! - семантычная вёрстка ->

<Article>

<Img src = "/pictures.jpg" alt = "">

<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis! </ P>

<a href = ""> Чытаць Далей </a>

</ Article>

Спадзяюся на гэтым этапе вы ўлавілі розніцу паміж тыпамі тэгаў. Хачу адразу адзначыць, што гэта не адзіныя тэгі, іх шмат, а са з'яўленнем html5 стала яшчэ больш. Далей мы пазнаёмімся з імі.

Чаму семантычная вёрстка сайта так важная?

Добра напісаны CSS можа схаваць ад вачэй карыстальніка дрэнную вёрстку html. Але мы не можам схаваць яе ад пошукавых робатаў, убудоў браўзэра, чыталак і іншых інструментаў і девайсов.

Зыходзячы з гэтага семантычная вёрстка з'яўляецца абавязковай, калі вы хочаце каб ваш сайт быў даступны любым наведвальнікам з разнастайных прылад, і добра ранжыраваць ў пошукавых сістэмах. Не варта забываць і пра тэкст, які таксама павінен быць добра структураваны, каб карыстальнікам было камфортна яго чытаць.

Як рэалізаваць семантычную вёрстку старонкі?

Існуе адно адзінае правіла, пры напісанні мы павінны выкарыстоўваць тэгі якія ў канкрэтным выпадку могуць найбольш дакладна перадаць значэнне і тып кантэнту, пошукавым робатам і праграмам. Калі няма падыходных тэгаў, то выкарыстоўваем звычайныя бо div

Мы можам згрупаваць найбольш распаўсюджаныя і важныя элементы на чатыры групы:

• Тэгі структуры дакумента
• тэкставыя тэгі
• медыя тэгі
• карэляцыйныя тэгі

Тэгі структуры дакумента

У мінулым элемент div быў асноўным з дапамогай якога стваралася структура html дакумента , W3C звярнулі ўвагу на тое, што распрацоўшчыкі выкарыстоўвалі ў назвах id і class словы header, footer, menu і г.д. Якія апісвалі сэнсавае змесціва элемента. Так і з'явіліся новыя семантычныя тэгі ў HTML5.

header: Элемент які выкарыстоўваецца як кантэйнер для лагатыпа, назвы сайта і меню. Таксама для вызначэння загалоўкаў, у артыкулах і г.д.

footer: Выкарыстоўваецца ў асноўным для апісання ніжняй частцы старонкі, звычайна змяшчае інфармацыю пра аўтара, кантакты, капірайт, дадатковае меню і кнопку якая вядзе да версе старонкі.

main: Элемент высокага ўзроўню, выкарыстоўваецца як кантэйнер для унікальнага змесціва на старонцы, якое не паўтараецца на іншых старонках сайта.

nav: элемент для стварэння навігацыі па сайце. nav звычайна знаходзіцца ў header (хедэры) і footer (футере), а таксама можа быць выкарыстаны ў aside (сайдбар) сайта.

section: Апісвае раздзелы дакумента, павінен змяшчаць у сабе загаловак h1 - h6

aside: Выкарыстоўваецца для ідэнтыфікацыі кантэнту, які звязаны з асноўным кантэнтам на старонцы. Напрыклад, aside элемент можа ўтрымліваць вызначэнне тэрміна ў артыкуле, рэкламныя аб'явы, дадатковую інфармацыю на старонцы.

article: Гэта самадастатковы элемент які выкарыстоўваецца для апісання артыкула сайта, блога так жа публікацыі на форуме. Можа ўтрымліваць элемент header і footer.

тэкставыя тэгі

Існуе мноства тэгаў для працы з тэкстам на старонцы, але не ўсе яны семантычныя. Да прыкладу можна выкарыстоўваць span для стылізацыі тэксту, але інфармацыю пра змесціва браўзэру ён не перадае.

h1, h2, h3, h4, h5 і h6: выкарыстоўваюцца для абазначэння загалоўкаў. Самы высокі ўзровень, або самым галоўным, загалоўкам з'яўляецца h1, за ім ідуць у парадку змяншэння важнасці загалоўкі ўзроўню h2 - h6.

strong: тэг надае тэксту важнасці, як правіла, адлюстроўваецца паўтлустым шрыфтам.

mark: выкарыстоўваецца для вылучэння тэксту ў пэўным кантэксце. Напрыклад, ён можа быць выкарыстаны, каб вылучыць кожнае ўваходжанне ключа пошуку на старонцы вынікаў пошуку.

cite: тэгам звычайна пазначаюць назвы кніг, песень, фільмаў, тб-перадач.

blockquote і q: элементы выкарыстоўваюцца для ўстаўкі цытаты з тэксту іншага крыніцы.

time: тэг можа быць выкарыстаны, каб сказаць браўзэру, пошукавікам і іншых прылад, што канкрэтная частка кантэнту ўяўляе сабой час і дату.

медыя тэгі

HTML5 таксама ўключае ў сябе тры тэга, якія вызначаюць тып медыя кантэнту. Тэгі падказваюць браўзэру як менавіта адлюстроўваць дадзены кантэнт. а гэтак жа яны надаюць сэнсавае значэнне для кантэнту.

audio: Выкарыстоўваецца для дадання аднаго або некалькіх аўдыё на старонку, адлюстроўваецца ў выглядзе аўдыё плэера.

video: падобны да аўдыё тэгу, але выкарыстоўваецца для дадання відэа кантэнту ў дакумент.

picture: Элемент picture дае распрацоўнікам магчымасць больш гнутка адлюстроўваць карцінку на старонцы. Часта выкарыстоўваецца ў адаптыўнай вёрстцы, бо можа ўтрымліваць адразу некалькі малюнкаў якія адлюстроўваюцца пры пэўных медыя умовах.

карэляцыйныя тэгі

Некаторыя тэгі выкарыстоўваюцца для стварэння сувязі паміж іншымі элементамі. Да прыкладу тэг маркіраванага спісу ul кажа браўзэру што элементы li звязаны і павінны з'яўляцца ў вызначаным парадку. Ёсць яшчэ тэгі:

ol: тэг нумараванага спісу, аналагічны з тэгам ul

figure: выкарыстоўваецца для групоўкі такога кантэнту як карцінкі, графікі, можа ўтрымліваць загаловак figcaption.

address: апісвае кантактную інфармацыю на старонцы. І звязвае яе з аўтарам артыкула або старонкі.

Калі вы новенькі ў html то паспрабуйце ўжыць усе гэтыя тэгі для стварэння семантычнай вёрсткі старонкі ўжо ў наступным праекце. Не выкарыстоўвайце элементы калі не ўпэўнены ці патрэбны ён там ці не, выкарыстанне правільнага тэга вельмі важны момант. Лепш выдаткуйце трохі часу для глыбокага яго вывучэння. Гэта дасць свой плён у будучыні.