Основы семантической верстки

Когда-то давным-давно, примерно 15 лет назад, при создании сайтов мало кто интересовался, каким образом они сделаны. В верстке основным элементом был тег <table>(таблица), с помощью которого строилась сетка страницы. Повсеместно использовались теги div, span, и никто не задумывался о семантике и доступности. Но потом на свет появился HTML5, который принес нам массу нового и полезного для создания и разметки наших сайтов.

Почему семантика важна? Зачем подбирать правильные теги для контента? Зачем вообще это все, если можно слепить все с использованием тега div? Ответы на эти и другие вопросы вы найдете ниже.

Краткая история появления HTML5

HTML появился в далеком 1991 году, когда великий отец интернета сэр Тим Бёрнерс Ли показал миру его первую версию. В данном документе содержалось всего 20 тегов для описания страницы. На тот момент времени их было достаточно, но, если смотреть с точки зрения современного мира, это критически мало.

Спустя некоторое время на свет появляется W3C — консорциум всемирной паутины, и он выпускает вторую версию. Также они издают спецификацию, которая описывает в мельчайших подробностях весь HTML.

Далее идет итерация новых версий: в 1997 году — HTML 3.2, чуть позже появляется HTML4, а в 1999 году маленькая модификация HTML4.01.

Наконец в 2000 году человечество видит рождение XHTML, который по задумке должен был выкинуть все теги, а также привести разработчиков к строгости синтаксиса. Спустя время стало понятно, что XHTML только наносит вред, так как возникали проблемы с совместимостью HTML и XHTML, плюс сообщество стало выражать свое недовольство в сторону политики развития языка разметки.

HTML5 возник, когда крупные компании и влиятельные деятели индустрии перестали терпеть текущую ситуацию, создав свою организацию WHATWG. Выход пятой версии датируется 2006 годом.

W3C по итогу отказался от своего, немного странного, XHTML. Пользователи, разработчики и все причастные к интернету не поддержали их идею, они ждали выход новой версии HTML. Отказ случился в 2009 году, а что еще более интересно, W3C стал совместно с WHATWG развивать HTML5.

На сегодняшний день самая актуальная спецификация — это живой стандарт HTML от WHATWG.

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

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

Итак, семантика — это раздел лингвистики, который изучает смысловое значение единиц языка. Что касается семантики в языке разметки HTML, то это подход создания страниц с помощью определенного набора тегов, которым четко задан смысл и их конкретное применение.

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

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

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

1. Доступность
2. Поисковые роботы
3. Спецификация

Доступность

Семантика очень сильно и тесно связана с доступностью, о которой мы писали некоторое время назад. Такие теги, как: <header>, <footer>, <aside>, <h2>, <nav>, <ul> и другие, помогают людям с ограниченными возможностями воспринимать сайт полностью без проблем.

Некоторые пользователи не видят ваш сайт, т.к. у них имеются проблемы со зрением, и они пользуются экранными читалками. Данные программы проходят по сайту и озвучивают информацию, опираясь на код и теги, которые там есть. К примеру, если использовать тег <nav>, устанавливающий навигацию на странице, то читалка легко озвучит, что пользователь находится в ней. Если таким же образом добавить тег для списка <ul> и его элементы <li>, то в таком случае читалка сообщит примерно следующее: «навигация => список из 5 элементов => О компании ссылка».

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

Поисковые роботы

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

К примеру, существуют поисковые роботы, которые ежедневно «парсят» или, по-простому, просматривают миллионы сайтов в интернете. Они считывают код, получают сведения, передают данные на поисковые сервера и т.п. В конце концов сайт ранжируется в поисковой выдаче.

Такие теги, как header, footer, aside, main, section, article, задают основную структуру страницы. Используя их, вы показываете роботу, где у вас шапка сайта, где подвал, а где основной контент страницы. Робот поймет сайт быстрее, поставит плюсик и пойдет дальше.

Есть очень хороший пример правильного, семантичного использования тегов при построении страницы. Посмотрите на изображение ниже.

Разработчики сайта РЖД сконструировали расписание с помощью тега table, вместо использования div. Тем самым робот google считал информацию, и их сниппет появился в выдаче по важному коммерческому запросу.

Спецификация

Семантика каждого тега четко прописана в стандартах. Каждый тег имеет свое описание и четкую роль. На данный момент есть еще разработчики, которые по старой привычке используют универсальный блочный тег div (о нем мы еще поговорим).

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

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

Есть отличный доклад одного популярного в узких кругах разработчика «Семантика для циников». Всем тем, кто причастен к разработке сайтов, горячо рекомендую посмотреть.

Основные семантические теги и их описание

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

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

Header

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

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

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

Nav

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

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

Интересным применением тега nav будет ситуация при построении пагинации.

Ведь если задуматься, то что такое пагинация? Это ссылки на страницы. Если это ссылки, то почему бы в данном случае не использовать тег <nav>.

Main

Main отвечает за основное, главное, доминирующее и неповторяющиеся на других страницах содержимое. Важно, чтобы на странице данный тег не повторялся и использовался только единожды. Исключение одно — если не указан специальный атрибут, который отвечает за скрытие элемента.

Footer

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

«Футер» необязательно использовать только как подвал сайта. Повторять его можно сколько угодно раз, главное, чтобы он использовался как окончание какого-то смыслового блока на странице.

Article

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

Внутри данного тега очень желательно использовать заголовок соответствующего уровня, и тогда блок станет независимым и целостным на все 100%. Иногда возникает дилемма, какой же тег выбрать для блока — section или article? По смыслу они очень похожи, но если копнуть чуть глубже, то сразу станет понятно. Об этом читайте ниже.

Section

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

Теперь понимаете, в чем отличие между article и section? Один элемент самостоятельный и независимый, другой четко и логически привязан к определенной странице.

Aside

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

Главное — не стоит забывать, что тег aside не должен быть только сайдбаром в правой или левой части страницы.

На примере ниже очень удачно расположили ссылки на социальные сети в aside. Они как раз являются косвенным контентом по отношению к главной информации сайта.

dl, dt, dd

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

• <dl> (сокращение от «description list») обозначает сам список описаний;
• <dt> (сокращение от «description term») обозначает термин;
• <dd> (сокращение от «description definition») обозначает описание или определение.

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

Google нашел этим тегам очень интересное применение на одной своей странице.

Разработчики взяли меню в подвале страницы, во-первых, обернули его в тег <nav>, во-вторых, группу ссылок обернули в dl, его заголовок поместили в dt, и ссылку в dd. Проще это увидеть, чем описать.

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

Однако все же есть очень спорный момент. Они сделали по такому же принципу блок с ссылками на подписку в соц. сетях.

Весьма неоднозначное решение и оформление блока с такого рода информацией. Оставим вопрос правильности применения открытым.

Div

Закончим наше описание самым популярным и простым тегом. Он не имеет какого особого значения. Это просто тег с помощью которого можно построить блок на сайте или страницу…или весь сайт.

В теории с помощью div можно сделать все что угодно. Забудьте все то, что было написано выше! Ведь можно использовать div и клепать сайты одним за одним. Если ты знаешь, как использовать div, то ты, получается, верстальщик и можешь идти на свое первое собеседование! Шутка, конечно, лучше использовать правильные и подходящие для этого теги.

Это далеко не все теги, которые существуют в html, мы описали лишь некоторые из них. Можно еще часами разговаривать о их семантике, как их правильно использовать, находить лучшие практики.

Вывод

Семантика очень важна при верстке страниц сайта. Как минимум её не просто так придумали и занесли в спецификацию.

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

А если вам нужен семантичный сайт, где теги используются по назначению, где к верстке подошли с особой скрупулёзностью, то можете смело обращаться к нам. Мы поможем вам в этом нелегком деле. 🙂

Семантика в HTML | Учебные курсы

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

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

Диапазон элементов достаточно широк, чтобы он подходил и для материалов общего назначения (например, абзацы или списки) и для более конкретного содержимого, вроде <output> (для отображения результата вычисления) или <progress> (для отображения хода выполнения задачи).

Структурные элементы: организация страницы

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

Вот что типичная веб-страница может в себя включать:

• <header> в качестве первого элемента страницы, который может включать в себя логотип и слоган;
• <nav> в качестве списка ссылок, которые ведут на разные страницы сайта;
• <h2> в качестве заголовка страницы;
• <article> в качестве основного содержимого страницы, вроде статьи блога;
• <footer> в качестве последнего элемента страницы, расположенного внизу.

Текстовые элементы: определение контента

Внутри структурных элементов вы обычно находите текстовые элементы, призванные определить цель вашего содержимого.

Вы, в основном, будете использовать:

• <p> для абзацев;
• <ul> для (неупорядоченных) списков;
• <ol> для (упорядоченных) списков;
• <li> для отдельных пунктов списка;
• <blockquote> для цитат.

Строчные элементы: различный текст

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

Есть много строчных элементов, но вы обычно столкнётесь со следующими:

• <strong> для важных слов;
• <em> для выделенных слов;
• <a> для ссылок;
• <small> для менее важных слов;
• <abbr> для аббревиатур, вроде W3C.

Просто читая этот код HTML, вы можете легко понять, что означает каждый элемент HTML.

<article>
<h2>Основной заголовок страницы</h2>
<h3>Подзаголовок</h3>
<p>
Какие-то всякие разные штуки и некоторые <em>выделенные</em> и
даже <strong>важные</strong> слова.
</p>
<p>
Другой абзац.
</p>
<ul>
<li>Один</li>
<li>Два</li>
<li>Три</li>
</ul>
<blockquote>
Однажды сказано
</blockquote>
</article>
<aside>
<h4>Мои последние сообщения</h4>
<ul>
<li><a href=»#»>Один</a></li>
<li><a href=»#»>Два</a></li>
<li><a href=»#»>Три</a></li>
</ul>
</aside>

Общие элементы

Когда ни один семантический элемент не подходит для вашего содержимого, но вы всё ещё хотите вставить элемент HTML (в целях группирования или стилизации), то можете остановиться на одном из двух общих элементов:

• <div> для блочных элементов;
• <span> для строчных элементов.

Хотя эти элементы HTML на самом деле не несут какого-либо смысла, они пригодятся когда мы начнём использовать CSS.

Не заморачивайтесь на семантике

Существует около 100 семантических элементов HTML на выбор. Это много. Может оказаться непреодолимым пройтись по этому списку и выбрать соответствующий элемент для вашего контента.

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

Автор и редакторы

Автор: Джереми Томас

Последнее изменение: 01. 06.2020

Редакторы: Влад Мержевич

Семантика — Глоссарий веб-документов MDN: Определения терминов, связанных с Интернетом,

В этой статье

• Семантика в JavaScript
• Семантика в CSS
• Семантика в HTML
• Semantic Elements
• См. Также

в Программировании, Semantics

10 12010 1202010 1202010 1202010 12010 12. фрагмента кода — например, «какой эффект дает запуск этой строки JavaScript?» или «какую цель или роль выполняет этот HTML-элемент» (а не «как он выглядит?») 9.0021

В JavaScript рассмотрим функцию, которая принимает строковый параметр и возвращает элемент

с этой строкой в ​​качестве своего textContent . Нужно ли вам смотреть код, чтобы понять, что делает функция, если она называется build('Peach') или createLiWithContent('Peach') ?

В CSS рассмотрите возможность оформления списка с li элементами, представляющими различные виды фруктов. Знаете ли вы, какая часть DOM выбирается с помощью 9?0023 div > ul > li или .fruits__item ?

В HTML, например, элемент

является семантическим элементом, который придает тексту, который он оборачивает, роль (или значение) «заголовка верхнего уровня на вашей странице».

 
Это заголовок верхнего уровня
 

По умолчанию большинство таблиц стилей пользовательского агента браузера стилизует

с большим размером шрифта, чтобы выглядело как заголовок (хотя вы можете стилизовать его так, как вам хочется).

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

 Не заголовок верхнего уровня!
 

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

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

Вот некоторые из преимуществ написания семантической разметки:

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

При выборе разметки спросите себя: «Какие элементы лучше всего описывают/представляют данные, которые я собираюсь заполнить?» Например, это список данных?; упорядоченный, неупорядоченный?; это статья с разделами и дополнительной информацией?; перечислены ли определения?; это рисунок или изображение, которое нуждается в подписи?; должен ли он иметь верхний и нижний колонтитулы в дополнение к общему верхнему и нижнему колонтитулу сайта?; и т. д.

Это некоторые из примерно 100 доступных семантических элементов:

• 

• <в сторону>
• <детали>
• <рисунок>
• <нижний колонтитул>
• <заголовок>
• <основной>
• <знак>
• <навигация>
• <секция>
• <сводка>
• <время>

• Ссылка на элемент HTML на MDN
• Использование HTML-разделов и структур на MDN
• Значение семантики в информатике в Википедии
• Глоссарий
  • SEO
• Семантические элементы в HTML:
  • <артикул>
  • <в сторону>
  • <детали>
  • <рисунок>
  • <нижний колонтитул>
  • <заголовок>
  • <основной>
  • <знак>
  • <навигация>
  • <секция>
  • <сводка>
  • <время>

Последнее изменение: 000Z»> 21 сентября 2022 г. , участниками MDN

Что такое семантический тег HTML и зачем его использовать?

Семантика HTML относится к тегам, которые придают смысл HTML-странице, а не просто представление. Это делает HTML более понятным, лучше определяя различные разделы и макет веб-страниц. Эта статья будет посвящена теме «Что такое семантика в HTML».

Что такое семантика HTML?

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

Зачем вам нужно использовать семантические теги в HTML?

Несколько преимуществ использования семантических тегов в HTML:

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

Структура семантических тегов HTML

Следующие теги HTML можно использовать для разбиения страницы на определенные части:

• : t определяет заголовок веб-страницы.
• : определяет раздел на веб-странице.
• : Этот элемент содержит основную часть, содержащую информацию о веб-странице.
• <нижний колонтитул>: определяет нижний колонтитул для документа или раздела.

Пример семантики в HTML5

Вот пример для понимания основных тегов Semantic HTML5:

Семантические элементы HTML

Метки	Пояснение
<артикул>	Элемент определяет независимое, автономное содержимое.
<навигация>	Элемент
<в сторону>	Элемент
<раздел>	Представляет раздел документа.
<детали>	Указывает тег для дополнительных сведений.
<заголовок>	Элемент представляет контейнер для вводного содержимого или набора навигационных ссылок.
<нижний колонтитул>	Элемент
<основной>	Указывает содержимое главной страницы и должно быть уникальным.
<сводка>	Указывает заголовок для элемента .
<знак>	Указывает выделенный текст.

Заключение

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

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

This entry was posted in Семантическое ядро