Заголовки html в html: HTML теги h1, h2, h3, h4, h5, h6 заголовки

Содержание

HTML теги h2, h3, h4, h5, h5, h6 заголовки

HTML теги h2, h3, h4, h5, h5, h6 — это шесть заголовков показывающих относительную важность блока после заголовка в зависимости от уровня заголовка h2, h3, h4 и т.д. Тег h2 — заголовок первого уровня, тег h3 — второго, тег h4 — третьего, тег h6 — наименее значимый заголовок из всех. Заголовок h2 — второй по важности для SEO сайта элемент на странице после тега title (заголовка страницы) и самый важный тег из всех тегов H.

Использование html тега заголовка h2 на странице допускается не более одиного раза и по умолчанию, заголовок первого уровня h2 отображается самым крупным (среди прочих тегов H) шрифтом жирного начертания. Остальные теги заголовков H имеют шрифт меньшего размера в зависимости от уровня.

Пример использования заголовка h2

Заголовки h2, h3, h4,…, h6 — html теги имеющие обязательный закрывающий тег. Они относятся к блочным элементам и всегда отображаются с новой строки. Элементы следующие после заголовка H также начинаются с новой строки без использования <br />. Так же, до и после заголовка h2-h6 добавляется отступ. При использовании тега h2 и других тегов заголовков допускается использование атрибута align, который определяет выравнивание заголовка. По умолчанию, все html-теги h2-h6 выравниваются по левому краю (h2 align left), при помощи атрибута align можно выровнять тег h2 по центру (h2 align center) или по правому краю (h2 align right).

Так же, нежелательно использование тегов внутри h2, h3, h4,…,H6. Особенно совместное использование заголовков H с html-тегами: STRONG, B, EM и A.

Теги h2,h3,h4 пример:

<html>
 <head>
 <title>Заголовки h2, h3, h4</title>
 </head>
 <body>
  <h2>Название статьи</h2>
  <p>Вступление.</p>
  <h3>Заголовок статьи 1</h3>
  <p>Часть статьи 1.</p>
  <h4>Подзаголовок статьи 1</h4>
  <p>Пункт 1 части 1.</p>
  <h4>Подзаголовок статьи 2</h4>
  <p>Пункт 2 части 1.</p>

  <h3>Заголовок статьи 2</h3>
  <p>Часть статьи 2.</p>
  <h4>Подзаголовок статьи 2</h4>
  <p>Пункт 1 части 2.</p>
 </body>
</html>

Поскольку теги h2,…,h6 призваны акцентировать внимание поисковых систем на определённых участках текста, их используют при SEO верстки сайта, например для отображения h2 заголовка текста или иного контента. Однако использование заголовков h3-h6 зачастую не ограничивается СЕО копирайтингом и выходит за рамки текста. В результате заголовки и их свойства используются для оформления меню категорий и даже элементов сайдбара или футера. В подобных случаях может быть нарушен не только порядок размещения заголовков H на странице по уровню, но и крайне важный принцип оригинальности заголовков h2,h3,h4,h5,h5,h6 в рамках всех страниц сайта. Об этом ниже.

HTML тег h2 что писать и как заполнять

От того как прописать тег h2 и остальные теги H, во многом зависит успешность оптимизации и SEO продвижения сайта по запросам в поиске. Перед тем как сделать заголовок h2 стоит учитывать несколько простых правил. Используя подобные правила, вы можете произвести собственный SEO-аудит сайта самостоятельно. Они касаются того каким будет текст заголовка h2 и где будут размещены заголовки.

Как использовать заголовки h2-h6:

Иерархия заголовков. Заголовок h2 должнт быть выше всех остальных заголовков h на странице. Остальные заголовки по порядке уровня.
Градация шрифтов. Чем выше уровень заголовка (h2 — самый высокий) — тем больше шрифт заголовка.
Не больше одного h2 на странице. HTML-тег h2 можно использовать только один раз на странице. Два заголовка h2 введут в заблуждение поскового робота, что может привести к непредсказуемым последствиям при индексации сайта.
Ничего лишнего в заголовках H. Не используйте в заголовках h2-H6 ничего кроме текста. Избегайте использования других тегов акцентирования (strong, b, em) и ссылок внутри тегов H.
Не злоупотребляйте заголовками h3,h4,h5,h5,h6. Чрезмерное количество «важных» элементов страницы может быть истолковано как спам или переоптимизация сайта.

Текст заголовка h2,h3,h4,…,h6

Теги h2-h6 должны содержать коротокое описание соответствующей секции текста с харатерными ключевыми словами. Не стоит включать в содержимое заголовка ничего лишнего. При заполнении h2,h3,h4,h5,h5,h6 заголовков, а так же заголовка страницы title и прочих атрибутов, желательно придерживаться следующих правил при оценке значимости заголовка.

Содержание заголовков h2-H6:

Прямое вхождение ключевого слова в заголовке. Точное соответствие ключевого слова в заголовке повышает релевантность страницы по соответствующему запросу.
Уникальность заголовка относительно других страниц сайта. Повторяющиеся заголовки на разных страницах сайта могут не учитыватся поисковыми системами.
Близость заголовка к началу документа. Чем ближе к началу html-кода находится заголовок, тем больше его значение относительно других элементов страницы и тем более значимым является содержимое заголовка.
Близость ключевого слова к началу заголовка. В идеале, заголовок должен начинаться с ключевого слова.
Длина заголовка h2,h3,h4,…,h6. Длина заголовка не должна превышать 60 символов. Поисковые системы обрабатывают ограниченое количество знаков, длинные заголовки не будут восприняты полностью.
Грамотность заголовков. Грамматические ошибки в заголовке снижают релевантность заголовка.
Плотность ключевых слов в заголовке. Все заголовки оцениваются на переоптимизацию. По этому, не стоит впихивать в заголовок все больше ключевых слов, заголовок может быть проигнорирован.

Тег h2 joomla, wordpress — заголовки в CMS

Многие CMS поддерживают использование заголовков h2,…,h6. Иногда заголовки расставляются автоматически. Однако не всегда с учетом специфики сайта. Правильная расстановка заголовков в тегах h2,2,3,4,5,6 на joomla, wordpress и сайтах других современных CMS может дать потрясающий результат для СЕО сайта. По этому, не жалейте времени на настройку движка сайта. Поверьте, окупится.

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

Пишите в комментариях, как вы используете H-заголовки.
Добавляйте статью в избранное, делитесь с друзьями.
Подписывайтесь на СЕО-блог.

Пишите коротки, емкие и грамотные заголовки.

Получайте бесплатные уроки и фишки по интернет-маркетингу

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	2.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Синтаксис

<h2>Заголовок первого уровня</h2>

Атрибуты

align: Определяет выравнивание заголовка.

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

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег h2 и h3</title>
 </head>
 <body>

  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna 
  aliguam erat volutpat.</p>

  <h3>Ut wisis enim ad minim veniam</h3>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution 
  ullamcorper suscipit lobortis nisl ut aliquip ex ea 
  commodo consequat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид заголовков первого и второго уровня в браузере

Примечание

Заголовки очень «любят» поисковые системы, они повышают ценность
текста на веб-странице, который располагается внутри тегов <h2>…<h6>.
По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью
стилей любой текст можно установить большого размера и, тем самым, сделать его
заголовком.

Заголовки HTML уроки для начинающих академия

Заголовки

Заголовки 2

Заголовки 3

Заголовки 4

Заголовки 5

Заголовки 6

Заголовки HTML

Заголовки определяются с помощью <h2> для <h6> тегов.

<h2>определяет наиболее важный заголовок. <h6>определяет наименее важный заголовок.

Пример

<h2>Заголовки 1</h2>
<h3>Заголовки 2</h3>
<h4>Заголовки 3</h4>
<h5>Заголовки 4</h5>
<h5>Заголовки 5</h5>
<h6>Заголовки 6</h6>

Примечание: Браузеры автоматически добавляют пробел (поле) до и после заголовка.

Заголовки важны

Поисковики используют заголовки для индексации структуры и содержания ваших веб-страниц.

Пользователи снимают страницы по заголовкам. Важно использовать заголовки для отображения структуры документа.

<h2>заголовки должны использоваться для основных рубрик, за которыми следуют <h3> заголовки, затем менее важные <h4> и так далее.

Примечание: Используйте заголовки HTML только для заголовков. Не используйте заголовки, чтобы сделать текст
BIG или bold.

Большие заголовки

Каждый заголовок HTML имеет размер по умолчанию. Однако можно указать размер любого заголовка с атрибутом style, используя свойство CSS font-size:

Пример

<h2
style=»font-size:60px;»>Heading 1</h2>

Горизонтальные правила HTML

Тег <hr> определяет тематический разрыв в HTML-странице и чаще всего отображается как горизонтальное правило.

Элемент <hr> используется для разделения содержимого (или определения изменения) в HTML-странице:

Пример

<h2>This is heading 1</h2>
<p>This is some text.</p>
<hr>
<h3>This is heading 2</h3>
<p>This is some other text.</p>
<hr>

Элемент HTML <head>

Элемент HTML <head> не имеет ничего общего с заголовками HTML.

Элемент <head> является контейнером для метаданных. Метаданные HTML — это данные о HTML-документе. Метаданные не отображаются.

Элемент <head> помещается между тегом <html> и тегом <body>:

Пример

<head>
<title>My First HTML</title>
<meta charset=»UTF-8″>
</head>

<body>
.
.
.

Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

Как просмотреть HTML-код?

Вы когда-нибудь видели веб-страницы и спрашивали «Эй! Как они это сделали?»

Просмотр исходного кода HTML:

Щелкните правой кнопкой мыши в HTML-страницы и выберите «Просмотр источника страницы» (в Chrome) или «Просмотр источника» (в IE), или аналогичные в других браузерах. Откроется окно, содержащее исходный HTML-код страницы.

Проверьте элемент HTML:

Щелкните правой кнопкой мыши на элементе (или пустой области), и выберите «проверить» или «проверить элемент», чтобы увидеть, какие элементы составляются (вы увидите как HTML и CSS). Вы также можете редактировать HTML или CSS на лету на панели элементы или стили, которая открывается.

Справочник тегов HTML

Справочник тегов html5css.ru содержит дополнительную информацию об этих тегах и их атрибутах.

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

Тег	Описание
<html>	Определяет корень HTML-документа
<body>	Определяет тело документа
<head>	Контейнер для всех элементов Head (название, скрипты, стили, мета-информация и многое другое)
<h2> to <h6>	Определяет заголовки HTML
<hr>	Определяет тематическое изменение содержания

–: HTML элементы заголовков секций — HTML

HTML элементы <h2>–<h6> представляют собой 6 уровней заголовков секций. <h2> это наибольший заголовок и<h6> — наименьший

Информация о заголовке может использоваться пользовательскими агентами, например, для автоматического создания оглавления для документа
Не используйте низкие уровни чтобы снизить размер шрифта: используйте CSS font-size вместо.
Избегайте пропуск уровней заголовков: всегда начинайте с <h2>, потом используйте <h3>, и так далее.
Вам следует рассмотреть избегание использования <h2> более раза на страницу. Смотрите Defining sections в <h2>–<h6>: The HTML Section Heading elements.

Все заголовки

Следующий код показывает все уровни заголовков в действии

<h2>Heading level 1</h2>
<h3>Heading level 2</h3>
<h4>Heading level 3</h4>
<h5>Heading level 4</h5>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Вот результат этого кода:

Пример страницы

Следующий код показывает несколько заголовков с некоторым содержанием под ними .

<h2>Heading elements</h2>
<h3>Summary</h3>
<p>Some text here...</p>

<h3>Examples</h3>
<h4>Example 1</h4>
<p>Some text here...</p>

<h4>Example 2</h4>
<p>Some text here...</p>

<h3>See also</h3>
<p>Some text here...</p>

Результат кода:

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

Не делай

<h2>Heading level 1</h2>
<h4>Heading level 3</h4>
<h5>Heading level 4</h5>

Делай

<h2>Heading level 1</h2>
<h3>Heading level 2</h3>
<h4>Heading level 3</h4>

Расположение

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

h2 Жуки
1. h3 Этимология
2. h3 Распределение и разнообразие
3. h3 Эволюция
  1. h4 Поздний полиозой
  2. h4 Юрский период
  3. h4 Меловойский период
  4. h4 Кайнозойский период
4. h3 Внешняя морфология
  1. h4 Голова
    1. h5 Рот
  2. h4 Туловище
    1. h5 Передгрудь
    2. h5 Пиероторакс
  3. h4 Ноги
  4. h4 Крыла
  5. h4 Живот

Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.

Содержание раздела маркировки

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

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

Пример

<header>
  <nav aria-labelledby="primary-navigation">
    <h3>Primary navigation</h3>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h3>Footer navigation</h3>
    <!-- navigation items -->
  </nav>
</footer>

В этом примере технология чтения с экрана объявила бы, что есть два <nav> разделы, один называется «Основная навигация», а другой — «Нижний колонтитул». Если ярлыки не были предоставлены, человеку, использующему программное обеспечение для чтения с экрана, возможно, придётся расследовать каждый nav содержание элемента, чтобы определить их назначение.

Характеристика	Статус	Комментарий
HTML Living Standard Определение ‘<h2>, <h3>, <h4>, <h5>, <h5>, and <h6>’ в этой спецификации.	Живой стандарт
HTML5 Определение ‘<h2>, <h3>, <h4>, <h5>, <h5>, and <h6>’ в этой спецификации.	Рекомендация
HTML 4.01 Specification Определение ‘<h2>, <h3>, <h4>, <h5>, <h5>, and <h6>’ в этой спецификации.	Рекомендация

BCD tables only load in the browser

Зачем нужны заголовки и какие теги использовать — Блог HTML Academy

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

Когда много лет назад придумали HTML, мир был совсем другим. Авторы спецификации вдохновлялись текстовыми документами, где в одном потоке подряд шли абзацы, списки, таблицы, картинки и конечно заголовки. Прямо как в ваших рефератах и курсовых: самый большой заголовок — название, заголовки поменьше — части или главы.

В HTML с тех пор шесть уровней заголовков: от h2 до h6. Они озаглавливают всё, что за ними следует и образуют, так называемые, неявные секции. Такие логические части страницы. Неявные они потому, что закрываются только когда появляется следующий заголовок.

<h2>Еда</h2>

  <h3>Фрукты</h3>
  <p>Классные</p>

    <h4>Яблоки</h4>
    <p>Вообще</p>

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

<h2>Еда</h2>
<section>
  <h3>Фрукты</h3>
  <p>Классные</p>
  <section>
    <h4>Яблоки</h4>
    <p>Вообще</p>
  </section>
</section>

Из-за такой системы неявных секций, спецификация настойчиво рекомендует не использовать элементы h* для подписей под заголовками. Это обычный параграф, а заголовок должен обозначать отдельную часть содержимого. В спецификации есть глава с примерами разметки сложных элементов: подписи, крошки, диалоги — почитайте.

Ладно! Раз у нас есть явные секции, то по вложенности легко определить отношение частей. Так может браузеры сами догадаются какого уровня заголовки нужны? А то считать: h2, h3, аш… сбился. Так было бы удобнее менять части кода местами.

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

<h2>Еда</h2>
<section>
  <h2>Фрукты</h2>
  <section>
    <h2>Яблоки</h2>
  </section>
</section>

Разработчикам идея очень понравилась, многие даже бросились её внедрять. Но вот беда: алгоритм аутлайна до сих не внедрил ни один браузер, читалка или поисковик. На таких страницах все заголовки кричат, что они №1 и самые важные. Но если важно всё, то уже ничего не важно.

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

Нет, погоди. Я ставлю класс на div и все сразу видят — это самый большой заголовок, ставлю другой класс — заголовок становится меньше, видно же. Зачем тогда эта ерунда с расчётом уровней, если есть CSS?

<div>
  Фрукты бесплатно
</div>
<div>
  Только за деньги
</div>

Вы конечно правы, стили создают визуальную модель важности: крупный чёрный текст важнее, меленький серенький вообще не важен. Но только если вы смотрите на такую страницу.

Есть две важные группы пользователей, которые читают вашу страницу по тегам разметки. Они не смотрят насколько крупный и чёрный ваш div — чтобы найти на странице самое важное, они ищут h2. Это читалки и роботы. С роботами всё понятно: это поисковики, которым нужно помогать понимать ваши страницы.

Читалками или скринридерами пользуются люди, которые плохо или совсем не видят ваши интерфейсы, или не могут управлять браузером привычным образом. VoiceOver, NVDA, JAWS читают содержимое вслух и ориентируются только по значимым тегам. Элементы div и span не значат ни-че-го, какие бы классы и стили вы не накрутили. Такой сайт — как газета без заголовков, просто месиво текста.

Да какая газета! Очнись, 2017 на дворе, я изоморфное одностраничное приложение делаю, а не стенгазету. У меня тут стейты компонентов — нафига семантика там, где нет текста? Очень хороший вопрос.

Все читалки идут по странице тег за тегом, от первого к последнему. И читают подряд всё, что внутри. Крайне неэффективно: каждая страница начинается с шапки и пока её пройдёшь, забудешь за чем шёл. Поэтому у читалок есть специальные режимы, показывающие только важные части страницы. Структурные элементы header, nav, main и другие, все ссылки, все заголовки.

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

— Инстаграм
  — Лента
    — Закат
    — Латте
  — Настройки
  — Профиль

Но бывает, что в дизайне нет заголовков для важных частей. Дизайнер рисует, ему всё ясно: меню с котлетой, поиск с полем и так далее. Но это не должно мешает вам делать доступные интерфейсы. Расставьте нужные заголовки, а потом доступно их спрячьте. Как? Только не display: none, его читалки игнорируют. Есть такой паттерн visually hidden, подробнее в описании к видео.

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

Заголовки HTML — Веб учебники

На сайте нет рекламы

HTML заголовки — или субтитры, которые вы хотите отобразить на веб странице.

HTML Заголовки

HTML заголовки определяются с помощью тегов <h2> по <h6>.

<h2> определяет наиболее важный заголовок. <h6> определяет наименее важный заголовок.

Пример

<h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

Попробуйте сами »

Примечание: Браузеры автоматически добавляют пробелы (поля) до и после заголовка.

Заголовки очень важны

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

Пользователи часто просматривают страницу по ее заголовкам. Важно использовать заголовки, чтобы показать структуру документа.

Заголовок <h2> должен использоваться для основного заголовка, а затем заголовок <h3>, менее важные
<h4>, и так далее.

Примечание: Используйте HTML заголовки только для заголовков. Не используйте заголовки для создания текста
BIG или bold.

Большие заголовки

Каждый HTML заголовок имеет размер по умолчанию. Однако вы можете указать размер для любого заголовка
с атриутом style, используя CSS свойство font-size:

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте правильный HTML тег, чтобы добавить заголовок с текстом «Лондон».

Отправить ответ »

Начните упражнения

HTML Справочник тегов

SchoolsW3 Справочник тегов содержит дополнительные сведения об этих тегах и их атрибутов.

Тег	Описание
<html>	Определяет корень HTML документа
<body>	Определяет тело документа
<h2> по <h6>	Определяет заголовки HTML

Заголовки в HTML: назначение HTML заголовков и их использование в документах

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Эта запись поможет вам разобраться с делением страниц сайта на разделы при помощи HTML заголовков. Если вы заботитесь о том, чтобы информация на вашем сайте была доступна для посетителей и была представлена удобно, то вам просто необходимо делить большие документы на разделы при помощи специальных HTML тэгов, которые создают заголовки. Кроме того, использование заголовков помогает продвигать сайта, так как поисковые системы считают текст внутри заголовка более важным, чем текст абзаца.

Заголовки в HTML: назначение HTML заголовков и их использование в документах

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

Для чего нужны HTML заголовки

Содержание статьи:

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

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

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

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

Виды HTML заголовков

Аналогия HTML заголовков с главами и частями в книге довольно неплохо демонстрирует деление HTML заголовков на виды или уровни. Всего насчитывается шесть уровней HTML заголовков: <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Заголовок первого уровня считается самым важным в HTML, поэтому браузер отображает его самым крупным и жирным шрифтом, соответственно, заголовок <h6> будет отображен, как самый маленький.

Правда, стили отображение HTML заголовков можно изменить при помощи CSS или HTML атрибутов и сделать так, что заголовок <h2> будет отображаться шрифтом, размер которого меньше, чем размер шрифта <h6>.

SEO оптимизаторы рекомендуют использовать один единственный заголовок <h2> в документе, и не более четырех HTML заголовков второго уровня, а дальше уже вам придется исходить из объема текста и необходимости его деления на разделы (ни разу не видел ни одного сайта, где бы использовались HTML заголовки пятого и шестого уровней).

В принципе, утверждение сверху логично: заголовок первого уровня на странице должен быть один (вы же никогда не встречали книгу, на первой странице которой написано название, а потом, где-нибудь посреди повествование автор берет и переименовывает книгу, ведь нет?). Часто HTML заголовок первого уровня совпадает с названием HTML документа, которое указывается в тэге <title>. Заголовков второго уровня может быть несколько, так как ими мы делим документ на части, а заголовков третьего уровня может быть еще больше, так как ими мы делим HTML документ на главы.

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

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

Технические особенности заголовков в HTML

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

Так же у HTML заголовков есть уникальный атрибут align. Браузер всегда добавляет пустое пространство над и под HTML заголовками, если, конечно, данное правило не отменить при помощи CSS стилей. Пожалуй, это всё, что нужно знать про HTML заголовки и о том, как их отображают браузеры.

Пример использования HTML заголовков

Мы довольно подробно описали как работают HTML заголовки, их назначение и особенности. Теперь давайте посмотрим примеры HTML заголовков и того, как их обработает браузер. Пример будет сразу с использование выравнивания текста внутри HTML заголовков (более подробно про выравнивание может прочитать в статье HTML абзацы, ссылку на которую я давал ранее). Откройте любой редактор, можно даже Блокнот (но есть множество бесплатных альтернатив: HTML редактор Notepad++, CSS редактор Brackets, PHP редактор IDE NetBeans, позволю порекомендовать один платный JavaScript редактор Sublime Text 3, все они имеют гораздо более широкий функционал и намного удобнее, чем Блокнот), и сохраните код ниже, назвав файл index.html:

<!DOCTYPE html>

<html lang=»ru-RU»>

<head>

<meta charset=»UTF-8″>

<title>HTML заголовки и примеры их использования</title>

<link rel=»stylesheet» type=»text/css» href=»style.css» />

</head>

<body>

<h2>HTML заголовок первого уровня</h2>

<p>Для сравнения добавим текст внутри HTML параграфа, чтобы

было заметно, как браузер выделяет HTML заголовки разного уровня.

А также для того, чтобы были видны вертикальные отступы, которые

создает браузер, встречая HTML заголовок</p>

<h3>HTML заголовок второго уровня</h3>

<h4>HTML заголовок третьего уровня</h4>

<h5 align=»center»>HTML заголовок четвертого уровня</h5>

<p>Для сравнения добавим текст внутри HTML параграфа, чтобы

было заметно, как браузер выделяет HTML заголовки разного уровня.

А также для того, чтобы были видны вертикальные отступы, которые

создает браузер, встречая HTML заголовок</p>

<h5 align=»right»>HTML заголовок пятого уровня</h5>

<h6 align=»left»>HTML заголовок шестго уровня</h6>

<p>Для сравнения добавим текст внутри HTML параграфа, чтобы

было заметно, как браузер выделяет HTML заголовки разного уровня.

А также для того, чтобы были видны вертикальные отступы, которые

создает браузер, встречая HTML заголовок</p>

</body>

</html>

<!DOCTYPE html>

<head>

<title>HTML заголовки и примеры их использования</title>

</head>

<body>

<h2>HTML заголовок первого уровня</h2>

<p>Для сравнения добавим текст внутри HTML параграфа, чтобы

было заметно, как браузер выделяет HTML заголовки разного уровня.

А также для того, чтобы были видны вертикальные отступы, которые

создает браузер, встречая HTML заголовок</p>

<h3>HTML заголовок второго уровня</h3>

<h4>HTML заголовок третьего уровня</h4>

<h5 align=»center»>HTML заголовок четвертого уровня</h5>

<p>Для сравнения добавим текст внутри HTML параграфа, чтобы

было заметно, как браузер выделяет HTML заголовки разного уровня.

А также для того, чтобы были видны вертикальные отступы, которые

создает браузер, встречая HTML заголовок</p>

<h5 align=»right»>HTML заголовок пятого уровня</h5>

<h6 align=»left»>HTML заголовок шестго уровня</h6>

<p>Для сравнения добавим текст внутри HTML параграфа, чтобы

было заметно, как браузер выделяет HTML заголовки разного уровня.

А также для того, чтобы были видны вертикальные отступы, которые

создает браузер, встречая HTML заголовок</p>

</body>

</html>

Не забывайте использовать пробельные символы для форматирования HTML кода. Откройте получившийся файл в браузере, если вы сделали всё, как в примере, то увидите примерно следующую HTML страницу, созданную браузером:

Пример отображения HTML заголовков на странице в браузере

Здесь мы специально подсветили элемент HTML заголовка h5: светло-жёлтая область – это как раз те самые отступы, которые создает браузер, когда встречает HTML заголовки. На рисунке также видно, как изменяется способ отображения HTML заголовков в зависимости от уровня. И вы можете увидеть, как браузер выравнивает текст внутри HTML заголовка в зависимости от значения атрибута align.

Подведем итого всему, что было сказано про HTML заголовки:

HTML заголовки используются для деления документа на разделы.
В HTML шесть уровней заголовков, которые отображаются в соответствии их значимости.
HTML заголовки – это блочные элементы.
Тэги HTML заголовков парные.
Для HTML заголовков доступны все универсальные атрибуты и атрибуты событий.
Браузер создает вертикальные отступы от HTML заголовков.
HTML заголовки очень любят использовать SEO оптимизаторы для продвижения сайтов.

заголовков HTML

Заголовки HTML — это заголовки или субтитры, которые вы хотите отображать на веб-странице.

Заголовки HTML

Заголовки

HTML определяются с помощью тегов от

до

определяет наиболее важный заголовок.

определяет наименее важный заголовок.

Пример

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Попробуй сам »

Примечание. Браузеры автоматически добавляют пробелы (поля) до и после заголовка.

Заголовки важны

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

заголовки должны использоваться для основных заголовков, за которыми следуют заголовки

, затем менее важные

и т. Д.

Примечание: Используйте заголовки HTML только для заголовков.Не используйте заголовки для создания текста
BIG или жирный .

Большие заголовки

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

`Упражнения HTML`

`Ссылка на тег HTML`

Справочник тегов

W3Schools содержит дополнительную информацию об этих тегах и их атрибутах.

Тег	Описание
	Определяет корень HTML-документа
	Определяет тело документа
до	Определяет заголовки HTML

Тег

Описание

Определяет корень HTML-документа

Определяет тело документа

до

Определяет заголовки HTML

`HTML абзацы`

Абзац всегда начинается с новой строки и обычно представляет собой блок текста.

`HTML абзацы`

Элемент HTML

определяет абзац.

Абзац всегда начинается с новой строки, и браузеры автоматически добавляют пробел (поле) до и после абзаца.

`HTML-дисплей`

Вы не можете быть уверены в том, как будет отображаться HTML.

Большие или маленькие экраны и окна с измененным размером дают разные результаты.

В HTML вы не можете изменить отображение, добавив лишние пробелы или лишние строки в свой HTML-код.

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

`Пример`

Этот абзац содержит много строк в исходном коде, но браузер игнорирует это.

Этот абзац содержит много пробелов в исходнике код, , но браузер игнорирует Это.

Попробуй сам "

`Горизонтальные правила HTML`

Тег

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

Элемент

используется для разделения содержимого (или определения изменения) в HTML. страница:

`Пример`

`Это заголовок 1`

Это какой-то текст.

`Это заголовок 2`

Это другой текст.

Попробуй сам "

Тег

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

`Разрывы строк HTML`

Элемент HTML определяет разрыв строки.

Используйте , если вам нужен разрыв строки (новая строка) без начала нового абзаца:

Тег - это пустой тег, что означает, что он не имеет конечного тега.

`Задача стихотворения`

Это стихотворение будет отображаться в одной строке:

`Пример`

Моя Бонни лежит над океан.

Моя Бонни лежит над морем.

Моя Бонни лежит над океаном.

О, верни мне мою Бонни.

Попробуй сам "

`Решение - HTML-элемент`

 
  Элемент HTML  
  определяет предварительно отформатированный текст. 
  Текст внутри элемента  
  отображается шрифтом фиксированной ширины (обычно
Courier), и он сохраняет как пробелы, так и разрывы строк: 

  Пример 
 
 Моя Бонни лежит над океаном. Моя Бонни лежит над морем. 
  Моя Бонни лежит над
океан. 
  О, верни мне мою Бонни. 
 
Попробуй сам "
 Упражнения HTML 
 Проверьте себя с помощью упражнений 
 упражнение: 
 Используйте правильный тег HTML, чтобы добавить абзац с текстом «Hello World!».

 
 <тело>
 
 
 Отправить ответ »
 Начало упражнения
 Ссылка на тег HTML 
 Справочник по тегам
 W3Schools содержит дополнительную информацию об элементах HTML и их атрибутах.
 Тег  Описание
 Определяет параграф
 Определяет тематическое изменение содержания
 Вставляет одинарный разрыв строки
 
    Определяет предварительно отформатированный текст 
 
 


 


 
  Тег заголовка HTML 
      


 

  Пример 
  Заголовок для 
: 
 
    <статья> 
 <заголовок> 

 
 Заголовок здесь 
 
  Автор: Джон
    Doe 
 
  Дополнительная информация здесь 
 
  
  Lorem Ipsum dolor set amet.... 
 
 
 
Попробуй сам "

  Дополнительные примеры "Попробуйте сами" ниже. 
 
  Определение и использование 
  Элемент  
  представляет собой контейнер для вводного содержания или
набор навигационных ссылок. 
  Элемент  
  обычно содержит: 
   один или несколько элементов заголовка ( - 
) 
    логотип или значок 
    Сведения об авторстве 
 
   Примечание:  У вас может быть несколько элементов  
  в одном
HTML-документ.Однако    нельзя поместить в ,  или другой элемент   . 
 
  Поддержка браузера 
  Числа в таблице указывают первую версию браузера, полностью поддерживающую элемент. 
    Элемент 
     
     
     
     
     
   
   <заголовок> 
      5,0 
      9,0 
      4.0 
      5,0 
      11,1 
   
 
 
 
  Глобальные атрибуты 
  Тег  
  также поддерживает глобальные атрибуты в HTML. 
 
  Атрибуты событий 
  Тег  
  также поддерживает атрибуты событий в HTML. 
 
  Другие примеры 

  Пример 
  Заголовок страницы: 
 
    
 
  Заголовок главной страницы здесь 
 
  Автор:
    Джон Доу 
 
 
 
Попробуй сам "

 
  Связанные страницы 
  Ссылка на HTML DOM: объект заголовка 
 
  Настройки CSS по умолчанию 
  Большинство браузеров будут отображать элемент  
  со следующим значением по умолчанию
значения: 

 
    заголовок {
 display: block; 
}
 



 
  - HTML: язык разметки гипертекста 

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



     Категории содержимого 
     Текущее содержимое, осязаемое содержимое. 
   
   Разрешенное содержание 
     Содержимое потока, но без потомков    или   . 
   
   Отсутствие тега 
     Нет, и начальный, и конечный тег являются обязательными. 
   
   Допущенные родители 
     Любой элемент, который принимает потоковое содержимое.Обратите внимание, что элемент    не должен быть потомком элемента   ,    или другого элемента   . 
   
   Неявная роль ARIA 
     баннер, или нет соответствующей роли, если потомок  article ,  помимо ,  main ,  nav  или  section  element, или элемент с  role = article ,  additional ,  main  ,  навигация  или  регион  
   
   Разрешенные роли ARIA 
      группа ,  презентация  или  нет  
   
   Интерфейс DOM 
      HTMLElement  
   
 
 
  Элемент  
  не разделяет содержимое и, следовательно, не вводит новый раздел в структуру.При этом элемент    обычно предназначен для содержания заголовка окружающего раздела (элемент  h2  -  h6 ), но это , а не . 
  Историческое использование 
  Хотя элемент  
  не входил в спецификации до HTML5, он фактически существовал в самом начале HTML. Как видно на самом первом веб-сайте, изначально он использовался как элемент   .В какой-то момент было решено использовать другое имя. Это позволило    свободно выполнять другую роль в дальнейшем. 
   <заголовок>
   Заголовок главной страницы 
  

  
 Заголовок статьи 
  <статья>
  <заголовок>
     Планета Земля 
     Опубликовано в среду,  4 октября 2017 г. , автор - Джейн Смит 
  
   Мы живем на сине-зеленой планете, на которой так много всего невидимого.
    Продолжить чтение ....

Тег	Описание
	Определяет параграф
	Определяет тематическое изменение содержания
	Вставляет одинарный разрыв строки
	Определяет предварительно отформатированный текст


   Таблицы BCD загружаются только в браузере
 Другие элементы, связанные с разделами:  , 
 ,  ,  , 
, 
, 
, 
, 
, 
, 
 ,  ,  , 
  .
 Использование разделов и контуров HTML
 ARIA: роль баннера - доступность 
 Роль баннера   представляет собой общий и информативный контент, часто помещаемый в начале страницы. Обычно это логотип, название компании, значок поиска, фотография, относящаяся к странице, или слоган.
  
  
   Заголовок 
   Субтитры 
  
 По умолчанию элемент HTML5

  имеет то же значение, что и баннер  ориентир , если только он не является потомком

,

  или  <раздел> .
 Баннер  Роль ориентира  преобразует элемент контейнера, к которому она применяется, в заголовок. Его следует зарезервировать для содержимого заголовка сайта, которое является общим для всего сайта, как правило, вверху каждой страницы.
 Баннер обычно включает в себя логотип или фирменный стиль, возможно, средство поиска для конкретного сайта, и обычно это то, что ваша маркетинговая команда назвала бы заголовком или верхним баннером сайта. Если метод элемента  заголовка  не используется для этого баннера, следует использовать объявление  role = "banner"  для определения ориентира баннера для вспомогательных технологий.
 Вспомогательные технологии могут идентифицировать основной элемент  заголовка  страницы как баннер  , если он является потомком элемента  body  и не вложен в статью  ,  помимо ,  main ,  nav  или  раздел  пп.

Каждая страница может иметь баннер , ориентир , но каждая страница должна быть ограничена только одним заголовком , с ролью баннера. В случае страницы, содержащей роли вложенного документа и / или приложения , каждая роль вложенного документа или приложения также может иметь один ориентир баннер .Если страница включает более одного баннера ориентира, каждая должна иметь уникальную метку.

`Связанные роли, состояния и свойства ARIA`

`Взаимодействие с клавиатурой`

`Необходимые функции JavaScript`

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

  
   Перейти к навигации с помощью клавиатуры 
  
   Достопримечательности ARIA 
   Определение подразделов страницы для удобной навигации

Мы также могли бы написать это с помощью элемента заголовка HTML :

  <заголовок>
   Перейти к навигации с помощью клавиатуры 
  
   Достопримечательности ARIA 
   Определение подразделов страницы для удобной навигации

   Хотя лучше всего использовать элемент  header  и убедиться, что он не является потомком какого-либо подраздела страницы, иногда у вас нет доступа к базовому HTML.В этом случае вы можете добавить роль  баннера  в основной заголовок страницы с помощью JavaScript. Подобная идентификация баннера страницы поможет улучшить доступность сайта.
 -: Элементы заголовка раздела HTML - HTML: Язык разметки гипертекста 
 HTML-элементы с  
  по  
  представляют шесть уровней заголовков разделов. 
 - это самый высокий уровень раздела, а 
 - самый низкий.
 Эти элементы включают только глобальные атрибуты.
 Атрибут  align  устарел; не используйте это.
 Информация заголовка может использоваться пользовательскими агентами для автоматического создания оглавления документа.
 Избегайте использования элементов заголовка для изменения размера текста. Вместо этого используйте свойство CSS  font-size .
 Не пропускайте уровни заголовков: всегда начинайте с 
, за которым следует 
 и так далее.
 Используйте только один 
 на страницу или просмотр. Он должен кратко описывать общую цель содержания.
 Несколько элементов 
 на одной странице
 Использование более одного 
 допускается спецификацией HTML, но не считается оптимальной практикой. Использование только одного 
 выгодно для пользователей программ чтения с экрана.
 Спецификация HTML включает концепцию контура  , сформированного с использованием элементов 
 .Если бы это было реализовано, это позволило бы использовать несколько элементов 
, давая пользовательским агентам, включая программы чтения с экрана, способ понять, что
, вложенный в определенный раздел, является подзаголовком. Эта функция никогда не была реализована; поэтому важно использовать заголовки для описания структуры вашего документа. 
 Следующие статьи предоставляют дополнительную информацию о статусе контуров:
 Все заголовки 
 Следующий код показывает все используемые уровни заголовков.
   Заголовок уровня 1 
 Заголовок уровня 2 
 Заголовок уровня 3 
 Заголовок уровня 4 
 Заголовок уровня 5 
 Заголовок уровня 6 
  
 Вот результат этого кода:
 Пример страницы 
 В следующем коде показано несколько заголовков с некоторым содержанием под ними.
   Элементы заголовка 
 Резюме 
 Здесь текст... 

 Примеры 
 Пример 1 
 Здесь текст ... 

 Пример 2 
 Здесь текст ... 

 См. также 
 Здесь текст ... 
  
 Вот результат этого кода:
 Навигация 
 Обычный метод навигации для пользователей программ чтения с экрана - переход от заголовка к заголовку для быстрого определения содержимого страницы. По этой причине важно не пропускать один или несколько уровней заголовков.Это может создать путаницу, так как человек, перемещающийся таким образом, может задаваться вопросом, где пропавший заголовок.
 Не надо 
   Заголовок уровня 1 
 Заголовок уровня 3 
 Заголовок уровня 4 
  
 До 
   Заголовок уровня 1 
 Заголовок уровня 2 
 Заголовок уровня 3 
  
 Вложенность 
 Заголовки могут быть вложены как подразделы, чтобы отражать организацию содержимого страницы.Большинство программ чтения с экрана также могут создавать упорядоченный список всех заголовков на странице, который может помочь человеку быстро определить иерархию контента:
  h2  Жуки  h3  Этимология
  h3  Распределение и разнообразие
  h3  Evolution  h4  Поздний палеозой
  h4  Юрский
  h4  Меловой период
  h4  Кайнозой
  h3  Внешняя морфология  h4  Головка  h5  Мундштуки
  h4  Грудь  h5  Переднегруди
  h5  Птероторакс
  h4  Ножки
  h4  Крылья
  h4  Живот
 Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.
 Маркировка содержимого раздела 
 Другой распространенный метод навигации для пользователей программного обеспечения для чтения с экрана - создание списка разделенного содержимого и его использование для определения макета страницы.
 Содержимое разделов может быть помечено с помощью комбинации атрибутов  aria-labelledby  и  id , причем метка кратко описывает цель раздела. Этот метод полезен в ситуациях, когда на одной странице есть более одного элемента секционирования.
 Пример 
  <заголовок>
  
     Основная навигация 
    
  




<нижний колонтитул>
  
     Навигация в нижнем колонтитуле 
    
  

  
 В этом примере технология чтения с экрана объявляет о наличии двух разделов 
 , один из которых называется «Основная навигация», а другой - «Навигация по нижнему колонтитулу».Если метки не были предоставлены, человеку, использующему программное обеспечение для чтения с экрана, возможно, придется исследовать содержимое каждого элемента  nav , чтобы определить их назначение.
 Таблицы BCD загружаются только в браузер
 Тег HTML 
 Тег
 HTML
 Тег
 определяет заголовок страницы или раздела. Обычно он содержит логотип, поиск, навигационные ссылки и т. Д.
 Этот тег не представляет новый раздел в структуре. Элемент
 обычно содержит заголовок (элемент
 - 
) окружающего раздела.Однако этого не требуется. 
 Тег
 является одним из элементов HTML5. В HTML-документе разрешается использовать несколько тегов
, которые можно разместить в любой его части.
 Не разрешается размещать тег
 внутри элементов
 и
 , а также в другом теге
.
 Синтаксис¶ 
 Тег
 идет парами. Контент записывается между открывающим (
) и закрывающим (
) тегами.
  

  
     Название документа 
    <стиль>
      ul {
        отступ: 0;
      }
      ul li {
        дисплей: встроенный блок;
        маржа справа: 10 пикселей;
        цвет: # 778899;
      }
    
  
  
    <заголовок>
      
        
           На главную 
           О нас 
        
      
       Добро пожаловать на нашу страницу 
      
    

    <статья>
      <заголовок>
         Заголовок раздела 
         Абзац текста.
      

    
  
   Попробуйте сами »
 Результат¶ 
  

  
     Название документа 
    <стиль>
      тело {
        семейство шрифтов: Arial, sans-serif;
        высота строки: 2;
      }
      h3 {
        выравнивание текста: центр;
      }
      ul {
        отступ: 0;
      }
      ul li {
        тип-стиль-список: нет;
        дисплей: встроенный блок;
        маржа справа: 10 пикселей;
      }
      a {
        дисплей: блок;
        цвет: # 778899;
      }
    
  
  
    <заголовок>
      
        
          
            Lern HTML 
          
          
             Lern Git 
          
        
      
       Добро пожаловать на нашу страницу 
      
    

    <основной>
       Получите ответы на свои вопросы по программированию 
      
        Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов.Этот отрывок приписывается неизвестному наборщику 15 века, который, как полагают, скремблировал отрывки из книги Цицерона «De Finibus Bonorum et Malorum» для использования в сборнике образцов шрифта.
      
      
        Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов. Этот отрывок приписывается неизвестному наборщику 15 века, который, как полагают, скремблировал отрывки из книги Цицерона «De Finibus Bonorum et Malorum» для использования в сборнике образцов шрифта.Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов. Этот отрывок приписывается неизвестному наборщику 15 века, который, как полагают, скремблировал отрывки из книги Цицерона «De Finibus Bonorum et Malorum» для использования в сборнике образцов шрифта.