Теги заголовка html-документа

Любой документ начинается с заголовка, который может быть разного размера. Существует шесть уровней заголовков в HTML: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. При отображении любого заголовка, браузер добавляет одну строку до и одну строку после этого заголовка.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример заголовков в HTML</title>
  </head>
  <body>
    <h1>Заголовок H1</h1>
    <h2>Заголовок H2</h2>
    <h3>Заголовок H3</h3>
    <h4>Заголовок H4</h4>
    <h5>Заголовок H5</h5>
    <h6>Заголовок H6</h6>
  </body>
</html>

Получим следующий результат:

Теги html-заголовков, тег заголовка, тег h1, тег h2, тег h3, тег h4, тег h5, тег h6

Тег абзаца (параграфа)

HTML предлагает способ структурирования вашего текста в разные абзацы с помощью тега <p>. Каждый абзац текста должен находиться между открывающим <p> и закрывающим тегом </p>, как показано ниже в примере:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример абзацев в HTML</title>
  </head>
  <body>
    <p>Первый абзац текста</p>
    <p>Второй абзац текста</p>
    <p>Третий абзац текста</p>
  </body>
</html>

Получим следующий результат:

Тег абзаца в html, тег параграфа, тег p

Тег разрыва строки

Всякий раз, когда Вы используете тег <br />, все последующее за ним элементы начинаются со следующей строки. Этот тег является примером пустого элемента, в котором Вам не нужны открывающие и закрывающие теги, так как между ним нет ничего.

Тег <br /> имеет пробел между символами br и косой чертой. Если Вы пропустите это пространство, то у старых браузеров возникнут проблемы с отображением разрыва строки, а если Вы пропустите символ косой черты и просто используйте тег <br>, то он будет недействителен в XHTML.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример разрыва строки в HTML</title>
  </head>
  <body>
    <p>Привет<br />
    Вы выполнили свое задание вовремя.<br />
    Спасибо</p>
  </body>
</html>

Получим следующий результат:

Тег разрыва строки, тег br

Центрирование содержимого

Вы можете использовать тег <center>, чтобы поместить любой контент в центр страницы или в любую ячейку таблицы.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример центрирования содержимого в HTML</title>
  </head>
  <body>
    <p>Текст не по центру.</p>
    <center>
      <p>Текст по центру.</p>
    </center>
  </body>
</html>

Получим следующий результат:

Тег центрирования содержимого, тег center, текст по центру

Тег горизонтальной линии в HTML

Горизонтальные линии используются для визуального разбиения разделов документа. Тег <hr> создает, из текущей позиции в документе, строку (горизонтальную линию) на правое поле и соответственно разбивает строку.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример горизонтальной линии в HTML</title>
  </head>
  <body>
    <p>Первый абзац и он должен быть вверху.</p>
    <hr />
    <p>Второй абзац и он должен быть внизу.</p>
  </body>
</html>

Получим следующий результат:

Тег горизонтальной линии, тег hr, горизонтальная линия

Снова тег <hr /> является примером пустого элемента, где Вам не нужны открывающие и закрывающие теги, так как между ним нет ничего.

В HTML тег <hr /> имеет пробел между символами hr и косой чертой. Если Вы не поставите этот пробел, то у старых браузеров возникнут проблемы с отображением горизонтальной линии, а если Вы пропустите символ косой черты и просто используйте <hr>, то он будет недействителен в XHTML.

Сохранение форматирования

Иногда Вы хотите, чтобы ваш текст соответствовал точному формату того, как он написан в html-документе. В этих случаях Вы можете использовать тег <pre>.

Любой текст между открывающим тегом <pre> и закрывающим тегом </pre> сохранит форматирование исходного документа.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример сохранения форматирования в HTML</title>
  </head>
  <body>
    <pre>
      function testFunction( strText ){
        alert (strText)
      }
    </pre>
  </body>
</html>

Получим следующий результат:

Тег сохранения форматирования, тег pre, сохранение форматирования

Попробуйте использовать этот же код, не сохраняя его внутри тегов <pre>...</pre>.

Неразрывный пробел в HTML

Предположим, Вы хотите использовать фразу «Пираты Карибского моря: Мертвецы не рассказывают сказки». Здесь Вы не хотите, чтобы браузер разделил «Пираты», «Карибского», «моря:», «Мертвецы», «не», «рассказывают» и «сказки» на две строки:

Пример строки без неразрывного пробела

В тех случаях, когда Вы не хотите, чтобы браузер клиента прерывал текст, Вы должны использовать в HTML неразрывный пробел &nbsp; вместо обычного пробела. Например, при написании фразы «Пираты Карибского моря: Мертвецы не рассказывают сказки» в коде абзаца Вы должны использовать что-то похожее на следующий код:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример неразрывного пробела в HTML</title>
  </head>
  <body>
    <p>Самый популярный кинофильм этой весны: «Пираты&nbsp;Карибского&nbsp;моря:&nbsp;Мертвецы&nbsp;не&nbsp;рассказывают&nbsp;сказки»</p>
  </body>
</html>

Получим следующий результат:

Неразрывный пробел в HTML, &nbsp;, Неразрывный пробел
Источник: HTML - Basic Tags.

Оглавление