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

  • 27 сентября, 15:11
  • 5654
  • 0

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

Хотите подтверждение? Перейдите на веб-сайт, над которым вы сейчас работаете, нажмите 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
0 комментариев
Сортировка:
Добавить комментарий

IT Новости

Смотреть все