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

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

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

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

В языке программирования семантика относится к значению, связанному с оператором или словом.

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

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

Семантическое значение «p» заключается в том, что оно обозначает абзацы.

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

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

Различные теги могут достигать одинаковых визуальных результатов. Например, элемент ‹em› выделяет содержимое HTML, но отображает его курсивом, в то время как элемент ‹i› не выделяет ничего, но также предлагает курсив. Если вы используете оба взаимозаменяемо, физически все будет выглядеть нормально, но ‹i› отображается как курсив, но не имеет дополнительного значения для разметки, в то время как ‹em› также отображается как курсив, но также указывает, что разметка имеет выделенное содержание.

Взгляните на этот пример ниже:

‹h1› — семантический элемент. Объединив несемантический элемент ‹span› с некоторыми стилями CSS, мы можем добиться того же внешнего вида, что и ‹h1›:

Вывод показывает это:

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

Вот несколько примеров семантического HTML:

Некоторые примеры несемантического HTML:

  • ‹div› — общий элемент блочного уровня
  • ‹i› — выделить содержимое курсивом
  • ‹b› — сделать контент жирным
  • ‹span› — общий встроенный элемент

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

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

заключение:

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

Следование передовым практикам в программировании сделает ваш код более легким в обслуживании и более читабельным. Это также повышает эффективность вашего кода.

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

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