что такое семантика какие семантичные теги вы знаете

Разработчики tutu.ru сверстали таблицу тегом

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа

Ну и представьте, насколько проще читать вместо

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

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег

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

Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.

Особенности: желателен заголовок внутри.

Типовые ошибки: путают с тегами и

Особенности: желателен заголовок внутри.

Типовые ошибки: путают с тегами и

Значение: побочный, косвенный для страницы контент.

Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.

Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.

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

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

Особенности: этих элементов может быть несколько на странице.

Типовые ошибки: использовать только как шапку сайта.

Значение: основное, не повторяющееся на других страницах, содержание страницы.

Особенности: должен быть один на странице, исходя из определения.

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

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

Особенности: этих элементов может быть несколько на странице. Тег не обязан находиться в конце раздела.

Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

Заголовок всего документа и заголовки смысловых разделов. Теги:

Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.

Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

Получилось найти самый подходящий смысловой тег — использовать его.

Для потоковых контейнеров —

Можете дать имя разделу и вынести этот раздел на другой сайт? —

Можете дать имя разделу, но вынести на другой сайт не можете? —

Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? —

Как точно не нужно делать

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

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

Здесь сразу несколько ошибок:

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

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

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и курсах HTML Academy. Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса «Профессиональная вёрстка сайтов». А с промокодом SKUCHNO цена станет ещё приятнее.

Источник

Семантика в HTML

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

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

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

(для отображения хода выполнения задачи).

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

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

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

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

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

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

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

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

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

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

Основной заголовок страницы

Подзаголовок

Какие-то всякие разные штуки и некоторые выделенные и даже важные слова.

Мои последние сообщения

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

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

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

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

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

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

Источник

Что такое семантическая вёрстка и зачем она нужна

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

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

Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.

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

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

Классический пример — расписание поезда «Сапсан» в выдаче Google.

Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа

Ну и представьте, насколько проще читать вместо

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

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег

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

Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.

Создание семантической разметки по макету

Навык, без которого фронтенд-разработчикам ну просто никуда.

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

Как точно не нужно делать

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

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

Здесь сразу несколько ошибок:

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

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

Источник

HTML и семантика

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

Какой же выбрать для статьи? Внешне самым бросающимся в глаза является тег

Давайте посмотрим, как это выглядит в сочетании с уже рассмотренными тегами и

Давайте посмотрим, как это будет выглядеть на странице (открыть в отдельной вкладке):

, а абзацы все так же будут размещены в тегах

.

Статья увеличивается в размерах. Мы добавим ещё заголовки

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

Ничего особо сложного, не так ли? И термин «семантика в HTML» уже не выглядит пугающим. Наш текст имеет хоть и очень простую, но логичную структуру. Кроме того, с такой структурой ваш текст, скорей всего, понравится и поисковикам, и СЕО-шникам, т.е. специалистам по оптимизации страниц сайтов под поисковые системы. Ещё одной хорошей новостью является то, что W3C-валидатору наша разметка тоже нравится.

Валидация страницы без ошибок

Где же ложка дегтя? И есть ли она? К сожалению, есть. Наша статья абсолютно безликая. Ей не хватает выделений курсивом, жирным шрифтом, цветом. Текст, хоть и разбит на заголовки, но особого желания читать его не вызывает. Явно не хватает CSS-форматирования.

Блочные и строчные и теги

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

из 4-х слов совпадает с размером абзаца со значительно большим количеством слов именно по ширине (обведенные красной рамкой цифры слева над текстом).

Справа внизу в Инспекторе свойств вы можете видеть вложенность элементов. И

Пример страницы с разметкой блочными тегами (открыть в отдельной вкладке):

Строчные, или линейные (от англ. inline) теги, тоже являются прямоугольными элементами, но занимают ровно столько места по ширине, сколько необходимо для отображаемого внутри них текста, причем неважно, это 4 слова или весь текст абзаца. Можно сказать, что строчные теги нужны, как правило,для дополнительного форматирования текста внутри блочных тегов.

Логическое предназначение тегов и их визуальное отображение

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

Кстати, в примере есть вложенность элементов в , а также в . И в этом случае вы увидите текст в цвете того тега, который является наиболее глубоко вложенным. Здесь работает правило «матрешки»: первый открытый тег закрывается последним.

Теги и отступы

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

,
), либо справа и слева (блочные цитаты

В примере ниже вы увидите неверное и верное применение тегов (открыть в новой вкладке).

Семантические ошибки форматирования

Мы рассматривали очень простую верстку на примере статьи с несколькими абзацами и заголовками. В ней были допущены некоторые ошибки, которые чаще всего допускают начинающие верстальщики, на которые хотелось бы обратить внимание. Они, как правило, не видны пользователю на сайте, так как браузеры стараются вывести информацию в приемлемом виде при любых ошибках форматирования. Зато их не пропустит W3C-валидатор и тот человек, который будет оценивать ваш код при приеме на работу. С поисковиками тоже спорный вопрос, т.к. они распределяют информацию по разделам своей базы данных по только им известному алгоритму, но при этом 100% обращают внимание на ряд тегов, внутри которых она размещена, особенно на заголовки 1-4-го уровней.

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

Давайте разберем все эти ошибки.

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

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

Кстати, текст с таким форматированием и в браузере смотрится странно:

Заголовок внутри абзаца смотрится странно

«Лишнее» форматирование

Стили по умолчанию и их переопределения

На скриншоте видно, что и у , и у

, а не добавлять в него .

Вот как это выглядит в браузере:

Тег b внутри заголовка

Устаревшие теги и атрибуты

В примере ниже собраны все возможные устаревшие теги и атрибуты (открыть в новой вкладке).

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

Источник

Семантический HTML — Основы современной вёрстки

При создании вёрстки нужно учитывать семантику, то есть смысловое (логическое) значение элементов.

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

Вторая важная причина необходимости создания семантической вёрстки — использование страниц людьми с ограниченными возможностями. Слабовидящие пользователи используют «скринридеры» — устройства или приложения, воспроизводящие голосом элементы страницы. Чтобы скринридер мог правильно понять, где содержится основная информация, меню, поясняющие блоки и так далее, мы должны правильно разметить страницу. Это поможет устройствам правильно разбить страницу на логические блоки и дать возможность посетителям корректно перемещаться по странице. Такая концепция называется «Доступный WEB».

Запомните: минимальная доступность лучше, чем её отсутствие.

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

Шапка сайта

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

Чтобы создать шапку сайта, используется парный тег header, внутри которого мы и располагаем необходимую информацию.

Один из примеров шапки сайта:

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

Навигация

Попробуйте взглянуть на шапку сайта из примера выше глазами компьютера. Что он там видит?

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

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

Заменим простой блочный элемент div на его семантичного брата nav:

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

Уникальный контент

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

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

Добавим такую область в нашу вёрстку:

Наличие тега main также очень важно для мобильных браузеров. Вы могли видеть, что многие из них имеют функцию «Режим чтения». При его включении браузер автоматически удалит всё оформление и все ненужные блоки, оставив только главный контент. Этим контентом и будет являться область, заключённая в тег main. Такой режим отлично подходит для людей, у которых, в настоящий момент, слабое подключение к интернету.

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

Секции

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

Для таких самостоятельных логических единиц существует специальный тег section, который внутри себя может содержать одну конкретную секцию. Добавим её в наш пример:

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

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

Независимые секции

Другим способом выделить логический участок текста является использование тега article. Может показаться, что какой смысл иметь два различных тега для выделения одного и того же?

Между section и article есть одна существенная разница: article является независимой секцией, то есть её можно перенести на любую страницу сайта или даже на другой сайт, и при этом она не потеряет своего контекста.

Представьте себе блог и отдельную статью в нём. Можем ли мы понять статью, если она вдруг окажется не в блоге, а, например, на странице с услугами? Конечно! Ведь статья — это законченный текст. Следовательно, такую статью можно обернуть в тег article.

Добавим колонку новостей в наш пример вёрстки. Сразу подумаем, как она может быть разделена. Сами по себе новости являются достаточно уникальным элементом, ведь даже если их перенести на другую страницу, то они не потеряют свою актуальность. В этом случае каждую новость можно обернуть в article. А что делать с обёрткой блока? Она объединяет по смыслу несколько различных новостей, её можно спокойно назвать одним словом, и она точно будет иметь свой заголовок. Следовательно, ей подойдёт тег section.

Дополняющие секции

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

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

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

Самостоятельная работа

Создайте файл index.html на своём компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

Об обучении на Хекслете

Открыть доступ

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

Наши выпускники работают в компаниях:

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

Источник

• ← Частая отрыжка что это
• что такое волны жизни →