Posted:
Мар 9, 2023
Comments:
0 Comments

Семантически верно: Что такое семантическая верстка и почему она важна? Статья RUSOFT — Веб студия RUSOFT

Содержание

Что такое семантическая вёрстка и зачем она нужна — Блог HTML Academy

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

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

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

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

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

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

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

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

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <div> для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо <div> и span. В спецификации для каждого семантического элемента описана его роль.

Ну и представьте, насколько проще читать <nav></nav> вместо <div></div>. Или вот такой код. Смотрите и сразу понятно, что тут и зачем.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>
    <header>
      <!— Шапка сайта —>
    </header>
    <main>
      <!— Основное содержимое страницы —>
    </main>
    <footer>
      <!— Подвал сайта —>
    </footer>
  </body>
</html>

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

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег <p>, который обозначает параграф. При этом теги <i> или <b> не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.

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

<article>

  • Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
  • Особенности: желателен заголовок внутри.
  • Типовые ошибки: путают с тегами <section> и <div>.

<section>

  • Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
  • Особенности: желателен заголовок внутри.
  • Типовые ошибки: путают с тегами <article> и <div>.

<aside>

  • Значение: побочный, косвенный для страницы контент.
  • Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.
  • Типовые ошибки: считать <aside> тегом для «боковой панели» и размечать этим тегом основной контент, который связан с окружающими его элементами.

<nav>

  • Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.
  • Особенности: используется для основной навигации, а не для всех групп ссылок. Основной является навигация или нет — на усмотрение верстальщика. Например, меню в подвале сайта можно не оборачивать в <nav>. В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) — это не является основной навигацией, семантически для такой информации предназначен <footer> сам по себе.
  • Типовые ошибки: многие считают, что в <nav> может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме.

<header>

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

<main>

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

<footer>

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

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

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

  1. Крупные смысловые блоки на каждой странице сайта. Теги: <header>, <main>, <footer>.
  2. Крупные смысловые разделы в блоках. Теги: <nav>, <section>, <article>, <aside>.
  3. Заголовок всего документа и заголовки смысловых разделов. Теги: <h2>-<h6>.
  4. Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
  5. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

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

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

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

  • Получилось найти самый подходящий смысловой тег — использовать его.
  • Для потоковых контейнеров — <div>.
  • Для мелких фразовых элементов (слово или фраза) — <span>.

Правило для определения <article>, <section> и <div>:

  1. Можете дать имя разделу и вынести этот раздел на другой сайт? — <article>
  2. Можете дать имя разделу, но вынести на другой сайт не можете? — <section>
  3. Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? — <div>

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

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

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

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

  1. Тег <blockquote> должен использоваться для выделения в тексте цитат, а не просто случайного выделения текста. Так совпало, что в браузерах этот блок по умолчанию выделен, но это не значит, что нужно его использовать таким образом.
  2. Тег <ul> тоже использован для визуального «сдвига» текста. Это неверно, потому что этот тег должен быть использован только для обозначения списков, а во-вторых, в тег <ul> можно вкладывать только теги <li> и ничего больше.
  3. Тег <p> использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.

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

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

Как правильно сделать семантику

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

Хотите подтверждение? Перейдите на веб-сайт, над которым вы сейчас работаете, нажмите cmd+a или, ctrl+a чтобы скопировать «все», и вставьте текст в ваш любимый текстовый редактор. Добро пожаловать в мир без семантики.

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

Что вообще означает семантика?

Что касается слова, «семантика» означает «значение слов». В программировании семантика обычно относится к внутреннему значению, обеспечиваемому элементами HTML.

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

Почему вы должны о ней заботиться

Контент, который структурирован таким образом (мы назовем его «семантически правильным» способом), легче использовать и обрабатывать. Это приносит несколько больших преимуществ:

Улучшенная доступность

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

Увеличенная возможность обнаружения (SEO)

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

Проще разобрать

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

Ваш код легче читать

Чтение всего исходного кода — <div /> это не лучший опыт. К счастью для нас, HTML это намного больше, чем универсальные <div />и <span />теги! Вы можете разместить определенный контент для навигации в <nav /> своем разделе основного контента внутри <main />тега, и внезапно ваш код будет намного легче сканировать. Возможно, это не добавляет ценности для конечного пользователя, но счастливый разработчик — отличный продукт, верно?

Что может предложить HTML?

Как я уже говорил, HTML намного больше, чем <div />s и <span />. На самом деле, есть более 100 различных элементов! Вы можете проверить их все в справочнике MDN , но их можно условно сгруппировать в три группы — секционирование (разделение) контента, семантика контента и функциональные элементы.

Разделение контента

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

Вот некоторые из тех, которые вы должны точно знать:

  1. <main /> переносит фактическое содержимое вашей страницы или основные функциональные возможности вашего приложения. Проще говоря, это ваш веб-сайт без верхнего, нижнего колонтитула и боковой панели
  2. <header /> следует обернуть основной заголовок вашей страницы или приложения, а также «заголовок» любых других групп контента. Он может содержать заголовок и категорию содержимого в блоге, логотип вашего приложения и основную навигацию.
  3. <section /> является контейнером общего содержимого, который должен обернуть раздел вашего сайта или приложения. Эти элементы обычно тоже имеют заголовок.
  4. <article /> почти похож на <section />. Основное отличие состоит в том, что вы должны использовать <article /> теги вокруг контента, который можно отдельно использовать в другом контексте, а не вокруг основного контента. Примерами могут быть резюме в блоге, комментарий или даже полный виджет
  5. <aside /> может использоваться двумя различными способами. Если вы используете его внутри <article /> тега, он должен содержать контент, тесно связанный с этой статьей, например, глоссарий или пояснение. Если он используется за пределами статьи, его можно использовать для переноса частично связанного контента, например, боковой панели или списка связанных ссылок.
  6. <footer /> обычно используется для предоставления информации об авторских правах или об авторе статьи или самого веб-сайта
  7. <nav /> переносит основные разделы навигации вашей страницы. Ваш основной сайт навигации, нумерации страниц и функции следующего поста / предыдущего поста должны быть обернуты в<nav />

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

Семантика контента

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

Их много, и если вы вообще использовали HTML, вы, вероятно, знакомы с большинством из них. Вот некоторые, о которых нужно знать!

  1. <blockquote /> переносит расширенные цитаты и позволяет вам ссылаться на источник этих цитат. Если источником является URL, вы можете использовать cite атрибут, в противном случае вы можете использовать <cite /> тег, чтобы указать источник.
  2. <figure /> следует обернуть ваши изображения, иллюстрации и рисунки (например, диаграммы, фрагменты кода). Предоставляя <figcaption /> также, вы можете добавить заголовок, который семантически связан с рисунком
  3. <dl /> расшифровывается как «список определений» и отлично подходит для случаев, когда необходимо отобразить отношение ключ-значение. Метаданные продукта и глоссарии являются отличными примерами этого
  4. <time /> оборачивает определенный период или место во времени. Вы можете указать это далее с datetime атрибутом, который принимает более подробную метку времени
  5. <em /> создает акцент, который отлично подходит, когда вы используете программу чтения с экрана или голосовой помощник для анализа текста
  6. <small />  упаковывает ваш «юридический текст» и уведомления об авторских правах
  7. <abbr /> для объяснения сокращений, которые вы используете. Странно, что сам abbr тег является аббревиатурой от «аббревиатура». Вы можете объяснить сокращение с title атрибутом

Вы можете найти полный список здесь .

Заключение

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

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

html — Что означает «семантически правильный»?

спросил

Изменено
3 года, 1 месяц назад

Просмотрено
32к раз

Я много раз видел это в CSS Talk. Что значит семантически правильный?

  • HTML
  • CSS
  • терминология

3

Правильная маркировка

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

Другой пример: список (

    или

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

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

      Идеально подходит для HTML

      HTML расшифровывается как «HyperText Markup Language»; его цель — разметить или пометить ваш контент. Чем точнее вы его разметите, тем лучше. В HTML5 вводятся новые элементы для более точной маркировки общих частей веб-страницы, таких как верхние и нижние колонтитулы.

      Делает его более полезным

      Вся эта семантическая маркировка помогает машинам анализировать ваш контент, что помогает пользователям. Например:

      • Знание ваших элементов позволяет браузерам использовать разумные значения по умолчанию для того, как они должны выглядеть и вести себя . Это означает, что у вас меньше работы по настройке, и вы с большей вероятностью получите согласованные результаты в разных браузерах.
      • Браузеры могут правильно применять ваш CSS (каскадный стиль листов), описывая, как должен выглядеть каждый тип содержимого. Вы можете предложить альтернативные стили, или пользователи могут использовать свои собственные; пока вы помечаете свои элементы семантически, такие правила, как «Я хочу, чтобы заголовки были огромными», будут использоваться.
      • Средства чтения с экрана для слепых могут упростить заполнение формы, если логические разделы разбиты на наборов полей с одной легендой для каждого из них. Слепой пользователь может услышать текст легенды и решить: «О, я могу пропустить этот раздел», точно так же, как зрячий пользователь мог бы сделать это, прочитав его.
      • Мобильные телефоны могут переключаться на цифровую клавиатуру, когда они видят форму ввода type="tel" (для телефонных номеров).

      Семантика в основном означает «Изучение значения».

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

      В (x)HTML есть определенные теги, которые придают смысл содержимому, которое они содержат. Например:

      Тег h2 описывает данные, которые он содержит, как заголовок уровня 1. Тег h3 описывает данные, которые он содержит, как заголовок уровня 2. Подразумеваемый смысл этого заключается в том, что каждый h3 под h2 каким-то образом связан (то есть заголовок и подзаголовок).

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

      Рассмотрим следующие 2 образца семантического VS несемантического:

       
      Заголовок
      

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

      VS несемантический эквивалент:

       
      Заголовок
      

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

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

      1

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

      Откуда: http://www.codingforums.com/archive/index.php/t-53165.html

      Элементы HTML имеют значение. «Семантически правильный» означает, что ваши элементы означают то, что должны.

      Например, ваши списки определений представлены списками

      в коде, вашими сокращениями являются s и т. д.

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

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

      Я никогда не слышал об этом в чистом контексте CSS, но когда речь идет о CSS и HTML, это означает использование правильных тегов (например, отказ от использования тега table для нетабличных данных), предоставление правильных значений для класс и идентификатор, которые определяют, что представляют собой содержащиеся данные (и использование микроформатов, если это необходимо) и так далее.

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

      1

      Зарегистрируйтесь или войдите в систему

      Зарегистрируйтесь с помощью Google

      Зарегистрироваться через Facebook

      Зарегистрируйтесь, используя адрес электронной почты и пароль

      Опубликовать как гость

      Электронная почта

      Обязательно, но не отображается

      Опубликовать как гость

      Электронная почта

      Требуется, но не отображается

      Семантическое определение и значение | Словарь.

      com

      • Основные определения
      • Викторина
      • Примеры

      [ si-man-tik-lee ]

      / sɪˈmæn tɪk li /

      5 Сохранить это слово!

      наречие

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

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

      ВИКТОРИНА

      ВЫ ПРОЙДЕТЕ ЭТИ ГРАММАТИЧЕСКИЕ ВОПРОСЫ ИЛИ НАТЯНУТСЯ?

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

      Вопрос 1 из 7

      Заполните пропуск: Я не могу понять, что _____ подарил мне этот подарок.

      Происхождение слова семантически

      семантический + -ally

      ДРУГИЕ СЛОВА ИЗ семантически

      не·се·ман·тикально·ли, наречиепсевдо·се·ман·тикально·лы, наречие

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

      semainier, semaise, Semang, семантема, семантика, семантика, семантический дифференциал, семантическое поле, семантическая память, семантика, семантическая таблица

      Dictionary.com Unabridged
      На основе Random House Unabridged Dictionary, © Random House, Inc. 2023

      Как семантически использовать в предложении

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

        Английское слово, которое не менялось ни по звучанию, ни по значению за 8000 лет – такие романтичные факты|Севиндж Нуркиязова|9 ноября, 2020|Nautilus

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

        Может ли индексация отрывков Google использовать BERT?|Dawn Anderson|29 октября 2020 г.|Search Engine Land

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

        8 основных обновлений алгоритма Google, объяснение|Спонсируемый контент: SEO PowerSuite|13 октября 2020 г.|Search Engine Land

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

        Bing применяет модели искусственного интеллекта и естественного языка для автоподсказок. Люди также спрашивают|Джордж Нгуен|24 сентября 2020 г.|Search Engine Land

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

        8 основных факторов ранжирования Google — руководство по SEO|Рекламный контент: SEO PowerSuite|15 сентября 2020 г.

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