Привіт всім! Ось і почалася довгоочікувана олімпіада. Бажаю всім учасникам великих успіхів і удачі, ну і звичайно ж я дуже вболіваю за Росію, тому що я сам росіянин. А тепер до теми поста. В даній статті поговоримо про сучасну розмітці 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?
Заур Магомедов
У мене ви можете:
Замовити верстку Замовити сайт під ключ