- DOCTYPE і meta тэгі ў загалоўку старонкі
- загаловак старонкі
- Рух на старонцы
- Кантэнт на старонцы
- афармленне артыкула
- Сайдбар або калонка з фішкамі
- тэг section
- Падвал сайта - Footer
- заключэнне
Сёння мы пагаворым аб семантыцы ў HTML5. Я ўжо пісаў невялікі аглядны пост пра новыя семантычныя тэгі ў HTML5 . Рэкамендую з ёй папярэдне азнаёміцца, перад чытаннем гэтага артыкула. Зараз мы разбярэмся з гэтым пытаннем больш падрабязна, пра тое як правільна і пісьменна складаць семантычную структуру HTML5 дакумента.
У гэтым артыкуле мы будзем паступова ствараць html старонку, і афармляць яе семантычным HTML5 тэгамі.
Малюнак - Семантычная структура для HTML5 старонкі.
DOCTYPE і meta тэгі ў загалоўку старонкі
Пачнем са стандартнага шаблону HTML5 дакумента, і дадамо тэгі meta ў head:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Загаловак старонкі </ title> <meta name = "keywords" content = "Ключавыя словы, і, фразы, праз, коску "> <meta name =" description "content =" Апісанне кантэнту старонкі, 1-2 прапановы. "> </ head> <body>Я дадаў тэг <meta name = "keywords" content = ""> які адказвае за ключавыя словы. І тэг <meta name = "description" content = ""> які адказвае за апісанне старонкі. Для SEO аптымізацыі гэтыя тэгі абавязковыя. Таксама абавязкова карэктнае запаўненне тэга <title>. Title старонкі павінен быць унікальным для ўсяго сайта, і ўтрымліваць у назве ўсю сутнасць старонкі для якой ён паказаны.
Пойдзем далей. У HTML5 з'явіліся новыя тэгі, якія выкарыстоўваюцца для таго каб рабіць семантычную разметку дакумента. Гэта тэгі header, nav, main, article, aside, footer і г.д. Па адлюстраванні яны працуюць таксама як і звычайныя <div> тэгі, гэта значыць гэта блокавыя элементы. Але калі <div> не мае семантычнай нагрузкі, то header, nav, main і іншыя - ужо трэба выкарыстоўваць толькі асэнсавана.
загаловак старонкі
Шапка старонкі афармляецца ў тэг header. Заўважце што загаловак старонкі пішам тэгам h1.
<! - Header старонкі -> <header> <h1> Site title </ h1> </ header>Калі ў нас ёсць яшчэ і слоган побач з загалоўкам, то змяшчаем яго ў p, div або span.
<! - Header старонкі -> <header> <h1> Site title </ h1> <p> site slogan </ p> </ header>Заўвага з нагоды тэга H1
Варта заўважыць што ў HTML5 тэг H1 выкарыстоўваецца для ўказанні загалоўка кантэйнера у якім ён знаходзіцца (гэта можа быць header, section, article і г.д.)
Да з'яўлення HTML5 тэгаў семантыка была некалькі іншай і адрознівалася. Так у HTML4 на старонцы мог быць толькі адзін загаловак H1! Як правіла гэта быў загаловак артыкула або загаловак старонкі (напрыклад калі гэта старонка рубрыкі на якой адлюстроўваюцца некалькі артыкулаў.) H2 выкарыстоўваўся для падзагалоўкам, або для раздзелаў галоўнай артыкула. H3 для пад раздзелаў і гэтак далей.
Рух на старонцы
Афармленне галоўнай навігацыі па сайце павінна заключацца ў тэг nav. Таксама варта памятаць што добрай практыкай лічыцца афармляць навігацыю элементамі спісу.
<! - Галоўная Навігацыя па сайце -> <nav> <ul> <li> <a href="#"> Home </a> </ li> <li> <a href="#"> Portfolio < / a> </ li> <li> <a href="#"> Gallery </a> </ li> <li> <a href="#"> Contacts </a> </ li> </ ul > </ nav>Кантэнт на старонцы
Асноўнае змесціва старонкі афармляецца ў тэг main. Гэта можа быць адзін артыкул, або некалькі прэв'ю артыкулаў калі гаворка ідзе пра старонку блога з некалькімі запісамі. Нельга змяшчаць сайдбар, хедар старонкі, футер або галоўную навігацыю ў тэг main!
<! - Асноўнае змесціва старонак -> <main> ... асноўны кантэнт старонкі ... </ main>афармленне артыкула
Тэг article - служыць для абгорткі артыкулаў. Увогуле гэты тэг утрымлівае ў сабе блок кантэнту, які можа быць выняты з кантэксту старонкі, і выкарыстаны асобна ў іншым месцы. Гэта можа быць артыкул (поўны тескт артыкула або прэв'ю), пост на форуме, і да т.п.
На прыкладзе ніжэй я паказаў афармленне артыкулы ў кантэксце, ўнутры тэга main. У артыкулы зададзены блок header з загалоўкам артыкула. Дата публікацыі артыкула зададзена спецыяльным тэгам time, які адлюстроўваецца як звычайны inline элемент. У тэга time ёсць спецыяльны аттрибут у якім час публікацыі павінна быць зададзена ў машынным фармаце. Гэта можа быць толькі дата datetime = "2015/09/30" або з указаннем гадзін хвілін і секунд datetime = "2015-09-30T15: 25: 55". Параметр pubdate паказвае што артыкул быў і апублікаваная ў той жа час што і напісана. Калі гэта навіна, то можа быць такое што час навіны адно, а час публікацыі іншае, для гэтага неабходна ўказаць два разы тэг time, і паставіць pubdate толькі ў тым тэгу дзе паказана час публікацыі.
<Main> ... <! - Артыкул -> <article> <! - Шапка артыкула калі ў шапцы ў нас больш чым загаловак -> <header> <! - Загаловак артыкулу -> <h1> Article title </ h1> <! - Дата публікацыі артыкула -> <time datetime = "2015-09-30T15: 25: 55" pubdate> 30 Верасня </ time> </ header> <p> Lorem ipsum dolor sit amet , consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde? </ P> <! - Падзагаловак старонкі -> <h2> Article sub-title </ h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde? </ P> <footer> <a href="#"> Чытаць далей </a> <a href="#"> Каментары </a> </ footer> </ article> ... </ main>З прыкладу вышэй бачная што ўнутры артыкула былі выкарыстаны тэгі header і footer каб вылучыць загаловак і ніжні калантытул артыкула.
Сайдбар або калонка з фішкамі
Для кожнага асобнага элемента сайдбар выкарыстоўваем блок aside. Усярэдзіне яго загаловак афармляем тэгам h1. Так калонка з сайдбар можа выглядаць наступным чынам:
<! - сайдбар -> <div class = "sidebar"> <! - Віджэт ў сайдбар -> <aside> <h1> Widget title </ h1> ... </ aside> <! - Віджэт у сайдбар -> <aside> <h1> Апошнія запісы </ h1> ... </ aside> <! - Віджэт ў сайдбар -> <aside> <h1> Папулярныя каментары </ h1> ... < / aside> </ div>тэг section
Тэг section - выкарыстоўваецца для прадстаўлення групы або секцыі тэматычна звязанага контента.Его выкарыстанне падобна на article з галоўным адрозненнем у тым што дапускаецца адсутнасць сэнсу змесціва ўнутры элемента <section> па-за кантэкстам самой старонкі. Рэкамендуецца выкарыстоўваць тэгі (<h1> - <h6>) для абазначэння тэмы секцыі.
У якасці прыкладу можна прывесці артыкул, якую вы зараз чытаеце, можна было б кожны параграф абгарнуць ў тэг <section>. Напрыклад тэгам section можна вылучаць блокі кантэнту на лендинге. Гучыць падобна на вызначэнне div элемента, які часта выкарыстоўваецца як кантэйнер для кантэнту. Розніца ў тым што div не мае семантычнага значэння, і ён не кажа няма пра што пра кантэнт які знаходзіцца ўнутры яго. Тэг section, наадварот выкарыстоўваецца каб выразна паказаць што кантэнт ўнутры яго звязаны па сэнсе. Вы можаце замяніць некаторыя свае div тэгі на section, але заўсёды адказвайце сабе на пытанне: «Гэты кантэнт звязаны паміж сабой ці не?»
Прыклад выкарыстання тэга section ў спісе з пералікам гарадоў:
<H1> An Event Apart </ h1> <section> <header> <h2> Cities </ h2> </ header> <p> Join us in these cities in 2010. </ P> <section> <header> < h3> Seattle </ h3> </ header> <p> Follow the yellow brick road. </ p> </ section> <section> <header> <h3> Boston </ h3> </ header> <p> That's Beantown to its friends. </ p> </ section> <section> <header> <h3> Minneapolis </ h3> </ header> <p> It's so <em> nice </ em>. </ p> < / section> </ section> <small> Accommodation not provided. </ small>Падвал сайта - Footer
Падвал сайта афармляецца тэгам <footer>
<! - Склеп сайта -> <footer> <p class = "copyright"> © 2015 Rightblog.ru Copyright </ p> </ footer>заключэнне
Для праверкі структуры старонкі можна выкарыстоўваць інструмент HTML5 outliner . Ён паказвае структуру старонкі блокам і загалоўках.
Семантыка ў HTML5 не абмяжоўваецца прыведзенымі вышэй у артыкуле тэгамі. Але выкарыстоўваючы прыведзеныя прыклады вы можаце асвяжыць сваю разметку, і зрабіць сайт больш прыязным да пошукавых сістэмах, што адаб'ецца на больш высокім рэйтынгу сайта ў пошукавай выдачы.
У працяг тэмы можна вывучыць іншыя новыя HTML5 тэгі. А таксама мікра фарматы для афармлення і структурызацыі дадзеных, напрыклад такія як schema.org
Важная заўвага па выкарыстанні HTML5 тэгаў. У спецыфікацыі не пазначаныя жорсткія правілы па выкарыстанні семантычных тэгаў, пазначаны толькі рэкамендацыі п іх выкарыстання. Калі вы не разумееце ці не ведаеце дзе і які HTML5 тэг выкарыстоўваць, лепш выкарыстоўвайце div - каб не нашкодзіць ня зрушыць структуру дакумента.
Артыкулы і матэрыялы па тэме:
http://html5forwebdesigners.com/semantics/
http://habrahabr.ru/post/214407/
http://www.adobe.com/devnet/archive/dreamweaver/articles/understanding-html5-semantics.html
http://www.smashingmagazine.com/2011/11/html5-semantics/
http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx
http://www.w3schools.com/html/html5_semantic_elements.asp
Adipisci beatae eaque unde?
Вы можаце замяніць некаторыя свае div тэгі на section, але заўсёды адказвайце сабе на пытанне: «Гэты кантэнт звязаны паміж сабой ці не?