В чём разница между
и
Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться.
Тег
для переноса строк
Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац.
- Синтаксис: является одиночным тегом, то есть не имеет закрывающего тега.
- Расположение: используется внутри блочного элемента или контейнера, где нужен перенос строки.
- Значение по умолчанию: не имеет атрибутов и свойств, не принимает никаких параметров, тег просто создаёт перенос строки.
- Использование в тексте: можно использовать несколько тегов
для создания множественных переносов строк. - Гдеиспользовать: в почтовых адресах, стихах, текстах песен, режиме работы.
❌ Не используйте тег
для разбиения текста на «как бы абзацы». Для этого используйте тег
.
Пример использования
Мяу мяу мяу
мррр мяу мяяяу
мяу мяу
мяу
Тег
для абзаца
Применяется, если нужно отделить один блок текста от другого.
Синтаксис: тег
является блочным тегом, значит имеет открывающий и закрывающий теги.
Расположение: тег обычно используется внутри контейнера для размещения абзаца на веб-странице. Может содержать текст, изображения, ссылки и другие элементы HTML.
Отступы: тег создаёт отступы сверху и снизу от абзаца по умолчанию, чтобы отделить его от окружающего контента.
Использование в тексте: можно использовать несколько тегов
для создания нескольких абзацев.
❌ Внутри абзаца не могут располагаться крупные структурные теги, заголовки, формы, списки, таблицы. Когда браузер встречает неподходящий тег внутри
, он «выбрасывает» этот тег из
.
Пример использования
Это первый абзац.
Это второй абзац.
⭐ Подробнее про тег
читайте в статье
Тег для блока
Тег используется для группировки структурных элементов или в качестве вспомогательных контейнеров для создания нужной раскладки.
Синтаксис: тег является блочным тегом и имеет открывающий и закрывающий теги.
Расположение: тег может быть размещен внутри других элементов HTML, например , , , , и других.
Использование в структуре веб-страницы: тег часто используется для создания разделов или блоков на веб-странице. Например, можно использовать для группировки связанных элементов, создания сетки, стилей, расположения элементов и многого другого.
�� Использовать рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.
Пример использования
Это первый блок. Это второй блок. 
На заметку
— для переноса строк внутри текста.
— для создания абзацев или блоков текста.
— для создания блочных контейнеров.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
Что такое HTML?
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
Основы разметки
Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.
Теги обычно идут парами: открывающий тег
Мой заголовок
Это мой первый абзац. Привет, мир!
Некоторые теги можно не закрывать:
Теги и атрибуты
У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:
Атрибут alt описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.
Формы и элементы форм
Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.
- — это тег формы.
- action — куда отправляются данные.
- method — метод отправки (обычно get или post ).
- — поле для ввода данных. Тип text означает текстовое поле.
- — метка для поля ввода.
Списки в HTML
Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.
Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Элемент списка с маркером
- Еще один элемент с маркером
Ссылки и навигация
Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — , атрибут href указывает на адрес, куда должна вести ссылка:
Таблицы
Имя Возраст Джон 30 Элис 25
Использование изображений
Семантическая разметка
Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:
Заголовок статьи
Первый абзац статьи.
Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
Добавление разрыва строки
в HTML. Краткое руководство
Абзац в HTML всегда начинается с новой строки, но иногда необходимо сделать так, чтобы текст внутри абзаца начинался с новой строки — в этом случае необходимо использовать разрыв строки HTML. Давайте подробнее рассмотрим этот элемент HTML, а также способы, как его использовать.
Что такое разрыв строки в HTML
В HTML элемент
создает разрыв строки. Вы можете добавить его в любое место, если хотите, чтобы текст заканчивался на текущей строке и возобновлялся на следующей.
Элемент разрыва строки HTML можно использовать для отображения стихов, текстов песен или других форм содержимого, в которых разделение строк очень важно для дизайна и представления содержимого.
Например, если вы на своем сайте хотите разместить пост-руководство о том, как отправить посылку по адресу с примерами форматирования адресов отправителя и получателя, то вы можете использовать элемент разрыва строки, чтобы все необходимые данные: имена, адреса, индексы расположились в отдельных строках.
Ниже пример того, как выглядит один и тот же адрес, отображаемый двумя разными способами. Первый использует один элемент абзаца и несколько разрывов строк. Во втором используется несколько элементов абзаца и нет разрывов строк. В результате между строками добавляются ненужные отступы и поля.
Совет : если вы хотите, чтобы связанный раздел контента отображался в разных строках, например, почтовый адрес или строфа стихотворения, используйте элементы разрыва строки вместо элементов абзаца.
Как сделать разрыв строки в HTML
Чтобы сделать разрыв строки в HTML, используйте тег
. Просто поместите тег там, где вы хотите принудительно разорвать строку. Поскольку разрыв строки HTML — это пустой элемент, то закрывающий тег отсутствует.
Ниже HTML-файл с элементами
и
:
Давайте рассмотрим создание разрыва строк на примере стихотворения Гвендолин Брукс «Kitchenette Building». Для этого нужно обернуть строфы тегами , затем поместить HTML-тег новой строки
везде, где это необходимо, чтобы строки разрывались в каждой строфе.
Пример правильного HTML:
We are things of dry hours and the involuntary plan,
Grayed in, and gray. “Dream” makes a giddy sound, not strong
Like “rent,” “feeding a wife,” “satisfying a man.”
But could a dream send up through onion fumes
Its white and violet, fight with fried potatoes
And yesterday’s garbage ripening in the hall,
Flutter, or sing an aria down these rooms
Even if we were willing to let it in,
Had time to warm it, keep it very clean,
Anticipate a message, let it begin?
We wonder. But not well! not for a minute!
Since Number Five is out of the bathroom now,
We think of lukewarm water, hope to get in it.
Результат:
Совет : поместите элемент
в каждую точку, где вы хотите, чтобы строка текста прерывалась. Так текст после
будет начинаться с начала следующей строки текстового блока.
Что делать, если разрыв строки HTML не работает
Если при работе в текстовом редакторе CMS, например, WordPress, у вас не работает разрыв строки — это значит, что вы неправильно используете элемент.
Наиболее распространенная ошибка в использование HTML-тега новой строки — это использовать его в целях презентации. Важно понимать, что для всего, что связано с макетом, вы должны использовать CSS, а не HTML.
Например, если вы хотите создать больше пространства между блоками текста или другими элементами, то вместо использования тега
лучше использовать семантический элемент HTML, а, при необходимости, свойства поля или заполнения CSS. Ниже объясним почему:
Во первых, использование элемента разрыва строки HTML, делает ваш код менее доступным для ваших пользователей, которые используют программы чтения с экрана.
Во вторых, использование тега
для принудительного разрыва строки будет хорошо выглядеть только в браузере, в котором вы работаете, особенно если ваш сайт адаптивный.
Адаптивный сайт автоматически изменит макет в зависимости от размера экрана пользователя. Таким образом, он перенесет текст, что приведет к прерывистым, неровным блокам текста.
Предположим, что мы хотим разместить на сайте отрывок из пьесы «Fleabag: The Scriptures». Для этого необходимо использовать элемент блочной кавычки, который автоматически добавит поля слева и справа от текста.
Если бы мы использовали тег
для имитации отступа элемента блочной кавычки, то в таком случае мы бы некорректно использовали тег HTML новой строки. Ниже мы рассмотрим правильный и неправильный примеры:
Пример правильного HTML:
Love is awful! It’s awful. It’s painful. It’s frightening, it makes you doubt yourself, judge yourself, distance yourself from other people in your life. Makes you selfish. Makes you creepy. It makes you obsessed with your hair. Makes you cruel. Makes you say and do things you never thought you would do…
Результат :
Совет : используйте семантический элемент, например, элемент цитаты, вместо элемента разрыва строки, чтобы сделать ваш сайт более доступным для пользователей, которые используют программы чтения с экрана.
Использование элемента блочной кавычки не только лучше для доступности, но и для адаптивного веб-дизайна. Если вы измените размер окна браузера, то элемент кавычек автоматически подстроится под размер экрана без зубчатых краев или неровных строк текста.
Пример неправильного HTML:
Love is awful! It’s awful. It’s painful. It’s frightening, it makes you doubt yourself, judge
yourself, distance yourself from other people in your life. Makes you selfish. Makes you creepy.
It makes you obsessed with your hair. Makes you cruel. Makes you say and do things you never
thought you would do.
Результат :
Совет : чтобы текст отображался или разрывался определенным образом, используйте семантически значимый элемент HTML или CSS вместо элемента разрыва строки, чтобы избежать проблем с макетом.
Если вы измените размер окна браузера, вы заметите, что элемент абзаца с элементами разрыва строки приведет к неровным краям и строкам текста.
Обработка символа новой строки в HTML
Символ новой строки, обозначаемый как \n , часто используется в текстовых редакторах и языках программирования для отображения новой строки или перехода на следующую строку. Однако, в HTML этот символ не работает так, как многие ожидают.
Возьмем для примера следующий код:
Первая строка Вторая строка Третья строка В этом случае, все строки будут отображаться как один непрерывный текст, несмотря на наличие символа \n между ними.
В HTML для перехода на новую строку используется тег
. Таким образом, чтобы получить текст, разделенный на отдельные строки, необходимо заменить символы \n на
. Исправленный код будет выглядеть следующим образом:
Первая строка
Вторая строка
Третья строка
Теперь каждая строка будет отображаться на новой строке в браузере.
Важно помнить, что символ \n не является ошибкой и его использование в HTML коде не вызовет ошибку. Он просто не будет отображать новую строку, как это было бы в текстовом редакторе или другом языке программирования.
Вывод: В HTML для отображения новой строки следует использовать тег
, вместо символа \n .
Свойство white-space
Свойство white-space устанавливает как переносить текст на новую строку, а также как отображать пробелы между словами и переносы строк (места, где был нажат Enter при наборе кода).
Синтаксис
Значения
| Значение | Описание |
|---|---|
| nowrap | Запрещает тексту переносится на другую строку, даже если он не помещается в ширину контейнера (в этом случае текст просто вылезет за его границы). Однако, добавление тега br заставит текст перенестись на новую строку. |
| pre | Текст показывается так, как был набран в блокноте при верстке сайта: со всеми пробелами и enter-ами (если в коде набрано несколько пробелов — на экране тоже будет несколько). При этом браузер не будет переносить текст на новую строку, если он не помещается в контейнер — текст просто вылезет за его границы. Аналог тега pre, но в отличие от него не меняет шрифт на моноширинный (про моноширинный шрифт см. свойство font-family . |
| pre-wrap | То же самое, что и pre, отличие в том, что если текст слишком длинный и не влазит в контейнер — браузер перенесет его на другую строку. |
| pre-line | Браузер учитывает только Enter-ы в HTML коде и игнорирует все остальное (несколько пробелов будут выглядеть как один, браузер сам расставляет разрывы строк). |
| normal | Стандартное поведение: браузер сам расставляет разрывы строки так, чтобы слова поместились в контейнер. Несколько пробелов в коде будут выглядеть как один на экране. |
Значение по умолчанию: normal .
Пример . Значение nowrap
В данном примере текст не поместится в контейнер и вылезет за его границы, так как задано значение nowrap :
#elem < width: 200px; white-space: nowrap; border: 1px solid red; >
Пример . Значение nowrap и тег br
Если добавить тег br — текст перенесется на новую строку (именно в том месте, где стоит br ):
amet, consectetur adipiscing elitorire.
#elem < width: 200px; white-space: nowrap; border: 1px solid red; >
Пример . Значение pre
В данном примере текст показывается так, как был набран в редакторе HTML кода (со всеми отступами клавишей Tab , с Enter и так далее):
#elem < width: 200px; white-space: pre; border: 1px solid red; >
Пример . Значение pre-wrap
А сейчас текст показывается так, как был набран в редакторе HTML кода, однако, вылезающие части переносятся на новую строку:
#elem < width: 200px; white-space: pre-wrap; border: 1px solid red; >
Смотрите также
- свойства word-break и overflow-wrap ,
которые позволяют перенести буквы длинного слова на новую строку - свойство tab-size ,
которое устанавливает размер отступа, созданного клавишей Tab - свойство hyphens ,
которое включает переносы слов по слогам - свойство overflow ,
которое обрезает вылезающие за границу блока части - тег pre ,
который показывает текст так, как он был набран в редакторе HTML кода