Что такое семантика в HTML
Слово «семантики» пришло в HTML из обычных лингвистических (языковедческих) дисциплин. Там, под понятием «семантика» понимаются разделы, изучающие значение и назначение человеческих языковых единиц. В отличие от реальных человеческих языков, в HTML языковые единицы изучать не нужно. В HTML, языковые единицы называются «тегами» и их назначение уже прописано в спецификации HTML - едином для всех веб-разработчиков документе. На данный момент, существует несколько вариаций на тему спецификации HTML (в зависимости от версии языка), но суть не в этом. Сейчас, нас и этой статьи - важно другое. Это наличие чёткого и внятного объяснения для каждой языковой единицы - тега HTML, в соответствующей спецификации HTML. Таким образом, если в реальной лингвистике человеческих языком, семантика - это изучение назначения непонятных слов и понятий, то в HTML наоборот, семантика - это правильное применение и использование уже готовых и объяснённых тегов.
Семантическая вёрстка веб-документа
Семантическая вёрстка веб-страницы или семантический код HTML-документа - это вёрстка с правильным использования HTML-тегов в соответствии с их предназначением (семантикой). Кроме этого, семантическая вёрстка предполагает логичную и последовательную иерархию для построения всей веб-страницы, в соответствии с законами HTML-документа.
Чем отличается семантическая вёрстка от обычной
Семантическая вёрстка веб-документа противопоставляется обычной, при котором написание HTML-кода определяется только внешним видом веб-страницы. При семантической вёрстке, ряд элементов страницы имеют свои собственные теги, которые прямо отображают их назначение. Это и есть «семантика» в HTML. Так, например, структура простейшей веб-страницы при обычной вёрстке может выглядеть так:
Тогда, как при семантической вёрстке, структура той же самой веб-страницы будет иметь вид:
Как видно из примера, для обозначения и задания соответствующих стандартных элементов веб-страницы использованы соответствующие теги. Кроме этого, код гораздо проще. При этом, внешний вид такой страницы для человеческого глаза - останется абсолютно неизменным. Возникает резонный вопрос - а зачем тогда нужна семантическая вёрстка и разметка веб-страницы, если людям она не видна?
Зачем нужна семантическая вёрстка
Семантическая вёрстка и разметка веб-страницы видна браузеру и роботам. Семантическая вёрстка и разметка позволяет более точно определять значимость отдельных элементов веб-страницы и всего текста в целом Поэтому, прежде всего - семантическая вёрстка нужна для улучшения робото-функционала сайта и, как следствие - лучшей его поисковой индексации. А, не об этом-ли, мы все мечтаем?
Семантическая вёрстка в HTML5
Полный фурор и переворот понятия веб-семантики произошёл с появлением HTML5.
В HTML4 всё было довольно просто. Для оформления веб-страниц, написанных в соответствии с семантикой, достаточно было использовать внешние каскадные таблицы стилей (CSS) да пару нехитрых нововведений, вида замены тегов и на и . HTML5 - не в пример «семантичней» и это видно из приведённого примера.
Новые популярные семантические теги HTML5
Прежде всего, - простой и понятный всем доктайп.
Проблемы совместимости HTML5 и XHTML
Принципиально, в совместимости HTML5 и XHTML - проблем нет никаких. Все новые браузеры прекрасно поддерживают теги HTML5 и выполняют их. Единственное огорчение ждёт любителей валидного кода. Потому что, большинство сайтов свёрстано не HTML, а в XHTML. И теперь, получается странная ситуация - доктайп от XHTML, а теги из HTML5. Валидатор «вешается и пишет красным». В настоящий момент, на такую «нестыковку» все закрыли глаза. А что делать? Ведь XHTML всегда был только производным языком от HTML.
Так что основной веб-язык, это всё-таки HTML5. В ближайшее время, проблемы совместимости HTML5 и XHTML, скорей всего будут решаться, либо простым игнорированием вопроса в пользу HTML5, либо простым добавлением тегов HTML5 в спецификацию XHTML. В любом случае, это будет простое решение, без фундаментальной перестройки положения вещей. Уж слишком он выстрадан, этот HTML5, чтобы теперь ещё всерьёз начинать возиться с XHTML5.
Плавный переход шаблона с XHTML на HTML5
Как утверждают специалисты, HTML5 - это не одна большая вещь, это набор разных возможностей. Поэтому, начинать переходить с XHTML на HTML5 можно постепенно, по частям добавляя нужный код в свой шаблон. Валидатор XHTML ругнётся и всё вскорости образуется. Ведь всем остальным - «по барабану», теги HTML5 работают везде и вся. Для начала, можно изменить общую структуру своего шаблона, простой заменой классов CSS на семантические теги из примера «Чем отличается семантическая вёрстка от обычной».
HTML5 | Семантическая разметка сайта
(Главное - начать)
Опять-же таки, как утверждают известные специалисты - «обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент в HTML5 имеет предельно простой вид: . После такого «обновления», ровным счётом ничего не произойдёт, потому что все теги, определённые в HTML4, также поддерживаются и в HTML5. Что касаемо перехода с XHTML на HTML5, то тут я не рискнул на своём сайте так резко менять , решился только на постепенную замену части тегов да изменение структуры страницы.
Чем глубже вы изучаете html и web разработку, тем чаще слышите одно загадочное слово “семантика”. В этой статье мы разгадаем загадку, и расскажем что такое семантическая верстка. Разберем основные теги которые используются для описания семантической структуры.
Что такое семантическая верстка?
Семантическая верстка — это изучение значений слов и выражений. В html ничто иное как написание элементов со смыслом. Семантический элемент четко описывает свое значение как для браузеров, так и для разработчиков.
Давайте взглянем на отличие семантического элемента от обычного.
Например div или span — простые элементы, глядя на них мы не можем понять какого типа контент в них содержится. Это может быть просто текст, картинка, или другие теги.
Теперь семантические form , table , и article здесь уже совсем другое дело. Только прочитав названия мы можем с легкостью понять что внутри этих тегов. Пример верстки обычной и семантической:
XHTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!
Надеюсь на этом этапе вы уловили разницу между типами тегов. Хочу сразу отметить, что это не единственные теги, их много, а с появлением html5 стало еще больше. Дальше мы познакомимся с ними.
Почему семантическая верстка сайта так важна?
Хорошо написанный CSS может скрыть от глаз пользователя плохую верстку html. Но мы не можем скрыть ее от поисковых роботов, плагинов браузера, читалок и других инструментов и девайсов.
Исходя из этого семантическая верстка является обязательной, если вы хотите чтобы ваш сайт был доступен любым посетителям с разнообразных устройств, и хорошо ранжировался в поисковых системах. Не стоит забывать и о тексте, который тоже должен быть хорошо структурирован, чтобы пользователям было комфортно его читать.
Как реализовать семантическую верстку страницы?
Существует одно единственное правило, при написании мы должны использовать теги которые в конкретном случае могут наиболее точно передать значение и тип контента, поисковым роботам и программам. Если нет подходящих тегов, то используем обычные т.к. div
Мы можем сгруппировать наиболее распространенные и важные элементы на четыри группы:
- Теги структуры документа
- Текстовые теги
- Медиа теги
- Корреляционные теги
Теги структуры документа
В прошлом элемент div был основным с помощью которого создавалась , 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 то попробуйте применить все эти теги для создания семантической верстки страницы уже в следующем проекте. Не используйте элементы если не уверены нужен ли он там или нет, использование правильного тега очень важный момент. Лучше потратьте немного времени для глубокого его изучения. Это даст свои плоды в будущем.
И судя по тем рассуждениям, которые были в комментариях, мне бы хотелось прояснить один важный момент, который нужно понимать, прежде чем говорить о языке HTML и тегах, которые в нем используются.
Момент этот заключается в понимании такого важного понятия, как семантика кода . Давайте в этой заметке попытаемся разобраться с этим вопросом и зачем это все нужно.
Что такое семантика кода ?
Семантика (с лингвистической точки зрения) – это смысл, информационное содержание языка или отдельной его единицы.
Как мы знаем, структурными единицами языка HTML являются теги, они и являются теми самими отдельными единицами, которые несут смысл, информационное содержание.
Когда перед нами есть какая-то информация, которую нужно представить на веб-странице в Интернете, в первую очередь, мы должны объяснить компьютеру, какая часть этой информации, чем является. Не зная об этом, он просто не сможет правильно отобразить все содержимое.
Таким образом, когда мы создаем веб-страницу, с помощью языка HTML , мы объясняем компьютеру, какой элемент, какую роль должен играть на странице.
Мы должны понимать, что содержание каждого элемента веб-страницы должно быть заключено в теги, которые бы соответствовали их логическому и смысловому назначению.
Т.е. заголовки в тексте заключались бы в теги h 1-h 6, абзацы в теги p , списки в теги ul /ol (li ) и.т.д.
Код, который соответствует этим условиям, называют семантическим т.е. каждому элементу на веб-странице, соответствует правильное смысловое значение.
А теперь вопрос, можем ли мы заголовок на веб-странице, заключить в тег абзаца?
А почем нет? Конечно, можем. Многие скажут, но ведь при этом мы теряем оформление, которое имеют заголовки h
1-h
6. Но, на самом деле, оформление здесь никакой роли не играет. С помощью стилей CSS
, мы можем присвоить любому абзацу точно такое же оформление, которое было у элемента h
1-h
6.
Вывод, который мы с вами должны сделать, исходя из этого, семантика кода и оформление это две разные вещи, которые не нужно путать между собой. Определенное оформление каждому тегу присваивается, но его можно легко изменить,а вот изменить семантическое значение этого тега уже нельзя.
Мы можем заключить заголовок в абзац, но при этом теряется семантичность кода и этот текст будет нести совершенно иной смысл.
Поэтому, прежде чем заключать элемент в какой-либо тег, желательно подумать, а какую функцию, смысл он несет на странице?
Возникает логичный вопрос, а зачем в таком случае вообще нужна семантика кода?
Зачем заголовки делать заголовками, абзацы делать абзацами, аббревиатуры делать аббревиатурами и.т.д.?
По моему мнению, есть несколько причин, которые помогут вам склониться в сторону семантического кода. Что нам дает семантическая разметка?
1) Информацию о том, как браузеру по умолчанию отображать тот или иной элемент на странице;
Например, мы знаем, что заголовок h 1, если не задавать ему никаких специальных стилей, отображается на странице размером 2em и жирным шрифтом. Но, по моему мнению это самая не существенная причина.
2) Семантический код лучше читается и воспринимается поисковыми системами;
Считается, что страница, которая имеет семантическую разметку, при прочих равных условиях, будет выдаваться выше в результатах выдачи поисковых систем, чем страница с несемантическим кодом.
2) Код более понятный для человека;
Согласитесь, что разобраться с кодом, где все четко прописано, что эта часть текста является абзацем, эта аббревиатурой, и.т.д. намного легче, чем с кодом, где вся информация идет одной сплошной структурой и не понятно, что хотел сказать автор.
3) Проще получить доступ к элементу и как следствие большая гибкость.
Делая код семантическим, вы сможете намного проще обращаться к этим элементам с помощью специальных средств, которые работают с элементами на веб-страницах, например, языки CSS , Javascript и др.
Если вы заключите все аббревиатуры на вашей странице в тег abbr , то в CSS , для того, чтобы все аббревиатуры на вашей странице стали красными достаточно будет просто прописать.
abbr {color :red ;}
Вместо того, чтобы в HTML выделять и прописывать это правило к каждой отдельно взятой аббревиатуре.
Это всего лишь один пример, которых можно привести массу.
По этим причинам нужно понимать, что семантический код просто дает нашему документу больше возможностей. Мы можем применять какие-то теги для улучшения семантики сайта и получать при этом большую функциональность, либо их не применять и не получать эти выгоды.
Дело ваше!
Вы должны сами для себя принять это решение.
Семантические элементы HTML5
доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
- Мета содержимое
- Потоковое содержимое
- Секционное содержимое
- Заголовочное содержимое
- Текстовое содержимое
- Встроенное содержимое
- Интерактивное содержимое
Описание HTML5-элементов
1. Элемент
Категории контента:
потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов
Site description
Элемент
2. Элемент
Категории контента:
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри
В качестве элементов панели навигации можно использовать не только элементы списков:
...
Также можно добавлять заголовки внутрь элемента:
...
3. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы
...
4. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент
...
...
...
внутри
Можно создавать родительские элементы
Заметки о природе
...
...
Исторические заметки
...
...
5. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого)
. Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов:
6. Элемент
Категории контента:
потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов
7. Элемент
Категории контента:
потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента
8. Элемент
Категории контента:
потоковое содержимое.
Элемент
Элемент
Пудель
О породе
9. Элемент
Категории контента:
потоковое содержимое, корневое секционное содержимое.
Элемент
Элемент
10. Элемент
Элемент
11. Элемент
Категории контента:
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime , в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD . Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
12. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега , выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
13. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
14. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
15. Элементы для описания Восточно-Азиатских символов
Категории контента:
потоковое содержимое, текстовое содержимое.
Элемент позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов
— один и более элементов
Элементы
Элемент
Элемент