Асновы семантычнай вёрсткі на HTML5
Прывітанне ўсім! Вось і пачалася доўгачаканая алімпіяда. Жадаю ўсё ўдзельнікам вялікіх поспехаў і ўдачы, ну і вядома ж я вельмі хварэю за Расею, бо я сам расеец. А цяпер да тэмы паста. У дадзеным артыкуле пагаворым пра сучасную разметцы HTML5, аб яе перавагах і важнасці ў цэлым. Я ўсё ніяк не мог перайсці на html5, думаў што гэта толькі новае зусім, не ўсе браўзэры падтрымліваюць, у прыватнасці ІІ 7-8. Але ўсё аказалася не зусім так.
Сёння html5 для разметкі вэб-старонак выкарыстоўваецца на поўным ходу і практычна ўсе сучасныя браўзэры падтрымліваюць дадзеную разметку, хоць лічыцца, што спецыфікацыя html5 знаходзіцца яшчэ на стадыі распрацоўкі. Што тычыцца інтэрнэт эксплорер 7-8 версіі, то для іх маецца спецыяльны мыліца, які складаецца з невялікага javaScript'a. На мой погляд вярстаць на html5 вельмі зручна, бо у першую чаргу html5 гэта семантыка. Тут выкарыстоўваюцца некаторыя структурныя элементы, з дапамогай якіх структура дакумента становіцца лёгка чытэльнай і зразумелай не толькі чалавеку, але і пошукаваму робату.
Такім чынам, давайце разбярэм разметку html5 па кроках і пачнем з самага пачатку дакумента - Doctype. Doctype ў html5 запісваецца ўжо нашмат прасцей, так, што можна лёгка запомніць.
<! Doctype html>
Абазначэнне кадоўкі прапісваецца наступным чынам
<Meta charset = "utf-8" />
А было
<Meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />
Адчуваеце розніцу? Код стаў значна лягчэй і запомніць таксама вельмі лёгка. Таксама пры падключэнні скрыптоў і стыляў зараз не абавязкова ўказваць type.
<Link rel = "stylesheet" href = "style.css" /> <script src = "javascript.js"> </ script>
Далей вызначаем мова:
<Html lang = "ru">
было:
<Html lang = "ru" dir = "ltr" class = "client-nojs" xmlns = "http://www.w3.org/1999/xhtml">
Наступнае, што мы зробім гэта падключым невялікі javascript для таго, што ІІ разумеў новую разметку.
<! - [if IE]> <script> document.createElement ( 'header'); document.createElement ( 'nav'); document.createElement ( 'section'); document.createElement ( 'article'); document.createElement ( 'aside'); document.createElement ( 'footer'); </ Script> <! [Endif] ->
Дадзены скрыпт таксама можна і падгрузіць з сервера Google.
<! - [if IE]> <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <! [Endif] ->
Далей пералічым асноўныя структурныя элементы:
<Section> </ section> - групуе якія або тэматычныя блокі (ствараюцца секцыі), таксама падтрымліваецца укладзенасць дадзенага элемента
<Header> </ header> - вызначае вобласць загалоўка раздзела або старонкі. Вельмі часта ў вёрстцы дадзеных тэгам апраўляюць шапку сайта.
<Footer> </ footer> - вызначае ніжні калантытул падзелу або старонкі. Звычайна дадзеных тэгам апраўляюць падвал сайта, у якім змяшчаецца інфармацыя аб капірайце, кантактах, умовах выкарыстання і г.д.
<Nav> </ nav> - пазначае навігацыйную ланцужок сайта. Тут можа быць меню сайта, блок хлебных дробак і інш.
<Article> </ article> - вызначае асноўны змест сайта, напрыклад, асобны артыкул.
<Aside> </ aside> - другасны кантэнт на сайце. Звычайна дадзенымі элементамі пазначаюць сайдбар.
Варта адзначыць, што новыя элементы html5 маюць инлайновую прыроду, г.зн. для карэктнага адлюстравання іх неабходна зрабіць блокамі.
header, nav, section, article, aside, footer {display: block}
Зыходзячы з вышэйпададзенага можна накідаць невялікі макет старонкі на html5
<! Doctype html> <html lang = ru> <head> <meta charset = utf-8> <title> Прыкладны разметка на html5 </ title> <link rel = "stylesheet" href = "style.css" /> < ! - [if IE]> <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <! [endif] -> </ head> <body > <header> Шапка сайта <nav> Меню сайта </ nav> </ header> <section id = "content"> <article> Артыкул </ article> <aside> Бакавая калонка (сайдбар) </ aside> </ section > <footer> Склеп сайта </ footer> </ body> </ html>
Як бачыце, у html5 ёсць відавочнае перавага перад html4, як у плане разметкі, так і ў плане СЕО. Аб СЕО пагаворым ніжэй.
Акрамя асноўных тэгаў таксама часта выкарыстоўваюцца і наступныя тэгі:
placeholder (placeholder = »Тэкст») - выводзіць надпіс у поле input, а пры набіранні тэксту ён аўтаматычна знікае. Дадзены атрыбут з'явіўся менавіта ў html5, зараз адпадае выкарыстанне дадатковых скрыптоў для вываду тэксту ў поле, напрыклад у поле пошуку.
<Mark> </ mark> - вылучэнне якога альбо важнага слова ці словазлучэння. Звярніце ўвагу на жоўты фонавы колер.
<Adress> </ adress> - дадзеныя тэгі служаць для вываду адрасы, напрыклад, адрас арганізацыі.
<Video> </ video> - выводзіць відэа на сайце са стандартным плэерам браўзэра.
<Audio> </ audio> - выводзіць аўдыё-запіс на сайце стандартным плэерам браўзэра
Адно з ключавых асаблівасцяў HTML5 і на мой погляд самае важнае - гэта падзел пошукавым робатам ўсіх блокаў па іх значнасці, г.зн. сегментацыя вэб-старонак. У html4 зрабіць гэта было немагчыма, бо стандартны тэг div ня дадае сэнсавай значнасці элементу, які знаходзіцца ўнутры дадзенага тэга. З выкарыстаннем новых элементаў header, article, aside, footer усё мяняецца. Г.зн. груба кажучы, яны «гавораць» пошукавым робатам якім элементам надаваць значэнне, а якія прапускаць. Напрыклад, пошукавы бот лёгка зразумее, што інфармацыя, складзеная паміж тэгамі <footer> </ footer> з'яўляецца капірайтам і падобнай інфармацыяй для наведвальніка.
Элементы, якія ўплываюць на індэксацыю ў пошукавых сістэмах
<article>
Тэг article з'яўляецца адным з найбольш важных пры сегментацыі старонак сайта. Дадзены тэг відавочна паказвае пошукавым сістэмам, дзе знаходзіцца асноўны кантэнт сайта. А мы ўсе ведаем, што кантэнт гэта перш за ўсё тое, за чым прыходзяць наведвальнікі на сайт. Маецца на ўвазе, што ПС будуць максімальна надаваць увагу кантэнту, зняволенаму паміж тэгамі <article> </ article>, адкінуўшы або адсунуўшы на другі план астатнія элементы.
<section>
Элемент section разбівае ўсю разметку на розныя секцыі. Што гэта дае? Пошукавыя робаты добра арыентуюцца на вэб-старонцы, якая добра структураваная. Калі правільна выкарыстоўваць тэг <section>, то можна з лёгкасцю пабудаваць інфармацыйную іерархію дакумента, а гэта ў сваю чаргу паляпшае індэксацыю сайта ў цэлым.
<header>
C дапамогай тэга header пошукавыя робаты лёгка могуць знайсці на сайце лагатып, назва сайта, слоган, галоўную навігацыю (галоўнае меню).
<nav>
Дадзены тэг вызначае навігацыйную структуру на сайце.
спасылкі
У адрозненні ад HTML4 ў HTML5 спасылкі маюць больш значных атрыбутаў.
Вось асноўныя атрыбуты спасылак у HTML5:
alternate - спасылкі на альтэрнатыўныя адрасы адной і той жа старонкі
author - спасылкі, якія маюць дачыненне да аўтара вэб-старонкі
external - спасылкі, якія паказваюць на знешнія рэсурсы
help - спасылкі, вядучыя на старонкі дапамогі
next - спасылка вядучая на наступную частку старонкі
nofollow - спасылка не пацвярджаецца дадзеным сайтам
prev - спасылка вядучая на папярэднюю частку старонкі
Астатнія атрыбуты можаце паглядзець тут .
Вось такі вось невялікі агляд разметкі на HTML5. Што тычыцца мяне, то я даўно перайшоў на вёрстку з выкарыстаннем разметкі HTML5 і большасць шаблонаў на сваіх сайтах ужо перавёў на HTML5, вось толькі вось да дадзенага блога ніяк рукі не даходзяць.
На гэтым усё. Усім пакуль. Убачымся ў наступных пастах.
А вы ўжо перайшлі на HTML5?
праверка арфаграфіі
Што гэта дае?А вы ўжо перайшлі на HTML5?