- DOCTYPE і meta теги в заголовку сторінки
- заголовок сторінки
- Навігація на сторінці
- Контент на сторінці
- оформлення статті
- Сайдбар або колонка з віджетами
- тег section
- Підвал сайту - Footer
- висновок
Сьогодні ми поговоримо про семантику в HTML5. Я вже писав невеликий оглядовий пост про нові семантичні теги в HTML5 . Рекомендую з нею попередньо ознайомитися, перед прочитанням цієї статті. Зараз ми розберемося з цим питанням більш детально, про те як правильно і грамотно складати семантичну структуру HTML5 документа.
У цій статті ми будемо поступово створювати html сторінку, і оформляти її семантичними HTML5 тегами.
Малюнок - Семантична структура для HTML5 сторінки.
DOCTYPE і meta теги в заголовку сторінки
Почнемо зі стандартного шаблону HTML5 документа, і додамо теги meta в head:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Заголовок сторінки </ title> <meta name = "keywords" content = "Ключові слова, і, фрази, через, кому "> <meta name =" description "content =" Опис контенту сторінки, 1-2 пропозиції. "> </ head> <body>Я додав тег <meta name = "keywords" content = ""> який відповідає за ключові слова. І тег <meta name = "description" content = ""> який відповідає за опис сторінки. Для SEO оптимізації ці теги обов'язкові. Також обов'язково коректне заповнення тега <title>. Title сторінки повинен бути унікальним для всього сайту, і містити в назві всю суть сторінки для якої він зазначений.
Підемо далі. У HTML5 з'явилися нові теги, які використовуються для того щоб робити семантичну розмітку документа. Це теги header, nav, main, article, aside, footer і т.д. За відображенню вони працюють також як і звичайні <div> теги, тобто це блокові елементи. Але якщо <div> не має семантичного навантаження, то header, nav, main і інші - вже потрібно використовувати тільки осмислено.
заголовок сторінки
Шапка сторінки оформляється в тег header. Зауважте що заголовок сторінки пишемо тегом h1.
<! - Header сторінки -> <header> <h1> Site title </ h1> </ header>Якщо у нас є ще і слоган поруч із заголовком, то поміщаємо його в p, div або span.
<! - Header сторінки -> <header> <h1> Site title </ h1> <p> site slogan </ p> </ header>Зауваження з приводу тега H1
Слід зауважити що в HTML5 тег H1 використовується для вказівки заголовка контейнера в якому він знаходиться (це може бути header, section, article і т.д.)
До появи HTML5 тегів семантика була дещо іншою і відрізнялася. Так в HTML4 на сторінці міг бути тільки один заголовок H1! Як правило це був заголовок статті або заголовок сторінки (наприклад якщо це сторінка рубрики на якій відображаються кілька статей.) H2 використовувався для підзаголовків, або для розділів головної статті. H3 для під розділів і так далі.
Навігація на сторінці
Оформлення головного меню по сайту повинно полягати в тег nav. Також слід пам'ятати що хорошою практикою вважається оформляти навігацію елементами списку.
<! - Головна Навігація по сайту -> <nav> <ul> <li> <a href="#"> Home </a> </ li> <li> <a href="#"> Portfolio < / a> </ li> <li> <a href="#"> Gallery </a> </ li> <li> <a href="#"> Contacts </a> </ li> </ ul > </ nav>Контент на сторінці
Основне вміст сторінки оформляється в тег main. Це може бути одна стаття, або кілька превью статей якщо мова йде про сторінку блога з декількома записами. Ніколи не кладіть сайдбар, хедер сторінки, футер або головну навігацію в тег main!
<! - Основне вміст сторінок -> <main> ... основний контент сторінки ... </ main>оформлення статті
Тег article - служить для обгортки статей. Загалом цей тег містить в собі блок контенту, який може бути вийнятий з контексту сторінки, і використаний окремо в іншому місці. Це може бути стаття (повний Тескт статті або превью), пост на форумі, і т.п.
На прикладі нижче я показав оформлення статті в контексті, всередині тега main. У статті поставлено блок header з заголовком статті. Дата публікації статті задана спеціальним тегом time, який відображається як звичайний inline елемент. У тега time є спеціальний атрибут в якому час публікації повинно бути задано в машинному форматі. Це може бути тільки дата datetime = "2015-09-30" або із зазначенням годин хвилин і секунд datetime = "2015-09-30T15: 25: 55". Параметр pubdate вказує що стаття була і опублікована в той же час що і написана. Якщо це новина, то може бути таке що час новини одне, а час публікації інше, для цього необхідно вказати два рази тег time, і поставити pubdate тільки в тому тезі де вказано час публікації.
<Main> ... <! - Стаття -> <article> <! - Шапка статті якщо в шапці у нас більше ніж заголовок -> <header> <! - Заголовок статті -> <h1> Article title </ h1> <! - Дата публікації статті -> <time datetime = "2015-09-30T15: 25: 55" pubdate> 30 Сентября </ time> </ header> <p> Lorem ipsum dolor sit amet , consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde? </ P> <! - Підзаголовок сторінки -> <h2> Article sub-title </ h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde? </ P> <footer> <a href="#"> Читати далі </a> <a href="#"> Коментарі </a> </ footer> </ article> ... </ main>З прикладу вище видно що всередині статті були використані теги header і footer щоб виділити заголовок і нижній колонтитул статті.
Сайдбар або колонка з віджетами
Для кожного окремого елемента сайдбара використовуємо блок aside. Усередині нього заголовок оформляємо тегом h1. Так колонка з сайдбарі може виглядати наступним чином:
<! - Сайдбар -> <div class = "sidebar"> <! - Віджет в сайдбарі -> <aside> <h1> Widget title </ h1> ... </ aside> <! - Віджет в сайдбарі -> <aside> <h1> Останні записи </ h1> ... </ aside> <! - Віджет в сайдбарі -> <aside> <h1> Популярні коментарі </ h1> ... < / aside> </ div>тег section
Тег section - використовується для представлення групи або секції тематично пов'язаного контента.Его використання схоже на article з головною відмінністю в тому що допускається відсутність сенсу вмісту всередині елемента <section> поза контекстом самої сторінки. Рекомендується використовувати теги (<h1> - <h6>) для позначення теми секції.
Як приклад можна навести статтю, яку ви зараз читаєте, можна було б кожен параграф обернути в тег <section>. Наприклад тегом section можна виділяти блоки контенту на Лендінзі. Звучить схоже на визначення div елементу, який часто використовується як контейнер для контенту. Різниця в тому що div не має семантичного значення, і він не говорить ні про що про контент знаходиться всередині нього. Тег section, навпаки використовується щоб чітко показати що контент всередині нього пов'язаний за змістом. Ви можете замінити деякі свої div теги на section, але завжди відповідайте собі на питання: «Цей контент пов'язаний між собою чи ні?»
Приклад використання тега section в списку з перерахуванням міст:
<H1> An Event Apart </ h1> <section> <header> <h2> Cities </ h2> </ header> <p> Join us in these cities in 2010 року. </ P> <section> <header> < h3> Seattle </ h3> </ header> <p> Follow the yellow brick road. </ p> </ section> <section> <header> <h3> Boston </ h3> </ header> <p> That's Beantown to its friends. </ p> </ section> <section> <header> <h3> Minneapolis </ h3> </ header> <p> It's so <em> nice </ em>. </ p> < / section> </ section> <small> Accommodation not provided. </ small>Підвал сайту - Footer
Підвал сайту оформляється тегом <footer>
<! - Підвал сайту -> <footer> <p class = "copyright"> © 2015 Rightblog.ru Copyright </ p> </ footer>висновок
Для перевірки структури сторінки можна використовувати інструмент HTML5 outliner . Він показує структуру сторінки блокам і заголовкам.
Семантика в HTML5 не обмежується наведеними вище в статті тегами. Але використовуючи наведені приклади ви можете освіжити свою розмітку, і зробити сайт більш дружнім до пошукових систем, що позначиться на більш високий рейтинг сайту в пошуковій видачі.
В продовження теми можна вивчити інші нові HTML5 теги. А також мікро формати для оформлення та структуризації даних, наприклад такі як schema.org
Важливе зауваження щодо використання HTML5 тегів. У специфікації не зазначені жорсткі правила щодо використання семантичних тегів, вказані лише рекомендації п їх використання. Якщо ви не розумієте або не знаєте де і який HTML5 тег використовувати, краще використовуйте div - щоб не нашкодити і не порушити структуру документа.
Статті і матеріали по темі:
http://html5forwebdesigners.com/semantics/
http://habrahabr.ru/post/214407/
http://www.adobe.com/devnet/archive/dreamweaver/articles/understanding-html5-semantics.html
http://www.smashingmagazine.com/2011/11/html5-semantics/
http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx
http://www.w3schools.com/html/html5_semantic_elements.asp
Adipisci beatae eaque unde?
Ви можете замінити деякі свої div теги на section, але завжди відповідайте собі на питання: «Цей контент пов'язаний між собою чи ні?