HTML первые шаги - урок 1 - Теги h1-h6, p, strong

04/12/2019, by Ivan

О том как создавать HTML-документы читайте в HTML-первые шаги.

Прошлом уроке мы создали наш первый HTML-документ.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>
    HTML мои первые шаги
  </body>
</html>

В этом уроке мы будем заполнять наш документ текстом. Добавим самый распространенный тег в HTML, тег . Не забывайте, что теги пишутся на латинице и это не русская эр. Тег - это сокращение от слова paragraph (параграф) и означает абзац текста, параграф.

Весь текст в HTML должен быть заключен в тот или иной тег, поэтому давайте в нашем документе текст обернем в тег :

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>
    <p>HTML мои первые шаги</p>
  </body>
</html>

Визуально наш документ ничем не изменился, но все же структура html-документа стала более правильной. Мы также можем добавить еще несколько абзацов текста:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>
    <p>HTML мои первые шаги</p>
    <p>Каждый охотник желает</p>
    <p>знать где</p>
    <p>сидит фазан</p>
  </body>
</html>

Как видите все довольно просто. Теги p размещаются на одном уровне.

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

Для заголовков мы будем использовать теги h1, h2, h3, h4, h5, h6. Цифра после h (header - заголовок) обозначает важность этого заголовка. Причем заголовк h1 должен быть только один на странице и он обозначает о чем эта HTML-страница. Вслед за h1 можно использовать h2 и h3, потом h4 и так далее. Как правило шести уровней вложенности заголовков вполне хватает.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>
    <h1>Мой первый HTML-документ</h1><br>    <h2>Мои первые шаги</h2>
    <p>HTML мои первые шаги</p>
    <h3>Еще один шаг</h3><br>    <h2>А так говорят</h2>
    <p>Каждый охотник желает</p>
    <p>знать где</p>
    <p>сидит фазан</p>
  </body>
</html>

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

Еще одна особенность тегов h1-h6, в том что они выделяются жирным. Выделять тексть жирным можно и с помощью тега :

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   <h1>Мой первый HTML-документ</h1>
    <h2>Мои первые шаги</h2>
    <p>HTML мои первые шаги</p>
   <h3>Еще один шаг</h3>
   <h2>А так говорят</h2>
    <p>Каждый <strong>охотник</strong> желает</p>
    <p>знать где</p>
    <p>сидит фазан</p>
  </body>
</html>

Заметьте, чтобы выделить текст жирным, мы используем именно тег strong. Нельзя использовать h1-h6 внутри тега p! Запомните это, использование тегов h1-h6 в теге p может серьезно подпортить позиции сайта в поисковике Google.

Запомним, так правильно:

<p>Очень <strong>жирный</strong> текст</p>

А вот это очень плохо:

<p><h3>не делайте</h3> так!</p>

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

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience

HTML первые шаги - урок 1 - Теги h1-h6, p, strong