1.4. HTML-текст

html_textHTML- текст представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения.

Теги для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family).

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

Теги для HTML текста

1. Теги заголовков

h

Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Теги <h1>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела. При использовании заголовков необходимо учитывать их иерархию, т.е. за <h1> должен следовать <h2> и т.д. Также не допускается вложение других тегов в теги <h1>...<h6>.

1.1. Тег <h1>

Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег <h1> должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.

1.2. Тег <h2>

Им обозначаются подзаголовки тега <h1>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

1.3. Тег <h3>

Показывает подзаголовки тега <h2>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

1.4. Теги <h4>, <h5>, <h6>

Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.
Для всех тегов доступны ‎глобальные атрибуты.

2. Теги для форматирования текста

2.1. Тег <b>

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.
Для тега доступны ‎глобальные атрибуты.

2.2. Тег <em>

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

2.3. Тег <i>

Отображает шрифт курсивом.
Для тега доступны ‎глобальные атрибуты.

2.4. Тег <small>

Уменьшает размер шрифта на единицу по отношению к обычному тексту.
Для тега доступны ‎глобальные атрибуты.

2.5. Тег <strong>

Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста.
Для тега доступны ‎глобальные атрибуты.

2.6. Тег <sub>

Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.
Для тега доступны ‎глобальные атрибуты.

2.7. Тег <sup>

Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.
Для тега доступны ‎глобальные атрибуты.

2.8. Тег <ins>

Выделяет текст в новой версии документа, подчёркивая его.
Для тега доступны следующие атрибуты: cite, datetime.

2.9. Тег <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа.
Для тега доступны следующие атрибуты: cite, datetime.

3. Теги для ввода «компьютерного» текста

3.1. Тег <code>

Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.
Для тега доступны ‎глобальные атрибуты.

3.2. Тег <kbd>

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

3.3. Тег <samp>

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

3.4. Тег <var>

Выделяет имена переменных, отображая курсивом.
Для тега доступны ‎глобальные атрибуты.

3.5. Тег <pre>

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

4. Теги для оформления цитат и определений

4.1. Тег <abbr>

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

4.2. Тег <bdo>

Используется для замещения текущего направления текста, т.е. текст в теге отображается зеркально.
Для тега доступен атрибут dir.

4.3. Тег <blockquote>

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для тега доступен атрибут cite.

4.4. Тег <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для тега доступен атрибут cite.

4.5. Тег <cite>

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

4.6. Тег <dfn>

Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.
Для тега доступен атрибут title.

5. Абзацы, средства переноса текста

5.1. Тег <p>

Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».
Для тега доступны ‎глобальные атрибуты.

5.2. Тег <br>

Переносит текст на следующую строку, создавая разрыв строки.
Для тега доступны ‎глобальные атрибуты.

5.3. Тег <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.
Для тега доступны ‎глобальные атрибуты.

  • Николай Малахов

    получается так теги b , i- они не придают важность тексту, а em , strong — если нужно выделить или обратить поисковой системе на важность теста , я правильно понял?

    • Да, все верно, когда эти теги внедрили, так и было. Но постепенно границы между важным текстом и просто выделенным текстом размылись. По заверениям Мэтт Каттс из Гугл, между этими тегами нет никакой разницы. Более того, большое количество «важного» текста на странице может быть расценено поисковым роботом как спам.

      • Николай Малахов

        спасибо!!! познавательно у вас учиться 🙂 еще и СЕО поймем )

  • Екатерина

    Здравствуйте Елена, объясните пожалуйста когда следует применять теги форматирования текста, если есть данные свойства в css, а он предпочтительнее и даёт больше возможностей — выделение жирным, подчёркивание, курсив и т.д.

    • Здравствуйте. Теги strong, b, em, i несут смысловую нагрузку, то есть они говорят браузеру, что текст, заключённый в них, очень важен или просто важен, поэтому их начертание в браузере отличается от остального текста. Таблицы стилей позволяют изменить внешний вид элементов, но без придания содержимому значимости. Теги не имеют внешнего вида, это всего лишь контейнеры для содержимого. Браузеры некоторым их них добавляют так называемые стили браузера по умолчанию, которые вы можете переопределить. Но, даже если вы отмените полужирное начертание для элемента strong с помощью {font-weight: normal}, текст, заключённый в него, не перестанет быть для браузера важным.

  • Сергей Сергеевич К

    Извините, что вновь Вас беспокою, у Вас опечатка, или отсутствует пункт 4.2?

  • Здравствуйте, Елена!

    Извините, если злоупотребляю количеством заданных вопросов (за всё время уже 3-й)…

    Может вы знаете, спецификация разрешает использование пустых элементов или ?

    • Здравствуйте, Николай! Спрашивайте, для этого я комментарии на сайте и держу 😉
      Относительно button: элемент представляет собой кнопку, подписанную своим содержимым, то есть текст внутри должен быть.
      Относительно summary: элемент представляет собой подпись или условное обозначение для остального содержимого, поэтому и в этом случае, текст должен быть.

      • А если заполнять с помощью css, например, заполнить стрелкой, по нажатии на которую будет открываться список меню (или тоже самое с summary)?

        button:empty {
        content: «код стрелки»
        }

        • Лучше придерживаться стандартов. Стрелку в кнопку можно вставить с помощью спецсимвола html, а summary не использовать вообще

          • Почитал спецификацию: details и summary, насколько понял, вполне подходят для выпадающего списка навигации (категории). Решил их вместо button (чтобы не использовать javascript) — без стрелки (ну, точнее, её отражать с помощью :before у summary), текст в summary написать. Одобряете?

          • Мне кажется, вы усложняете задачу. Элемент details больше подходит для группировки описательной информации и заголовка, например, характеристик товара.

          • https://uploads.disquscdn.com/images/dc3de3fe53a799b046039c6f07c71c7be7a88cbb39ba39364415dbfa0d959c05.png

            Вот так хотел… Считаете вместо details и summary лучше что-то другое использовать для выпадающих категорий по щелчку по названию раздела?

          • Вообще-то лучше просто использовать обычные многоуровневый списки. Есть еще универсальная библиотека скриптов — http://jqueryui.com/. Может там что для своих целей найдете.

          • В общем, совместно с , наверное, наиболее правильное решение для данной задачи вместо details и summary.

          • Это решение кроссбраузерное, но с точки зрения стандарта — костыльное. А предыдущий вариант вообще работает не во всех браузерах http://caniuse.com/#search=details.

      • Елена, вопрос про button снимаю, решил делать по-человечески (использую summary и текст в нём) 🙂

        Спасибо за помощь, Вы очень добры!

  • По клику не открываются, но скрипта всего одна строчка, хотя дело ваше 😉

    • А почему костыльное считается? Если предусмотрены для этого атрибуты (type=»checkbox») — или это не для этого предусмотрено?

      • Потому что элемент input относится к элементам форм.

        • Так со скриптами ещё такой момент… изначально же будут скрыты категории (display: none;) и только открываться по клику скриптом. А поисковые пауки уже научились индексировать ссылки такие? Раньше вроде не индексировали, если не ошибаюсь