Навигация по статье:
Приветствую Вас, дорогой читатель!
В моей прошлой статье я описывала основные типы вёрстки, которые используются на сегодняшний день. В сегодняшней статье я хочу рассказать про ещё один тип вёрстки, который ещё не так распространён, но он по сути объединяет в себе два предыдущих типа вёрстки и дополняет их. Вероятно что в ближайшем будущем именно этот тип вёрстки станет основным.
Речь идёт о семантической вёрстке.
Что такое семантическая вёрстка?
Вообще семантика занимается изучением смыслового значения отдельных слов, фраз и команд языка.
То есть семантическую вёрстку, говоря человеческим языком, можно ещё назвать смысловой вёрсткой.
Она основывается на том что каждый тег HTML имеет своё смысловое значение.
Например, для того чтобы обозначать в коде заголовки придумали аж 6 тегов заголовков.
<H1>, <H2>, <H3>, <H4>, <H>, <H6>.
Для создания списков существуют специальные теги маркированных и нумерованных списков <ul> и <ol>
Для создания абзацев – тег <p> и так далее.
Если углубиться в HTML5, то там дела обстоят ещё интереснее, так как стандарт HTML5 предполагает использование ещё целого ряда новых тегов, и каждый из этих тегов имеет свой смысл.
Например:
Тег <nav> — должен использоваться для создания навигации на сайте
Тег <article> — для вывода контента (статьи, новости и т.д.)
Тег <header> — для вёрстrи верзней части сайта (шапки)
Тег <footer> — для вёрстки нижней части сайта (подвала) и т.д.
То есть для того чтобы сверстать заголовок страницы или блока нужно использовать тег заголовка <H1>, <H2> и т.д. а не теги <div> или <span>, для того чтобы сверстать меню нужно использовать список либо тег <nav>, а не блоки <div> и так далее.
Для того чтобы лучше разобраться в семантической вёрске давайте рассмотрим и сравним несколько примеров.
Сравнение семантической вёрстки и обычной.
Вёрстка меню
Семантическая вёрстка
|
1 2 3 4 5 6 7 8 9 10 |
<header> <h1>Здесь название страницы</h1> <nav> <a href="#">Страница1</a> <a href="#">Страница2</a> <a href="#">Страница3</a> <a href="#">Страница4</a> </nav> </header> |
Не семантическая (обычная) вёрстка
|
1 2 3 4 5 6 7 8 9 10 |
<div class="header"> <span> Здесь название страницы </span> <div class=”menu”> <a href="#" class=”item”>Страница1</a> <a href="#" class=”item”>Страница2</a> <a href="#" class=”item”>Страница3</a> <a href="#" class=”item”>Страница4</a> </div> </div> |
При задании определённых стилей в CSS результат будет одинаковым, однако количество кода получается немного меньше. Плюс сам код выглядит более аккуратно, наглядно и понятно чем при не семантической вёрстке.
Вот ещё один пример:
Семантическая вёрстка
|
1 2 3 4 5 6 |
<section class="dark"> <article> <h2>Это заголовок статьи</h2> <p>Cюда пишем текс статьи</p> </article> </section> |
Обычная вёрстка вёрстка
|
1 2 3 4 5 6 |
<div class=”dark”> <div class="article"> <div class="title">Это заголовок статьи</div> <div class="text">Cюда пишем текс статьи</div> </div> </div> |
Видите разницу?
Семантический код более удобно читается не только людьми, но и поисковыми роботами. Поэтому вполне вероятно что в будущем одной из рекомендаций или даже требований поисковых систем к сайтам будет использование семантической вёрстки.
Уже сегодня они рекомендуют использовать семантическую микроразметку, для того чтобы поисковым роботам было легче ориентироваться в коде страницы.
Семантическая вёрстка и СSS
Что же касается описания стилей для семантической вёрстки, то здесь всё очень просто. Вы просто пишете название тега и приписываете ем определённые классы.
Например:
Семантическая вёрстка
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<header> <h1>Здесь название страницы</h1> header { width: 90%; margin:auto; } h1{ text-align:center; font-size: 2em; } nav { background:#f1f1f1; color:#777; } </header> |
Не семантическая вёрстка
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div.header{ width: 90%; margin:auto; } div.header span{ text-align:center; font-size: 2em; } div.menu { background:#f1f1f1; color:#777; } |
На самом деле в семантической вёрстке нет ничего сложного. Наоборот местами даже проще чем в случае с обычной вёрсткой.
Достоинства и недостатки семантической вёрстки
Достоинства:
- позволяет сократить количество кода
- делает код страницы более понятным и удобочитаемым как для людей так и для поисковых роботов.
- позволяет структурировать код
- за счёт уменьшения и структуризации кода облегчается загрузка страницы
Недостатки:
- требует определённых знаний и навыков
- не поддерживается старыми версиями браузеров (в особенности всеми любимый Internet Explorer)
Как видите достоинств больше, а проблемы с недостатки вполне решаемы.
Например для того чтобы заставить старые версии Internet Explorer понимать теги HTML5
Достаточно подключить специальный скрипт через условные комментарии.
Ну а что касается знаний и умений – то это дело наживное :)
Надеюсь, мне удалось помочь Вам разобраться в отличительных особенностях семантической вёрстки и Вы сделали для себя определённые выводы.
Желаю Вам успешной реализации любого типа вёрстки и до встречи в следующих статьях.
С уважением Юлия Гусарь
Формально, такой код подходит популярному нынче требованию «дивной» или «бестабличной» вёрстки. Таблиц нет, див есть и даже внятно именован, код вполне может нормально отображаться во всех браузерах. Чего же боле?
@iofjuupasli, с языка снял. Я вижу в семантической вёрстке только одно практическое преимущество — облегчение поддержки. Если html семантичный, то беглым взглядом можно понять, что декларируется в коде, а как теоретический концепт она прекрасна.
Согласна с Вами!