Основи семантичної верстки на 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?