pre

Текст с новой строки в HTML. Все способы

Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться.

Тег
для переноса строк

Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац.

• Синтаксис: является одиночным тегом, то есть не имеет закрывающего тега.
• Расположение: используется внутри блочного элемента или контейнера, где нужен перенос строки.
• Значение по умолчанию: не имеет атрибутов и свойств, не принимает никаких параметров, тег просто создаёт перенос строки.
• Использование в тексте: можно использовать несколько тегов
  для создания множественных переносов строк.
• Гдеиспользовать: в почтовых адресах, стихах, текстах песен, режиме работы.

❌ Не используйте тег
для разбиения текста на «как бы абзацы». Для этого используйте тег

.

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

 
Мяу мяу мяу 
мррр мяу мяяяу 
мяу мяу 
мяу
 

Тег

для абзаца

Применяется, если нужно отделить один блок текста от другого.

• Синтаксис: тег

  является блочным тегом, значит имеет открывающий и закрывающий теги.

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

  для создания нескольких абзацев.

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

, он «выбрасывает» этот тег из

.

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

Это первый абзац.
 
Это второй абзац.
 

⭐ Подробнее про тег

читайте в статье

Тег для блока

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

• Синтаксис: тег является блочным тегом и имеет открывающий и закрывающий теги.
• Расположение: тег может быть размещен внутри других элементов HTML, например , , , , и других.
• Использование в структуре веб-страницы: тег часто используется для создания разделов или блоков на веб-странице. Например, можно использовать для группировки связанных элементов, создания сетки, стилей, расположения элементов и многого другого.
• Неструктурированный контент: в отличие от

  , , , , не имеет семантического значения и не предназначен для определённого типа контента. Он используется в основном для стилизации и организации контента на странице.

👉 Использовать рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.

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

Это первый блок.
 
Это второй блок.
 

⭐ Подробнее про тег читайте в статье

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

Тег

используется для создания абзацев или блоков текста.

Тег используется для создания блочного контейнера.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Работа с текстом

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

Особенности текста в HTML

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

Любое количество пробелов идущих подряд, в браузере отображается как один

Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. То же правило относится к символам табуляции и переносу текста. Приведённые ниже строки будут отображаться на веб-странице одинаково, несмотря на их разное написание.

Измеряй микрометром. Отмечай мелом. Отрубай топором.

Измеряй микрометром. Отмечай мелом. Отрубай топором.

Измеряй микрометром. Отмечай мелом. Отрубай топором.

Исключением из этого правила является элемент , содержимое которого отображается именно так, как оно указано в коде, с учётом всех пробелов. По этой причине часто применяется для фрагментов программ, где важны пробелы (пример 1).

public boolean shouldOverrideUrlLoading(WebView view, String url) < if (url.startsWith("http://") || url.startsWith("https://")) < view.getContext().startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url))); return true; >else < return false; >>

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

Первый абзац

Второй абзац

Каждый абзац начинается с открывающего тега

и заканчивается закрывающим тегом

. В примере 2 показано применение нескольких абзацев.

Пример 2. Использование абзацев

В одних садах цветёт миндаль, в других метёт метель.

В одних краях ещё февраль, в других — уже апрель.

Проходит время, вечный счёт: год за год, век за век.

Во всём — его неспешный ход, его кромешный бег.

В году на радость и печаль по двадцать пять недель.

Мне двадцать пять недель февраль, и двадцать пять — апрель.

По двадцать пять недель в туман уходит счёт векам.

Летит мой звонкий балаган куда-то к облакам.

М. Щербаков

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

Как видно из приведённого рисунка, при использовании элемента

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

Так, текст примера 1 с учётом переноса строк будет преобразован следующим образом (пример 3).

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

М. Щербаков

Результат примера продемонстрирован на рис. 3. Видно, что расстояние между строками текста уменьшилось и текст приобрёл более компактный вид.

Рис. 3. Вид текста с учётом переносов

Учтите, что один абзац нельзя вкладывать внутрь другого.

Заголовки

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

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

Синтаксис создания заголовков показан в примере 4.

Пример 4. Добавление заголовков

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвёртого уровня

Заголовок пятого уровня

Заголовок шестого уровня

Результат данного примера показан на рис. 4. Содержимое элемента отображается самым крупным шрифтом жирного начертания, а — самым мелким.

Рис. 4. Вид заголовков на веб-странице

Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.

Верхний и нижний индексы

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз (рис. 5). В зависимости от положения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: — верхний индекс (от англ. superscript) и — индекс нижний (от англ. subscript). Текст внутри этих элементов обозначается меньшим размером, чем обычный текст, и смещается вверх или вниз.

Рис. 5. Базовая линия текста

В примере 5 показано применение нижнего индекса для химической формулы.

Пример 5. Использование нижнего индекса

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

Преимуществом кодировки UTF-8 является то, что она позволяет напрямую вставлять символы, которых на клавиатуре нет, к примеру знаки зодиака. На сайте utf8icons.com вы можете найти множество различных символов, скопировать их и вставить в свой код HTML. Главное, чтобы текстовый редактор поддерживал кодировку UTF-8.

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

Табл. 1. Спецсимволы

<	Знак «меньше»
>	Знак «больше»
"	Двойная кавычка
&	Амперсанд
	Неразрывный пробел
­	Мягкий перенос

Спецсимвол начинается с амперсанда, затем идёт текстовое обозначение символа и заканчивается всё точкой с запятой. Любое отклонение от такой формы записи приведёт к тому, что символ отображаться не будет.

Таким образом, чтобы вывести код HTML, в тексте мы используем следующую запись (пример 7).

Пример 7. Использование спецсимволов

Переносы в тексте

HTML произвольно переносит текст на новую строку в тех местах, где встречается пробел или дефис. Но по правилам русского языка в некоторых случаях переносы запрещены. Так, нельзя разрывать переносом сокращения, вроде «т. д.», отрывать инициалы от фамилии, от значения единицы измерения (5 км) и обозначение года (1917 г.) и др. Чтобы запретить перенос в определённых местах вместо пробела применяется неразрывный пробел  , как показано в примере 8.

Пример 8. Неразрывный пробел

Возврат к стереотипам аннигилирует глубокий полифонический роман, именно об этом говорил Б. В. Томашевский в своей работе 1925 года.

И, наоборот, там, где в длинных словах желательно поставить перенос строки, вы можете использовать элемент или спецсимвол ­ . И тот и другой вариант работает одинаково — слово отображается целиком, когда оно помещается в строке, а если не помещается, то в указанных местах делается перенос (пример 9). Есть только небольшая разница в отображении — ­ добавляет при переносе дефис, а нет.

Пример 9. Переносы в тексте

Источник