Семантические теги: Семантические теги HTML — Как создать сайт

Семантические теги HTML — Как создать сайт

Семантические теги в языке HTML

HTML-теги
Семантические HTML-теги

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

Политика спецификации HTML5 заключается в том, чтобы каждый HTML-тег имел свою семантику. Давайте приведем простой пример, например есть теги <s> </s> они делают текст зачёркнутым. Раньше поисковая система зайдя на сайт и увидев этот тег, никак не реагировала на него, теперь она должна понимать, что это не просто зачеркнутый текст, а например что это обозначение старого ценника у товара или устаревшей (не актуальной) информации.

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

abbr — текст размещённый между этими тегами, в HTML5, воспринимается как аббревиатура или акроним. В HTML4 для акронимов существовал свой тег acronym.

address — содержит адрес (контактные данные создателя сайта). Может содержать почтовый адрес, емаил, телефон. Вместо него лучше использовать микроразметку hCard.

blockquote — длинная цитата занимающая целый абзац p (теги цитаты обрамляют абзац). Семантический акцент — цитата взятая из внешних источников.

cite — названия произведений, романов, картин, стихов, песен и т.д.

del — старый, удалённый текст.

dfn — данным тегом обрамляется впервые встречающийся термин в тексте.

ins — новый, добавленный текст.

em — наклонный шрифт, ключевое слово, усиление голоса, логическое ударение на слово в предложении. Например тег i, хоть и делает шрифт наклонным, но не имеет семантического акцента.

q — короткая цитата являющаяся частью абзаца p

s — ошибочная или устаревшая информация, но при этом оставленная на странице (например старый ценник).

strong — жирный шрифт, ключевое слово, усиление голоса, изменение интонации, текст высокой степени важности. Например тег b, хоть и делает шрифт жирным, но не имеет семантического акцента.

Некоторые семантические теги появившиеся в HTML5

<article> </article>

— основной контент страницы, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является основной на HTML-странице.

<aside> </aside> — боковая панель (сайдбар) сайта, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является частью сайдбара (боковой панели).

<footer> </footer> — подвал сайта, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является подвалом сайта.

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

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

Читать далее: Список всех HTML-тегов по алфавиту.

• Category: Разное

Дата публикации поста: 5 февраля 2016

Дата обновления поста:

15 октября 2014

Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

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

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

С первых версий стандарта HTML теги изначально обладают семантикой, например, <p> — параграф, <table> — таблица, <ol>, <ul> — списки.

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

До выхода стандарта HTML5 для разметки таких областей использовали классы или идентификаторы. Например так:

<div>
  // Здесь будет шапка сайта. Обычно в ней располагается логотип, контактная информация, меню
</div>
<div>
  // Уникальный контент сайта
</div>
<div>
  // Подвал сайта. Обычно здесь находится контактная информация, дополнительное меню, юридическая информация о компании
</div>

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

id="header" используется на сайте для обозначения шапки сайта, да и разработчики именовали области по своему, так как не было единого стандарта.

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

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

• <article>
• <aside>
• <footer>
• <header>
• <main>
• <nav>
• <section>

Большинство элементов интуитивно понятны и их можно сразу использовать в своих документах.

Теперь пример выше можно переделать с использованием новых элементов HTML:

<header>
  // Здесь будет шапка сайта. Обычно в ней располагается логотип, контактная информация, меню
</header>
<main>
  // Уникальный контент сайта
</main>
<footer>
  // Подвал сайта. Обычно здесь находится контактная информация, дополнительное меню, юридическая информация о компании
</footer>

Обратите внимание, что в вёрстке пропали идентификаторы и она стала чище. В этом модуле мы рассмотрим основные семантические теги на едином примере. От урока к уроку усложняя и дорабатывая страницу сайта.

Создайте разметку «шапки» и «подвала», используя новые семантические элементы HTML5

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет 🤨

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

Мой код отличается от решения учителя 🤔

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

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

Прочитал урок — ничего не понятно 🙄

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

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

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

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Семантические теги в HTML — Темы масштабирования

Обзор

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

Область применения

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

Введение в семантические теги

HTML Семантические теги указывают на содержание, а не на то, как браузер его отображает.

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

,