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

HTML теги друпал drupal

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

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

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

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

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

<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>
<h2>Мои первые шаги</h2> <p>HTML мои первые шаги</p> <h3>Еще один шаг</h3>
<h2>А так говорят</h2> <p>Каждый охотник желает</p> <p>знать где</p> <p>сидит фазан</p> </body> </html>

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

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

<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>

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

 

Добавить комментарий

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Plain text

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