Основи семантичної верстки на html5

Привіт всім! Ось і почалася довгоочікувана олімпіада. Бажаю всім учасникам великих успіхів і удачі, ну і звичайно ж я дуже вболіваю за Росію, тому що я сам росіянин. А тепер до теми поста. В даній статті поговоримо про сучасну розмітці HTML5, про її переваги і важливості в цілому. Я все ніяк не міг перейти на html5, думав що це тільки нове зовсім, не всі браузери підтримують, зокрема ИЕ 7-8. Але все виявилося не зовсім так.

Отже, давайте розберемо розмітку html5 по кроках і почнемо з самого початку документа - Doctype. Doctype в html5 записується вже набагато простіше, так, що можна легко запам'ятати.

Позначення кодування прописується наступним чином

Відчуваєте різницю? Код став значно легше і запам'ятати також дуже легко. Також при підключенні скриптів і стилів тепер не обов'язково вказувати type.

Далі визначаємо мову:

Даний скрипт також можна і довантажити з сервера Google.

Далі перерахуємо основні структурні елементи:

Читайте також: Font-Face: підключення нестандартних шрифтів

Слід зазначити, що нові елементи html5 мають інлайновую природу, тобто для коректного відображення їх необхідно зробити блоками.

Виходячи з вищевикладеного можна накидати невеликий макет сторінки на html5

Як бачите, у html5 є явна перевага перед html4, як в плані розмітки, так і в плані СЕО. Про СЕО поговоримо нижче.

Крім основних тегів також часто використовуються і ключові слова:
placeholder (placeholder = "Текст") - виводить напис в поле input, а при досягненні тексту він автоматично зникає. Даний атрибут з'явився саме в html5, тепер відпадає використання додаткових скриптів для виведення тексту в поле, наприклад в поле пошуку.

- виділення будь-якого важливого слова або словосполучення. Зверніть увагу на жовтий фоновий колір.

- виводить аудіо-запис на сайті стандартним плеєром браузера

HTML5 і головний виконавчий директор

Одне з ключових особливостей HTML5 і на мій погляд найважливіше - це поділ пошуковим роботом всіх блоків по їх значимості, тобто сегментація веб-сторінок. У html4 зробити це було неможливо, тому що стандартний тег div Не додає смислової значущості елементу, який знаходиться всередині даного тега. З використанням нових елементів header, article, aside, footer все змінюється. Тобто грубо кажучи, вони «говорять» пошуковим роботам яким елементам надавати значення, а які пропускати. Наприклад, пошуковий бот легко зрозуміє, що інформація, яка знаходиться між тегами

є копірайтом і подібною інформацією для відвідувача.

Читайте також: Firebug - незамінний інструмент кожного web-розробника

Елементи, що впливають на індексацію в пошукових системах

Тег article є одним з найбільш важливих при сегментації сторінок сайту. Даний тег явно вказує пошуковим системам, де знаходиться основний контент сайту. А ми всі знаємо, що контент це перш за все те, за чим приходять відвідувачі до вашого сайту. Тут передбачається, що ПС будуть максимально приділяти увагу контенту, укладеним між тегами

, відкинувши або відсунувши на другий план інші елементи.

Елемент section розбиває всю розмітку на різні секції. Що це дає? Пошукові роботи добре орієнтуються на веб-сторінці, яка добре структурована. Якщо правильно використовувати тег

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

C допомогою тега header пошукові роботи легко можуть знайти на сайті логотип, назву сайту, слоган, головну навігацію (головне меню).

Даний тег визначає навігаційну структуру на сайті.

На відміну від HTML4 в HTML5 посилання мають більше значущих атрибутів.

Ось основні атрибути посилань в HTML5:

external - посилання, що вказують на зовнішні ресурси

help - прямі посилання на сторінки допомоги

Решта атрибути можете подивитися тут.

Ось такий от невеликий огляд розмітки на HTML5. Що стосується мене, то я давно перейшов на верстку з використанням розмітки HTML5 і більшість шаблонів на своїх сайтах вже перевів на HTML5, ось тільки ось до даного блогу ніяк руки не доходять.

На цьому все. Бувайте усі. Побачимося в наступних постах.

А ви вже перейшли на HTML5?

Заур Магомедов

У мене ви можете:

Замовити верстку Замовити сайт під ключ

Схожі статті