Технология




Школа html-верстки для начинающих

Урок 5
Перенос строки HTML


Содержание урока

Перенос строки HTML

Перенос строки html.mp4

Практикум


Практикум


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

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

В таких случаях самым лучшим выходом из ситуации будет использование тега <br> (вставляет перенос строки). Он является одним из пустых элементов, у которых нет содержимого. Пустые теги, такие как br, изначально не имеют никакого содержимого, поэтому для их использования было придумано краткое описание для представления элемента, то есть в то место, где нужно добавить разрыв строки, просто подставляется тег <br>. Краткое описание подразумевает то, что этот тег не имеет закрывающего тега. Если не было бы краткого описания, пришлось бы каждый раз для обозначения разрыва строки писать <br></br>, а разве это было бы удобнее?!

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

Для переноса текста на несколько строк тег <br> ставится соответствующее количество раз.

Тег <br>

Тег <br> указывает место переноса строки в тексте HTML страницы. Тег br ставится перед местом конца строки, текст после тега будет выведен с новой строки.

Стоит отметить, что тег <br> устанавливает границу между строками (означает разрыв строки), а не делит текст на абзацы. Чтобы определить абзацы в тексте HTML документа используйте тег <p>.


Синтаксис


Текст первой строки<br>Текст второй строки.

Отображение в браузере


В примере далее использован разрыв строк <br>:


Текст первой строки.
Текст второй строки.

Для сравнения, разделение текста на абзацы <p>:

Текст первого абзаца.

Текст второго абзаца.


Пример использования <br> в HTML коде


<html>
  <body>
    <p>Это первая строка обычного текста на веб-странице. В конце перенос строки<br> И вот уже вторая строка текста.</p>
  </body>
</html>

Тег <p>

Тег <p> в HTML определяет абзац. Браузеры автоматически добавляют отступы сверху и снизу от тега (обычно в размере 1em), но вы всегда можете поменять стили тега p с помощью каскадных таблиц стилей CSS. Внутри тегов абзаца <p> может быть как простой текст, так и вложенные теги, например, ссылки <a>, строчные элементы <span>, теги выделения текста <strong>, <em> и другие.


Синтаксис


<p>Содержимое абзаца.</p>

Отображение в браузере


Это текст первого абзаца со ссылкой на справочник тегов HTML внутри.

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


Пример использования <p> в HTML коде


<html>
  <body>
    <p>Это текст первого абзаца со ссылкой на <a href="/html">справочник тегов HTML</a> внутри.</p>
    <p>Это текст <span style="color: green;">второго</span> абзаца с выделенным словом внутри.</p>
  </body>
</html>



Следующая страница Перенос строки HTML





Наверх