Семантическая верстка

Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div id="header">). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.

Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header">, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны ‎глобальные атрибуты.

Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:

• Мета содержимое
• Потоковое содержимое
• Секционное содержимое
• Заголовочное содержимое
• Текстовое содержимое
• Встроенное содержимое
• Интерактивное содержимое

Описание HTML5-элементов

• Содержание:
• 1. Элемент <header>
• 2. Элемент <nav>
• 3. Элемент <article>
• 4. Элемент <section>
• 5. Элемент <aside>
• 6. Элемент <footer>
• 7. Элемент <address>
• 8. Элемент <main>
• 9. Элемент <figure>
• 10. Элемент <figcaption>
• 11. Элемент <time>
• 12. Элемент <mark>
• 13. Элемент <bdi>
• 14. Элемент <wbr>
• 15. Элементы для описания Восточно-Азиатских символов

1. Элемент <header>

Категории контента: потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.

<header>   <h1>Site description</h1>   <nav>   <ul>   <li><a href="">About</a>   <li><a href="">Forum</a>   <li><a href="">Download</a>   </ul>   </nav>  </header>

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

2. Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое.
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

<nav>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

В качестве элементов панели навигации можно использовать не только элементы списков:

<nav>   <p><a href="">...</a></p>   <p><a href="">...</a></p>  </nav>

Также можно добавлять заголовки внутрь элемента:

<nav>   <h2>...</h2>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

3. Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <header>   <h2>...</h2>   </header>   <p>...</p>   <footer>   Опубликовано в категории<a href="">Музыка</a>.   <a href="">0 комментариев</a>   </footer>  </article>

4. Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <h1>...</h1>   <section>   <h2>...</h2>   <p>...</p>   </section>   <section>   <h2>...</h2>   <p>...</p>   </section>   <p>...</p>  </article>

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>

<section>   <h1>Заметки о природе</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>  <section>   <h1>Исторические заметки</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>

5. Элемент <aside>

Категории контента: потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

<aside>   <h2>...</h2>   <p>...</p>  </aside>

<aside>   <h2>...</h2>   <p>...</p>   <blockquote>   <p>...<cite>...</cite>...</p>   <p>...</p>   </blockquote>  </aside>

6. Элемент <footer>

Категории контента: потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

<footer>   <address>...</address>   <small>@2014...</small>  </footer>

7. Элемент <address>

Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.

8. Элемент <main>

Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

<body>  <header>   <h1>Пудель</h1>   <nav>   <ul>   <li><a href="index.html">Главная</a></li>   <li><a href="about.html">О породе</a></li>   <li><a href="health.html">Здоровье</a></li>   </ul>   </nav>   </header>   <main>   <section>   <header>   <h2>О породе</h2>   <nav>   <ul>   <li><a href="#basic">Разновидности</a></li>   <li><a href="#app">Внешний вид<.  

 ости</a>   <a href="#app">Внешний вид</a>   <a href="#temp">Характер</a>   </footer>   </section>   </main>   <footer>   <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>   </footer>  </body>

9. Элемент <figure>

Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..

<figure>   <img src="picture.jpg" alt="Осень">   <figcaption>Осенний лес</figcaption>  </figure>

Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:

margin-left: 40px;  margin-right: 40px;  margin-top: 1em;  margin-bottom: 1em;

10. Элемент <figcaption>

Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.

11. Элемент <time>

Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

<time datetime="2014-09-25"> 25 Сентября 2014</time>

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>

12. Элемент <mark>

Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

13. Элемент <bdi>

Категории контента: потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.

14. Элемент <wbr>

Категории контента: потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.

15. Элементы для описания Восточно-Азиатских символов

Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.

Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.

Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.

html5book.ru

Что такое семантическая верстка?

Семантическая верстка — это изучение значений слов и выражений. В html ничто иное как написание элементов со смыслом. Семантический элемент четко описывает свое значение как для браузеров, так и для разработчиков.

Давайте взглянем на отличие семантического элемента от обычного.

Например div или span — простые элементы, глядя на них мы не можем понять какого типа контент в них содержится. Это может быть просто текст, картинка, или другие теги.

Теперь семантические form, table, и article здесь уже совсем другое дело. Только прочитав названия мы можем с легкостью понять что внутри этих тегов. Пример верстки обычной и семантической:

Надеюсь на этом этапе вы уловили разницу между типами тегов. Хочу сразу отметить, что это не единственные теги, их много, а с появлением html5 стало еще больше. Дальше мы познакомимся с ними.

Почему семантическая верстка сайта так важна?

Хорошо написанный CSS может скрыть от глаз пользователя плохую верстку html. Но мы не можем скрыть ее от поисковых роботов, плагинов браузера, читалок и других инструментов и девайсов.

Исходя из этого семантическая верстка является обязательной, если вы хотите чтобы ваш сайт был доступен любым посетителям с разнообразных устройств, и хорошо ранжировался в поисковых системах. Не стоит забывать и о тексте, который тоже должен быть хорошо структурирован, чтобы пользователям было комфортно его читать.

Как реализовать семантическую верстку страницы?

Существует одно единственное правило, при написании мы должны использовать теги которые в конкретном случае могут наиболее точно передать значение и тип контента, поисковым роботам и программам. Если нет подходящих тегов, то используем обычные т.к. div

Мы можем сгруппировать наиболее распространенные и важные элементы на четыри группы:

• Теги структуры документа
• Текстовые теги
• Медиа теги
• Корреляционные теги

Теги структуры документа

В прошлом элемент div был основным с помощью которого создавалась структура html документа, W3C обратили внимание на то, что разработчики использовали в названиях id и class слова header, footer, menu и т.д. Которые описывали смысловое содержимое элемента. Так и появились новые семантические теги в HTML5.

header: Элемент который используется как контейнер для логотипа, названия сайта и меню. Также для определения заголовков, в статьях и т.д.

footer: Используется в основном для описания нижней части страницы, обычно содержит информацию об авторе, контакты, копирайт, дополнительное меню и кнопку которая ведет к верху страницы.

main: Элемент высокого уровня, используется как контейнер для уникального содержимого на странице, которое не повторяется на других страницах сайта.

nav: элемент для создания навигации по сайту. nav обычно находится в header (хедере) и footer (футере), а также может быть использован в aside (сайдбаре) сайта.

section: Описывает разделы документа, должен содержать в себе заголовок h1 — h6

aside: Используется для идентификации контента, который связан с основным контентом на странице. Например, aside элемент может содержать определение термина в статье, рекламные объявления, дополнительную информацию на странице.

article: Это самодостаточный элемент который используется для описания статьи сайта, блога так же публикации на форуме. Может содержать элемент header и footer.

Текстовые теги

Существует множество тегов для работы с текстом на странице, но не все они семантические. К примеру можно использовать span для стилизации текста, но информацию о содержимом браузеру он не передает.

h1, h2, h3, h4, h5 и h6: используются для обозначения заголовков. Самый высокий уровень, или самым главным, заголовком является h1, за ним идут в порядке убывания важности заголовки уровня h2 — h6.

strong: тег придает тексту важности, как правило, отображается полужирным шрифтом.

mark: используется для выделения текста в определенном контексте. Например, он может быть использован, чтобы выделить каждое вхождение ключа поиска на странице результатов поиска.

cite: тегом обычно помечают названия книг, песен, фильмов, тв-передач.

blockquote и q: элементы используются для вставки цитаты из текста другого источника.

time: тег может быть использован, чтобы сказать браузеру, поисковикам и другим устройствам, что конкретная часть контента представляет собой время и дату.

Медиа теги

HTML5 также включает в себя три тега, которые определяют тип медиа контента. Теги подсказывают браузеру как именно отображать данный контент. а так же они придают смысловое значение для контента.

audio: Используется для добавления одного или нескольких аудио на страницу, отображается в виде аудио плеера.

video: подобен аудио тегу, но используется для добавления видео контента в документ.

picture: Элемент picture дает разработчикам возможность более гибко отображать картинку на странице. Часто используется в адаптивной верстке, так как может содержать сразу несколько картинок которые отображаются при определенных медиа условиях.

Корреляционные теги

Некоторые теги используются для создания связи между другими элементами. К примеру тег маркированного списка ul говорит браузеру что элементы li связаны и должны появляться в определенном порядке. Есть еще теги:

ol: тег нумерованного списка, аналогичен с тегом ul

figure: используется для группировки такого контента как картинки, графики, может содержать заголовок figcaption.

address: описывает контактную информацию на странице. И связывает ее с автором статьи или страницы.

Если вы новенький в html то попробуйте применить все эти теги для создания семантической верстки страницы уже в следующем проекте. Не используйте элементы если не уверены нужен ли он там или нет, использование правильного тега очень важный момент. Лучше потратьте немного времени для глубокого его изучения. Это даст свои плоды в будущем.

comments powered by HyperComments

webupblog.ru

Итак, в данной статье, посвященной семантической верстке, я постараюсь раскрыть все факты этой темы:

 

 

• Использование HTML тегов по их назначению
• Правильные наименования элементов
• Группировка элементов
• Семантическая верстка и валидность
• Разделение контента и оформления
• Почему так важна семантика

 

 

Семантика в HTML верстке — это использование HTML тегов по их назначению, правильное их наименование и их группировка.

 

Понятие семантической HTML верстки стало актуальным с увеличением возможностей CSS. Раньше для реализации сложной структуры страницы верстальщики делали табличную верстку. Все блоки, относящиеся к структуре, и функциональные блоки размещались в ячейках таблички. С развитием CSS и началом его поддержки основными браузерами, появилась возможность делать структуру при помощи блоков <div>(блочная верстка) с обтеканием и позиционированием. Теперь таблицы рекомендуют использовать только для верстки табличных данных, например, прайсов. Нынче редко кто верстает таблицами, так как у блочной верстки есть множество преимуществ. Подробнее о блочной и табличной верстке можно узнать из статьи — Плюсы и минусы табличной и блочной верстки.

 

Использование HTML тегов по их назначению

 

Назначение и смысловая нагрузка HTML тегов описаны в DTD (Document Type Definition), который прописан в <!DOCTYPE>, либо в спецификации соответствующей версии HTML. Так, например, тег h1 описывает заголовок документа. Заголовков есть шесть видов h1-h6, которые отличаются размерами и значимостью(в стандартных стилях они отличаются размерами, а отличие на вашем сайте должны сделать вы сами). Думаю, с заголовком все понятно. Есть также ссылки <a>, списки <ul> и <ol>, таблички <table> и много других. Если есть задача сделать таблицу, то каждый, не задумываясь, будет использовать тег <table>. Но бывают и спорные моменты. Например, меню относится к спискам ссылок. А значит, меню нужно верстать при помощи ненумерованного списка <ul> (для HTML5 есть специальный тег <menu>).

 

<ul>

<li><a href=»#»>Главная</a></li>

</ul> 

 

Для другого примера семантической верстки вернемся обратно к ссылкам. Если в контенте есть ссылка на другую страницу, то ее мы просто делаем тегом <a>. Это понятно. А вот, например, есть кнопка со стилями cursor:pointer, которая имеет состояния :hover и :active, а при клике на нее всплывает окошко с какой-то формой. Ее тоже делать ссылкой? Нет! Ведь при клике на нее мы не переходим на другую страницу. Потому для такого элемента(он называется активным — Оформление активных элементов) нужно использовать какой-то нейтральный тег — <div> или <span>.

 

Верстая форму, вам наверняка нужно будет делать подписи к полям формы — «Ваше имя» или «Введите email». Эти подписи нужно делать при помощи тега <label>. Именно он предназначен для данного элемента. К тому же, помимо семантики, вы получите и правильный функционал. Например, подписи в элементам <input type=»checkbox»> и <input type=»radio»>, при клике на них, будут делать активными(выделенными) соответствующие элементы управления.

 

Возможности CSS позволяют из почти любого элемента сделать визуально другой вид, менять элементы местами, скрывать их и т.д. Для проверки правильности выбора тега, попробуйте отключить CSS. Если заголовок остался похожим на заголовок, список на список, а ссылка на ссылку, то вы идете в правильном направлении. 

 

Правильные наименования элементов

 

Речь идет о задании правильных названий классам и идентификаторам. Напомню, что разница между class(класс) и id(идентификатор) заключается в том, что идентификатор должен быть уникальным, то есть единственным на странице. Вообще, идентификаторами нужно пользоваться осторожно. Их чаще используют для обращения к ним из скриптов или при работе с формами. Потому желательно не задавать элементам идентификаторы без особой необходимости. 

 

Так вот, вернусь к правильным наименованиям. Я уже приводила пример с меню и тегом <ul>, ему можно задавать классы menu, main_menu и т.д. Также и другим элементам — header, footer, content, breadcrumbs(хлебные крошки), title, search. То есть, названия должны быть логичными и интуитивно понятными. Это также поможет ориентироваться в вашем коде другим людям и легче запоминать классы элементов. 

 

Группировка элементов

 

HTML страница в общем случае должна быть поделена на блоки — header, footer, menu, left, right. Эти блоки делятся не только для красоты, но и по функциональности. В шапке сайта обычно лого компании, девиз, контакты — вся самая важная информация сайта. В контентной части — статья. Это самая важная информация данной страницы. А в боковой части — дополнительная информация. Это может быть список категорий, материалы по теме, другая информация. Страница сайта не может быть построена из простого набора блоков, они должны быть в правильном порядке и иметь четкую и правильную структуру.

 

Семантическая верстка и валидность

 

Также семантика связана и с валидностью. Тег <a> не может содержать другого тега <a>, в строчный элемент не может содержать блочный. Если ваша страница не прошла проверку на валидность, то скорее всего у нее проблемы и с семантикой.

 

 Разделение контента и оформления

 

Ну и последнее, что я хочу сказать, — важно разделять контент страницы и ее оформление. Для этого достаточно просто вынести все CSS стили в отдельный CSS файл, а скрипты — в JavaScript файл. Картинки должны быть на странице только в роли картинок — в теге <img> с атрибутом alt. А все изображения, относящиеся к оформлению, стоит сделать в виде блоков с фоновым изображением.

 

Не стоит прописывать стилизацию элемента в теге style, если нет особой необходимости. Ведь теперь есть псевдоклассы, при помощи которых вы можете выбрать элементы по их порядковому номеру, четные и нечетные, первые и последние.Также не стоит прописывать стили в атрибутах, типа width или color. Это было актуально при табличной верстке, сейчас это можно делать проще и красивее.

 

Почему так важна семантика верстки

 

 Семантика HTML страницы нужна не ради «галочки» или хорошей репутации. Она важна для дальнейшего удобного использования сайта посетителями и для раскрутки сайта.

 

Правильная разметка страницы поможет пользователям с ограниченными возможностями пользоваться вашим сайтом. Программы, которые считывают данные с HTML страницы, ориентируются на используемые теги. Например, правильная структура таблицы дает возможность программе называть данные в соответствии с их расположением в таблице — у данной строки значение такой-то колонки равно такому-то значению.

 

Ну а для раскрутки сайта польза семантики, думаю, ясна. Поисковый робот первым делом ищет на странице заголовок по тегу <h1>. Ему будет сложно это сделать ,если ваш заголовок не находится в теге <h1>! 🙂 Также важно правильное оформление меню, хлебных крошек. Очередной раз напомню, что не обойтись без атрибутов title для ссылок и alt для картинок. Это нужно и для семантики, и для валидности, и для юзабилити.

 

 

kate-land.net

<section>

Тег <section> определяет раздел страницы, в котором размещается логически связанная информация, как правило, имеющая свой заголовок.

Каждый раздел может иметь свои собственные теги <header> и <footer>, включающие в себя свои собственные заголовки.

<header>

Тег <header> определяет верхнюю часть страницы или элемента. Он может содержать заголовки, но это не является обязательным. Есть лишь одно ограничение использования <header> он не должен содержать сам себя и элемент <footer>.

<nav>

Для создания меню навигации не веб-странице в HTML5 был добавлен тег <nav>. Он предназначен для содержания гиперссылок, ведущих на другие страницы или другую часть документа.

<article>

Тег <article> используется для разделения раздела страницы на логические блоки, блок должен быть связан с общим разделом, но иметь свой собственный смысл и быть отдельной логической единицей страницы.

<aside>

Для создания небольшой области на странице, в стороне от общего содержимого, используется тег <aside>. Он нужен для вынесения информации в отдельный блок, его содержимое обычно не относится к основной теме страницы, а лишь дает дополнительную информацию, к какой-либо ее части.

<footer>

Тег <footer> используется для определения нижнего колонтитула страницы или элемента. Он не может содержать в себе <header> и определять у себя нижний колонтитул.

Использование новых тегов

Хотя новые HTML-элементы можно использовать уже сейчас, они не всегда будут понятны старым версиям браузеров. В старых браузерах новые HTML-теги, используемые для семантической разметки, не поддерживаются должным образом и могут быть отображены в качестве строчных элементов. Для устранения этой проблемы нужно будет явно указать, что они являются блочными элементами:

  <style>   section, header, nav, article, aside, footer { display: block; }  </style>  

В новых версиях браузеров этот код не окажет никакого влияния на отображение элементов на веб-странице, но при этом он послужит запасным вариантом правильного отображения элементов в старых версиях браузеров, которые, как показывает практика, могут использоваться пользователями еще довольно долго (если вам интересно, почему, для корректной работы новых элементов, нужно указать, что все они являются блочными, то об этом вы можете узнать в нашем CSS справочнике в описании свойства display).

К сожалению представленный CSS-код не сможет помочь браузеру Internet Explorer 8 и его более ранним версиям корректно отображать семантические элементы. Для корректной обработки новых семантических элементов во всех старых версиях IE нам придется прибегнуть к помощи JavaScript. Просто добавьте следующий код в элемент <head>, и старые версии IE будут корректно обрабатывать новые элементы:

  <script>   document.createElement("section");   document.createElement("header");   document.createElement("nav");   document.createElement("article");   document.createElement("aside");   document.createElement("footer");  </script>  

puzzleweb.ru

Что такое семантическая вёрстка?

Вообще семантика занимается изучением смыслового значения отдельных слов, фраз и команд языка.

То есть семантическую вёрстку, говоря человеческим языком, можно ещё назвать смысловой вёрсткой.

Она основывается на том что каждый тег HTML имеет своё смысловое значение.

Например, для того чтобы обозначать в коде заголовки придумали аж 6 тегов заголовков.

<H1>, <H2>, <H3>, <H4>, <H>, <H6>.

Для создания списков существуют специальные теги маркированных и нумерованных списков <ul> и <ol>

Для создания абзацев – тег <p> и так далее.

Если углубиться в HTML5, то там дела обстоят ещё интереснее, так как стандарт HTML5 предполагает использование ещё целого ряда новых тегов, и каждый из этих тегов имеет свой смысл.

Например:

Тег <nav> — должен использоваться для создания навигации на сайте

Тег <article> — для вывода контента (статьи, новости и т.д.)

Тег <header> — для вёрстrи верзней части сайта (шапки)

Тег <footer> — для вёрстки нижней части сайта (подвала) и т.д.

То есть для того чтобы сверстать заголовок страницы или блока нужно использовать тег заголовка <H1>, <H2> и т.д. а не теги <div> или <span>, для того чтобы сверстать меню нужно использовать список либо тег <nav>, а не блоки <div> и так далее.

Для того чтобы лучше разобраться в семантической вёрске давайте рассмотрим и сравним несколько примеров.

Сравнение семантической вёрстки и обычной.

Вёрстка меню

Семантическая вёрстка

Не семантическая (обычная) вёрстка

При задании определённых стилей в CSS результат будет одинаковым, однако количество кода получается немного меньше. Плюс сам код выглядит более аккуратно, наглядно и понятно чем при не семантической вёрстке.

Вот ещё один пример:

Семантическая вёрстка

Обычная вёрстка вёрстка

Видите разницу?

Семантический код более удобно читается не только людьми, но и поисковыми роботами. Поэтому вполне вероятно что в будущем одной из рекомендаций или даже требований поисковых систем к сайтам будет использование семантической вёрстки.

Уже сегодня они рекомендуют использовать семантическую микроразметку, для того чтобы поисковым роботам было легче ориентироваться в коде страницы.

Семантическая вёрстка и СSS

Что же касается описания стилей для семантической вёрстки, то здесь всё очень просто. Вы просто пишете название тега и приписываете ем определённые классы.
Например:

Семантическая вёрстка

Не семантическая вёрстка

На самом деле в семантической вёрстке нет ничего сложного. Наоборот местами даже проще чем в случае с обычной вёрсткой.

Достоинства и недостатки семантической вёрстки

Достоинства:

• позволяет сократить количество кода
• делает код страницы более понятным и удобочитаемым как для людей так и для поисковых роботов.
• позволяет структурировать код
• за счёт уменьшения и структуризации кода облегчается загрузка страницы

Недостатки:

• требует определённых знаний и навыков
• не поддерживается старыми версиями браузеров (в особенности всеми любимый Internet Explorer)

Как видите достоинств больше, а проблемы с недостатки вполне решаемы.

Например для того чтобы заставить старые версии Internet Explorer понимать теги HTML5

Достаточно подключить специальный скрипт через условные комментарии.
Ну а что касается знаний и умений – то это дело наживное 🙂

Надеюсь, мне удалось помочь Вам разобраться в отличительных особенностях семантической вёрстки и Вы сделали для себя определённые выводы.

Желаю Вам успешной реализации любого типа вёрстки и до встречи в следующих статьях.

С уважением Юлия Гусарь

impuls-web.ru

Семантика?

Семантика (фр. sémantique от греч. σημαντικός — обозначающий)

Понятие «семантика» пришло к нам из лингвистики в несколько сокращённом значении для того, чтобы можно было применить его к HTML-вёрстке. Прежде всего, семантика в вёрстке — это совокупность смысловых отношений, возникающих в документе. Однако для существования таких отношений необходим документ, который возникает благодаря внедрению HTML-разметки в простой текст.

Сайт, страница, документ

Для более уверенного разговора на эту тему, будет полезно договориться о терминах:

• Сайт — это совокупность страниц
• Страница — это то, что увидел пользователь, после применения к документу стилей и JavaScript
• Документ — это то, что получает браузер, поисковик или пользователь, у которого отключены или не подгрузились стили

Таким образом, для разговора о семантике нам необходим валидный, семантически верно размеченный HTML-документ.

Смысловые связи

Откуда же берутся пресловутые смысловые связи, составляющие основу семантики? Если бы речь шла о лингвистике, то следующий пример легко бы продемонстрировал смысловую связь между левой и правой частями предложения: означающее и означаемое, отношение которых рождает значение.

Семантика — совокупность смысловых отношений.

Однако мы ведём речь о семантике относительно HTML-вёрстки, поэтому разметим указанный пример при помощи элемента <dl>, предназначенного для создания списка определений (definition list).

<dl>   <dt>Семантика</dt>   <dd>совокупность смысловых отношений.</dd>  </dl>

Итак, перед нами термин <dt> (definition term) и его определение <dd> (definition description), которые связаны теми же смысловыми отношениями, что и означающее и означаемое в изначальном предложении.

Однако особенность нашей ситуации состоит в том, что для существования подобных связей нам не требуется осмысленного предложения. Все смысловые отношения продиктованы нам контейнером <dl>. По этой причине, текст внутри элементов <dt> и <dd> может быть абсолютно любым:

<dl>   <dt>.........</dt>   <dd>.................................</dd>  </dl>

Создавать логически стройный текст документа — это забота редактора, наше же дело — формировать абстрактную логику документа. Из чего следует, что семантические связи в документе существует только между HTML-элементами, а не между отдельными словами или частями текста.

Уровни семантики

Создание семантически верного документа — это не только использование HTML-элементов по назначению. Существует три уровня существования семантики в HTML-документе — от самого простого к более сложному:

• Применение HTML-элементов
• Именование элементов
• Комбинация именованных элементов

Рассмотрим, в качестве примера всех трёх уровней, разметку простой информации:

Алексей Рыбаков, alex@example.com

Для начала правильно разметим информацию при помощи HTML-элементов. Озаглавим персону элементом <h3> и отметим адрес электронной почты при помощи элемента <address>:

<h3>Алексей Рыбаков</h3>  <address>alex@example.com</address>

Затем, в случае необходимости дополнительного оформления элементов, правильно назовём классы для имени (name) и электронной почты (email):

<h3 class="name">Алексей Рыбаков</h3>  <address class="email">alex@example.com</address>

И, наконец, усложним разметку при помощи микроформата hCard настолько, что строка текста превратится в полноценную визитную карточку. Корневой класс vcard, точное указание на имя (given-name), фамилию (family-name) и электронную почту (email) персоны:

<div class="vcard">   <h3 class="fn n">   <span class="given-name">Алексей</span>   <span class="family-name">Рыбаков</span>   </h3>   <address class="email">alex@example.com</address>  </div>

А теперь рассмотрим подробнее каждый из уровней.

Первый уровень семантики: применение HTML-элементов

С чего же мы взяли, что, к примеру, элемент <h1> должен быть заголовком первого уровня, а <ul> неупорядоченным списком? Информация о всех элементах той версии языка, с которой вы работаете, содержится в DTD (Document Type Definition), либо в спецификации соответствующей версии.

Перед вами фрагмент DTD спецификации HTML 4.01:

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">  <!--  There are six levels of headings from H1 (the most important)  to H6 (the least important).  -->  <!ELEMENT (%heading;) - - (%inline;)* -- heading -->  <!ATTLIST (%heading;)  %attrs; -- %coreattrs, %i18n, %events --  >

Обратите внимание на комментарий:

Существуют шесть уровней заголовков: от H1 (самого значимого) до H6 (наименее значимого).

Таким образом, получается, что все особенности применения элемента и смысловые связи, которые образует с остальными элементами, расписаны в спецификации, остаётся только научиться использовать эту информацию. Конечно, такие подробности удобнее всего выяснять в полной спецификации, но наличие ссылки на DTD в <DOCTYPE> вашего документа, теперь становится ещё более очевидным.

Подобное использование HTML-элементов по их назначению, получило название POSH (Plain Old Semantic HTML) — проще говоря, «старый добрый семантический HTML».

Рассмотрим пример типичной «дивной» вёрстки:

<div id="menu">   <a href="#">Колбаса</a>   <br/>   <a href="#">Макароны</a>   <br/>   <a href="#">Тушёнка</a>  </div>

Формально, такой код подходит популярному нынче требованию «дивной» или «бестабличной» вёрстки. Таблиц нет, див есть и даже внятно именован, код вполне может нормально отображаться во всех браузерах. Чего же боле?

Давайте всё же попробуем разметить этот текст в соответствии с той информацией, что в нём содержится. Включаем мозг и анализируем, что же мы видим:

• Корневой группирующий элемент
• Неупорядоченный список продуктов
• Элемент визуального форматирования — <br>

Исходя из увиденного, практически не остаётся сомнений, каким образом разметить эту информацию: неупорядоченный список <ul> c элементами списка <li> внутри, а визуальное форматирование — в CSS.

<ul id="menu">   <li><a href="#">Колбаса</a></li>   <li><a href="#">Макароны</a></li>   <li><a href="#">Тушёнка</a></li>  </ul>

Но это довольно очевидный пример, как и табличные макеты старой школы вёрстки. В то же время, существуют пограничные ситуации, когда принятие решения о разметке зависит от визуальных особенностей вывода информации и общих идеологических склонностей верстальщика. Кто-то, в отдельно взятой ситуации, использует неупорядоченный список и заголовки, кто-то список определений, а кто-то, нисколько не стесняясь, влепит таблицу.

В качестве примера можно привести ситуацию с разметкой подобной информации:

Колбаса 100 гр. 250 руб.  Макароны 100 гр. 18 руб.  Тушёнка 100 гр. 75 руб.

С одной стороны — это типичная таблица:

<table>  <tr>   <td>Колбаса</td>   <td>100 гр.</td>   <td>250 руб.</td>  </tr>  <tr>   <td>Макароны</td>   <td>100 гр.</td>   <td>18 руб.</td>  </tr>  <tr>   <td>Тушёнка</td>   <td>100 гр.</td>   <td>75 руб.</td>  </tr>  </table>

У нас есть ряды, есть столбцы со схожими типами значений. И неплохо было сделать этой таблице шапку с <th> для выделения столбцов. Но потом на ваши попытки сделать логичную разметку смотрит дизайнер и наотрез отказывается крутить какую-то шапку списку продуктов, а вес и цена должны, оказывается идти тут же, через пробел, а не в каких-то ячейках.

И тут возникает понимание, что дизайнер, в общем-то, прав:

• Информации довольно мало, восприятие не затруднено объёмом информации
• Структурная связность в строки или столбцы минимальная
• Наконец, это просто список продуктов, а не таблица значений

И дальше? А дальше уже решать вам, в каждой ситуации. Остаётся только добавить, что таблица — это развившийся список, в который внедрены дополнительные механизмы, облегчающие поиск и визуальную группировку данных по строкам и столбцам. Если эти механизмы не работают, а вам всего лишь нужно провести горизонтальные линии у каждого пункта, то задумайтесь — таблица ли это? И так далее… Интересно, правда?

Продолжение следует…

Комментарии

41

pepelsbey.net

Вступление

В последнее время все чаще требованием при разработке сайта становится бестабличная или «дивная» верстка. Оба термина стали чрезвычайно популярны, несмотря на то, что они в корне неверны. Изначально, таблицы были выбраны дизайнерами и разработчиками для верстки по одной единственной причине — не существовало других средств реализации хоть сколько-нибудь сложных макетов. Со временем таблицы стали нормой и остаются ею до сих пор. Но мы уже не в девяностых и браузеры, которые значатся в наших технических заданиях, способны интерпретировать CSS на том уровне, который необходим для более корректной, структурированной и современной верстки. Именно ее мы называем семантической. Слово на первый взгляд довольно расплывчато, но в то же время лишено недостатков более популярного термина «бестабличная», который подразумевает всего лишь отказ от использования таблиц при реализации макетов. На самом деле все куда сложнее. Под семантической версткой мы подразумеваем следующее:

1. Таблицы используются для табличных данных, а не для визуального позиционирования элементов. К сожалению, мы живем не в идеальном мире и не всегда удается обойтись без этого архаизма, многие макеты просто требуют табличного поведения. Но перед тем как использовать таблицу не по назначению, каждый разработчик должен не раз подумать и попытаться избежать этого. Во многих случаях это вполне реально.
2. Каждый элемент HTML-кода должен нести структурный смысл. Наилучший способ этого добиться — просмотреть вашу страницу с отключенным CSS. Если списки визуально остались списками, а заголовки заголовками, то вы уже близки к семантике, к которой следует стремиться любому профессиональному верстальщику.
3. Разрабатываемый вами код соответствует стандартам (X)HTML и CSS. Семантика невозможна без валидности, несмотря на явную разность этих двух понятий. Вы можете сверстать валидный сайт, но без структурной разметки это будет всего лишь популизм.

Данная статья не предназначена для совсем новичков и не претендует на статус учебного пособия, но пытается ответить на вопросы, часто возникающие у верстальщиков при попытке изменить табличным привычкам и перейти на семантическую верстку.

Проблемы кроссбраузерности и их решения

Правильный DOCTYPE

Правильный DOCTYPE — это то, с чего должен начинаться любой сайт. Вы можете написать трижды правильный (X)HTML и СSS-код, но с неправильным или отсутствующим DOCTYPE он не будет валидным и, что самое ужасное, будет работать неправильно. Согласно спецификациям HTML и XHTML тег DOCTYPE, указанный в первой строке документа, указывает браузеру, какую именно версию (X)HTML вы используете в своем документе. Без указания DOCTYPE браузер будет воспринимать ваш документ в режиме Quirks Mode, что приведет, в частности, к неправильной интерпретации блочной модели. Правильный DOCTYPE обязан содержать полный абсолютный путь к файлу DTD, хранящемуся на серверах w3.org. Использование правильного DOCTYPE — первый и необходимый путь к валидной кроссбраузерной верстке. В этой статье мы используем указанный выше XHTML 1.0 Strict. Посмотреть правильные DOCTYPE, а также подробнее узнать о практическом значение этого тега можно в статье Джеффри Зельдмана «Почему так важен DOCTYPE».

Ластики

Одна из самых пространенных причин того, что сайт выглядит по-разному в разных браузерам вызвана тем, что браузеры по умолчанию оформляют многие элементы по-своему. Для примера возьмем небольшой код:

<fieldset>  <legend>Авторизация</legend>  <label for="login">Логин:</label>  <input id="login" maxlength="15" type="text" />  <label for="password">Пароль:</label>  <input id="password" maxlength="15" type="password" /> </fieldset> 

Взгляните на результат в Firefox 2.0 (слева) и Internet Explorer 6 (справа): Разница вызвана тем, что разные браузеры имеют различные значения для полей (margin) и отступов (padding). Разумеется, если задать конкретные величины в правилах для нужных элементов, то все исправится, но можно поступить проще.Существует замечательный селектор *, который выбирает все элементы в документе. Таким образом мы можем заранее обнулить значения для отступов и полей и в дальнейшем задавать их только тогда, когда дефолтные значения нас не устраивают. Эта, на первый взгляд мелочь, поможет вам избежать множества незначительных, но трудно находимых кроссбраузерных несоответствий и просто ошибок в процессе имплементации дизайна. Добавим чуть-чуть CSS:

* {margin:0;padding:0;} 

и посмотрим на результат: Уже гораздо ближе к тому кроссбраузерному сооветствию, что мы ищем. Подход к использованию «ластиков» у каждого свой и подобные стили по умолчанию каждый верстальщик должен выработать для себя самостоятельно. Это, как и стиль написания HTML и CSS, должно стать профессиональной привычкой, значительно увеличивающей вашу личную производительность. Ластики от Yahoo: YUI 2: Reset CSS

fortress-design.com

Несколько мыслей о семантической верстке, чтобы понять в основном себя, и других.

Первым делом лезем в словарь:
Не все так просто. Однозначно сказать — никто не сказал.
Семантика. Вот здесь мне понравилось больше всего. И не вижу смысла приводить ни цитаты, ни тем более всю статью.
Семантика — в программировании — система правил истолкования отдельных языковых конструкций. Семантика определяет смысловое значение предложений алгоритмического языка.

И все же. Семантическая верстка для WEB.
Подход к верстке не должен быть фанатичен — верстка не ради верстки, верстка для людей.
Кроссбраузерность — вещь вообще отдельная, но семантически сверстанная страница не обязана выглядеть одинаково при просмотре в любом браузере.
Стандарт должен быть одинаков для всех, ведь для этого он и стандарт. А если разработчики не придерживаются стандартов?

Раз сказали о стандартах, то Семантическая верстка должна быть валидна, т.е. соответствовать рекомендациям W3C.
Семантическая верстка обязана иметь логичную и последовательную иерархию страницы.
Иерархию, логичную, в первую очередь, для человека. WEB для людей, а не для роботов.
Использование каждого элемента должно быть оправдано.

Логичность

Я, например, видел такую интерпретацию логичности, дабы не придумывать свое

Пример 1 (несемантическая, нелогичная верстка):

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 		 "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Пример несемантической, нелогичной верстки</title>  </head>  <body>  <div id="menu">  <a href="#">Ссылка 1</a>  <a href="#">Ссылка 2</a>  <a href="#">Ссылка 3</a>  <a href="#">Ссылка 4</a>  <a href="#">Ссылка 5</a>  </div>  </body>  </html>  

Пример 2 (семантическая верстка):

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 		 "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Пример семантической верстки</title>  </head>  <body>  <ul id="menu">  <li><a href="#">Ссылка 1</a>  <li><a href="#">Ссылка 2</a>  <li><a href="#">Ссылка 3</a>  <li><a href="#">Ссылка 4</a>  <li><a href="#">Ссылка 5</a>  </ul>  </body>  </html>  

С точки зрения браузеров, оба примера можно привести к одинаковому виду с помощью CSS. Затрудняюсь сказать, как это будет выглядеть в текстовых браузерах. Уже знаю 🙂 Посмотрел как это выглядит в lynx. Выглядит по разному. Вобщем-то можно было и самому подумать, если учесть то что элементы якоря <a> принадлежат к inline, а списки к block Но аудио-устройства (например, браузеры для слабовидящих), потребляющие html-контент, эти два примера будет интерпретироваться по разному.
Два примера достаточно спорны.
Навигационные ссылки меню, по своей сути, являются списком. И если это список, то и обозначить(описать) его — списком.
Но о том, что это навигационные списки, знает только верстальщик.
Кроме того, с помощью списков, часто оформляют и горизонтальные меню.

Иерархия страницы

Пример 3 для упрощения я опущу обязательные строки и теги

  <style type="text/css">  < h1 {display: none;}  </style>   <div title="блок с текстом">  <h2>Заголовок</h2>  <h2>Подзаголовок</h2>  <h1>Беспорядочный набор ключевых слов</h1>  <p>содержание блока</p>  </div> 

Тут и простому смертному понятно —

Но простому смертному может быть не понятен финт с тегом <h1> в приведенном примере. Что ж вот это и есть, «танцы с бубном», вернее только начало танцев. К сожалению, поисковики анализируют содержимое в тегах h1…6. В данном коде верстальщик, возможно, с подачи SEO специалиста прячет беспорядочный набор ключевых слов от взгляда контент-пользователя, но усиливает взгляд робота.

Структура HTML

Любой файл HTML обязан начинаться с указания информации о версии, которой он от первой строки до последней будет соответствовать.

Строгое определение типа документа, в соответствии с HTML 4.01:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 		 "http://www.w3.org/TR/html4/strict.dtd">   

Документ, соответствующий спецификации, не может содержать в разметке нерекомендуемые спецификацией элементы,

Переходное определение типа документа, в соответствии с HTML 4.01:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 		 "http://www.w3.org/TR/html4/loose.dtd">   

Документ, соответствующий переходному определению типа документа, разрешает использовать нерекомендуемые (устаревшие) элементы.

Определение типа документа для фреймов, в соответствии с HTML 4.01:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 		 "http://www.w3.org/TR/html4/frameset.dtd">   

Документ, соответствующий определению типа документа для набора фреймов, разрешает использовать нерекомендуемые (устаревшие) элементы и фреймы.

После строки определения типа документа следуют корневой элемент документа — html, затем «голова» head, и тело документа — body

Пример 4

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 		 "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Название страницы</title>   <meta http-equiv="content-type" content="text/html; charset=windows-1251">  </head>  <body>  ...  </body>  </html>   

Отсутствие определения типа документа — ошибка.
Отсутствие тега head-ошибка.
А вот открывать и закрывать элементы html, head и body по спецификации html 4.01 не обязательно.

slasoft.kharkov.ua