Семантичний html5 - воркхак

Корисний чіт для створення семантичної розмітки, такі собі кращі практики хтмл5

Вперед!

Нові стандарти і важливість семантики

HTML5 — наступна версія мови HTML. Специфікації HTML5 не обмежуються тільки розміткою і включають в себе низку веб-технологій, котрі у сукупності формують відкриту Веб-платформу — програмне оточення для роботи крос-платформових застосунків, здатних взаємодіяти з обладнанням, і які підтримують засоби для роботи з відео, графікою і анімацією, що надає розширені мережеві можливості.

Вікіпедія про HTML5

Що стосується розмітки, а ми саме про неї і поговоримо, то нова специфікація спробувала навести лад серед елементів сторінки, а точніше надати їм певного семантичного значення. Забулись ті часи коли весь контент був розташований в стовбцях таблиць, пройшли часи коли весь контент обертався в одноманітні div-и з відповідними класами.
На основі статистичного аналізу тих самих імен класів, що надавались контейнерам і були впроваджені нові елементи розмітки, нові теги хтмл5. Вони дозволили створювати розмітку, яка точно передавала би вміст (контент) — семантичну розмітку.

Семантичний HTML — спосіб написання HTML, що віддає перевагу підкресленню смислу закодованої інформації радше за її подання (зовнішній вигляд).

Вікіпедія про семантичний хтмл

І це добре, адже правильна семантична структура сторінки являється основою для подальшої ефективної стилізації і надання інтерактивності. Взаємодія з веб додатком стає зручнішою, причому не тільки для користувача, а і для пошукових машин. Тож з теоретичними питаннями ми розібрались, з'ясували що і до чого, тепер можемо перейти власне до невеликої кульмінації - воркхаку по написанню семантичної розмітки. Це всього лиш одна картинка.

Люблю підхід до подачі інформації в вигляді різного роду лайфхаків, читів, мануалів і шпаргалок - вижимки головного являються надзвичайно корисними в щоденній роботі і навчанні.

Семантична хтмл5 розмітка сторінки
Розмітка сторінки

І на цьому наче все, оригінальне зображення, макет в форматі PSD, а також пдф для друку ви можете знайти на цсс трікс. Детальніше про семантику і хтмл5 можете прочитати в джерелах, зазначених вище. А якщо знадобиться більше і глибше - тільки першоджерела, тільки хардкор: http://www.w3.org/standards/


Поділитись в соцмережах

Сподобався пост? — розкажіть про нього своїм друзям