Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.
Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.
Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице
и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы.
По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.
Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку.
Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение
каждого элемента web-страницы по отдельности.
Строчные элементы обрамляются тегами <span>…</span>.
Для обрамления элементов блочного типа используется пара <div>…</div>.
Браузеры обрамляют div-блоки разрывами строки.
Блок <div> не может располагаться внутри блока <span>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Блоки</title>
<meta charset="utf-8">
</head>
<body>
<div>Первый блок текста</div>
<div>Второй блок текста</div>
</body>
</html>Основные теги форматирования текста
| <p>…</p> | Абзац. |
| <h1>…</h1> | Заголовок первого уровня. |
| <h2>…</h2> | Заголовок второго уровня. |
| … | |
| <h6>…</h6> | Заголовок шестого уровня. |
| <br> | Переход на новую строку. |
| <q>…</q> | Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes. |
| <hr> | Горизонтальная разделительная линия. |
| <pre>…</pre> | Текст фиксированной ширины с сохранением всех пробелов и переносов. |
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовки и абзацы</title>
<meta charset="utf-8">
</head>
<body>
<h1>Заголовок<br>первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
<hr>
<p>Тест абзаца</p>
</body>
</html>Создайте текстовый файл, как в примере. Сохраните его с расширением html.
Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.
Для создания и редактирования html-страниц подойдёт даже Блокнот. Но я рекомендую использовать
Notepad++ или
PhpStorm.
Выделение в тексте
| <b>…</b> | Полужирный шрифт. |
| <i>…</i> | Курсив. |
| <ins>…</ins> | Подчеркнутый текст. |
| <del>…</del> | Перечеркнутый текст. |
| <sup>…</sup> | Надстрочный текст. |
| <sub>…</sub> | Подстрочный текст. |
Пример
<b>Текст может быть полужирным</b>. <i>Текст может быть курсивом.</i><br>
<ins>Текст можно подчеркнуть.</ins> <del>Текст можно зачеркнуть.</del><br>
Текст может быть <sup>надстрочным</sup>. Текст может быть <sub>подстрочным</sub>.РЕЗУЛЬТАТ:
Текст может быть полужирным. Текст может быть курсивом.
Текст можно подчеркнуть. Текст можно зачеркнуть.
Текст может быть надстрочным. Текст может быть подстрочным.
Цитаты, переменные, адреса
| <address>… </address> |
Служит для предоставления автором документа контактной информации, чтобы желающие могли связаться с автором материала. Обычно отображается курсивом. Блочный элемент. |
| <blockquote>… </blockquote> |
Выделение цитат. Блочный элемент. |
| <cite>…</cite> | Выделение цитат. Обычно отображается курсивом. |
| <code>…</code> | Вывод текста шрифтом фиксированной ширины. Применяется, как правило, для вывода небольшого куска программного кода (для больших листингов используется тег <pre>). |
| <em>…</em> | Выделение важных фрагментов текста. Обычно отображается курсивом. |
| <kbd>…</kbd> | Вывод текста шрифтом фиксированной ширины. |
| <samp>…</samp> | Вывод текста шрифтом фиксированной ширины. |
| <strong>…</strong> | Сильное выделение важных фрагментов текста. Обычно отображается полужирным шрифтом. |
| <var>…</var> | Используется для отметки имен переменных. Обычно отображается курсивом. |
Читать дальше: HTML списки
HTML текст — теги, которые используются для форматирования текста на web-странице. Предполагается что вы уже изучили основы HTML настоящего самоучителя HTML.
Правильное и качественное форматирование текста в документе решает две задачи:
- Помогают поисковым роботам правильно понять содержимое документа.
- Позволяют пользователю легко изучить страницу и понять ее смысловое содержание.
Согласитесь, легче читать текст который разбит на абзацы с подзаголовками. А вот «портянку» сплошного текста читать довольно трудно.
Рассмотрим основные и дополнительные теги форматирования текста в HTML.
Заголовки в HTML создаются с помощью тега h после которого идет цифра от 1 до 6, например <h1>, где:
- h — сокращение от английского heading (заголовок);
- 1…6 — уровни заголовка.
Заголовки используются для определения нового раздела или подраздела. Заголовки имеют иерархию, от заголовка <h1> до заголовка <h6>.
Например, если мы рассматриваем какую-либо обширную тему, мы заключаем ее название в <h1>. Заголовок на уровень ниже в <h2> и так далее до <h6>.
Например, возьмем заголовок «рецепты с гречкой». Далее все зависит от того, как вы хотите структурировать страницу. Я бы взял и разделил следующим образом:
- h1 — рецепты с гречкой;
- h2 — рецепты с гречкой в (мультиварке, духовке, кастрюле);
- h3 — рецепты с гречкой в … с (мясом, луком, курицей);
- h4 — рецепты с гречкой в … с … на (завтрак, обед, ужин);
- h5 — рецепты с гречкой в … с … на … как (просто, по-купечески);
- h6 — рецепты с гречкой в … с … на … как … + фото, видео, инструкция и так далее.
Может это не самая лучшая структура, но смысл ясен.
Так же подзаголовки могут разделяться на какие-то логические действия. Например:
- h1 — как построить баню;
- h2 — как выбрать фундамент;
- h3 — виды фундаментов;
- h4 — ленточный (или иной вид) фундамент;
- h5 — особенности ленточного фундамента.
В общем и целом понимание должно появиться. Идем дальше.
Визуально, заголовки отличаются размером — чем выше уровень тем больше размер, так же заголовки выделяются жирным.
Если мы наберем следующий код:
<h1>Заголовок 1-го уровня</h1> <h2>Заголовок 2-го уровня</h2> <h3>Заголовок 3-го уровня</h3> <h4>Заголовок 4-го уровня</h4> <h5>Заголовок 5-го уровня</h5> <h6>Заголовок 6-го уровня</h6>
То результат будет следующим.
Рассмотрим каждый элемент подробнее.
Тег h1
Элемент <h1> — заголовок верхнего уровня. Он должен встречаться в документе один раз в самом начале. Это как заголовок книги, ведь название книги не может встречаться несколько раз.
Рекомендуется делать уникальный заголовок <h1> для каждой страницы сайта.
Стандартный стиль для заголовка <h1>:
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Тег h2
Элемент <h2> — подзаголовок <h1>. В отличии от <h1> может встречаться на веб-странице несколько раз.
Стандартный стиль для заголовка <h2>:
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Тег h3
Подзаголовок элемента <h2>.
Стандартный стиль для заголовка <h3>:
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Тег h4
Подзаголовок элемента <h3>.
Стандартный стиль для заголовка <h4>:
display: block;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Тег h5
Подзаголовок элемента <h4>.
Стандартный стиль для заголовка <h5>:
display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Тег h6
Подзаголовок элемента <h5>.
Стандартный стиль для заголовка <h6>:
display: block;
font-size: 0.67em;
margin-block-start: 2.33em;
margin-block-end: 2.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Теги форматирования текста
Форматирование текста — это разметка (процесс разметки) текста. В HTML используется много тегов форматирования, которые со временем заменяет CSS. Рассмотрим эти элементы.
Тег b
Элемент <b> выделяет текст полужирным, не несет смысловой нагрузки.
Пример.
<b>Жирный текст</b> в этом предложении.
Результат.
Жирный текст в этом предложении.
Тег strong
Элемент <strong> выделяет текст полужирным, придает выделеному тексту смысловую нагрузку.
Пример.
<strong>Жирный текст со смысловой нагрузкой</strong> в этом предложении.
Результат.
Жирный текст со смысловой нагрузкой в этом предложении.
Тег i
Элемент <i> выделяет текст курсивом без смысловой значимости.
Пример.
<i>Курсив</i> в этом предложении.
Результат.
Курсив в этом предложении.
Тег em
Элемент <em> выделяет текст курсивом со смысловой значимостью, визуально не отличается от <i>.
Пример.
<em>Курсив со смысловой нагрузкой</em> в этом предложении.
Результат.
Курсив со смысловой нагрузкой в этом предложении.
Тег small
Элемент <small> уменьшает размер текста на единицу.
Пример.
Стандартный текст, <small>а это текст в теге small</small>.
Результат.
Стандартный текст, а это текст в теге small.
Тег sup
Элемент <sup> используется для создания надстрочного текста.
Пример.
Объем емкости для воды был 3 м.<sup>3</sup>
Результат.
Объем емкости для воды был 3 м.3
Тег sub
Элемент <sub> используется для создания подстрочного текста.
Пример.
Задача: нужно найти x<sub>1</sub> если...
Результат.
Задача: нужно найти x1 если…
Тег ins
Элемент <ins> предназначен для выделения текста в новой версии веб-документа, подчеркивает текст. Применяется довольно редко (по собственному опыту).
Пример.
Актуальная версия HTML <ins>5</ins>
Результат.
Актуальная версия HTML 5
Тег del
Элемент <del> предназначен для пометки текста на удаление, перечеркивает текст.
Пример.
Актуальная версия HTML <del>4.1</del> <ins>5</ins>
Результат.
Актуальная версия HTML 4.1 5
Тег mark
Элемент <mark> выделяет текст желтым цветом.
Пример.
Я даю согласие на <mark>обработку персональных данных</mark>.
Результат.
Я даю согласие на обработку персональных данных.
Устаревшие теги
Теги, которые использовались в ранних версиях HTML и на данный момент считаются устаревшими, вместо них использую CSS.
Тег u
Элемент <u> использовался для подчеркивания текста.
Стандартный стиль тега:
text-decoration: underline;
То есть вместо кода:
Это <u>подчеркнутый</u> текст.
В настоящее время рекомендуется использовать его стиль, то есть:
<style>
.under{text-decoration: underline;}
</style>
Это <span class="under">подчеркнутый</span> текст.
Результат будет одинаков.
Это подчеркнутый текст.
На смену <u> пришел элемент <ins>.
Тег s
Элемент <s> использовался для создания перечеркнутого текста.
Стандартный стиль тега:
text-decoration: line-through;
Тут все аналогично предыдущему тегу. Вместо <s> используется <del> либо оформление с помощью CSS.
Абзац и перенос текста
Читать текст не разбитый на абзацы крайне не удобно. Для удобства нужно разбивать текст. Для этих целей в HTML есть теги абзаца, переноса тега и горизонтальной линии.
Тег p
Элемент <p> используется для создания параграфа, то есть он разделяет текст на отдельные абзацы между которыми стоит пустая строка.
Пример.
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. </p><p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
Результат.
Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.
В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
Тег br
Элемент <br> используется для разрыва строки. После него текст переноситься на новую строку. Это одиночный тег, он не имеет закрывающего тега.
Пример.
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. <br>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
Результат.
Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.
В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
Тег hr
Элемент <hr> используется для создания горизонтальной линии. Не требует закрывающего тега.
Пример.
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. <hr>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
Результат.
Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.
В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
Цитаты, определения и направление текста
Тег abbr
Элемент <abbr> предназначен для форматирования аббревиатур. Подчеркивает аббревиатуру пунктирной линией. Расшифровка указывается в атрибуте title. В справочнике HTML есть подробное описание тега <abbr>.
Пример.
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> язык гипертекстовой разметки.</p>
Результат.
HTML язык гипертекстовой разметки.
Тег blockquote
Элемент <blockquote> предназначен для выделения цитат в тексте.
Пример.
<blockquote cite="https://abuzov.com/">
<h1>HTML тег: blockquote</h1>
<p>Блок текста, цитируемый из других источников.</p>
</blockquote>
Результат.
HTML тег: blockquote
Блок текста, цитируемый из других источников.
Тег q
Элемент <q> используется для выделения в документе коротких цитат. Короткие цитаты берутся в кавычки.
Пример.
Пример <q>короткой цитаты</q>
Результат.
Пример короткой цитаты
Тег cite
Элемент <cite> — ссылка на творческое произведение, такое как книга, веб-сайт или заявление. Он должен включать имя автора, название работы или ссылку на URL.
Пример.
Для написания статьи использовалась книга: <p> Бабаш Александр Владимирович, Шанкин Генрих Петрович<cite> История криптографии</cite>. 2002 год.</p>
Результат.
Для написания статьи использовалась книга:
Бабаш Александр Владимирович, Шанкин Генрих Петрович История криптографии. 2002 год.
Теги ввода, кода и направления
Тег code
Элемент <code> указывает на то, что текст является фрагментом компьютерного кода. Вы уже сталкивались с результат работы этого тега, пример:
<code>display: block; font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;</code>
Результат.
display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Тег kbd
Элемент <kbd> указывает что фрагмент теста введен с клавиатуры.
Пример.
Для запуска диспетчера задач введите: <kbd>ctrl + alt + del</kbd>
Результат.
Для запуска диспетчера задач введите: ctrl + alt + del
Тег samp
Элемент <samp> выделяет пример результата выполнения программы.
Пример.
Если вы выберете опцию «чемпион», вы получите сообщение <samp> Обезьяна не гусеница </samp>
Результат.
Если вы выберете опцию «чемпион», вы получите сообщение Обезьяна не гусеница
Тег var
Элемент <var> задает переменную, например, в математической формуле или в компьютерном коде.
Пример.
Если <var>x</var> = 3 , то <var>y</var> = 6
Результат.
Если x = 3 , то y = 6
Тег pre
Элемент <pre> сохраняет изначальное форматирование текста. При этом пробелы и переносы строк в начальном тексте не удаляются.
Пример.
<pre>Текст переносится
без помощи br и иных средств форматирования
он просто сохраняет исходное
форматирование</pre>
Результат.
Текст переносится
без помощи br и иных средств форматирования
он просто сохраняет исходное
форматирование
Тег bdo
Элемент <bdo> изменяет текущее направление текста.
Пример.
Результатом этого <bdo dir = "rtl"> слова </bdo> будет "аволс".
Результат.
Результатом этого слова будет «аволс».
На этом можно считать что вы изучили текст HTML.
Этот туториал для тех, кто только начинает верстать и не понимает как же ему начать. Здесь вы узнаете как выбрать тег, как его написать, какие они бывают и где их искать.
В этом туториале вы поможете верстальщице Оле сделать страницу с результатами поиска в Яндексе. Получится не один в один, но довольно похоже:
Настоятельно рекомендуем повторить все шаги, что делает Оля в этом туториале, чтобы вы лучше усвоили материал. Читать — недостаточно, так материал усваивается плохо и уже через пару дней вы всё забудете.
1. Создайте HTML-документ
Для начала Оле понадобится заготовка, файл index.html. Создайте у себя файл с таким же содержимым:
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
</body>
</html>
Здесь 3 тега, которые обязаны быть в каждом html-файле:
<html>— здесь лежат все теги страницы, он “корневой”, главный;<head>— в этом теге лежит всё, что не контент страницы: стили, заголовок страницы в теге<title>, кодировка и так далее;<body>— “тело”HTML-документа, здесь лежит всё, что вы увидите на страничке в браузере.
2. Добавьте текст
Вот что Оля должна вывести при поиске “Коала” в поисковике, для которого она верстает страницу с результатами поиска:
Коала — Википедия
Коaла (лат. Phascolarctos cinereus) — вид сумчатых, обитающий в Австралии. Единственный современный представитель семейства коаловых ... Читать ещё.
Вы уже знаете, куда добавить этот текст, чтобы он вывелся в браузере? Попробуйте вывести его сами, а затем жмите на кнопку ниже, чтобы посмотреть, как это получилось у Оли.
Как получилось у Оли
Не долго думая, Оля добавила текст прямо внутрь <body> и получила такой результат:
3. Добавьте ссылку
Без ссылок на результаты поиска работа Оли бесполезна. Люди пришли не просто почитать про коал: им нужны ссылки на сайты про коал.
Оля помнит наизусть несколько тегов: <img> — для картинок, а <p> — для параграфа текста. Но как добавить ссылку? Какой у неё тег?
Оля загуглила, и получила этот ответ:
htmlbook.ru — крутой сайт, на котором хорошая документация по HTML и CSS, поэтому в первую очередь присматривайтесь к нему.
Отлично, нужен тег <a>! Но как его написать?..
Как писать теги
У тегов бывают разные названия, но способов их написать всего два. Способ записи зависит от того парный он или одиночный.
Пример парного тега:
<p>Покупайте наши веб-сайты!</p>
Так на страницу можно добавить параграф с текстом. Тег <p> обязательно “закрывать” — добавлять в конце ещё один, но с чёрточкой: </p>. Так вы скажете браузеру, что всё, текст параграфа закончился.
Пример одиночного тега:
<img src="адрес_картинки">
Он сам по себе, его “закрывать” не нужно. Одиночных тегов очень мало, в основном, вам пригодится только <img> — для картинок, <br> — перенос строки и <hr> — горизонтальная линия.
Вот более развёрнутый пример, где вы можете увидеть как выглядят парные и одиночные теги рядом друг с другом:
<img src="https://dvmn.org/filer/canonical/1594118255/683/">
<h1> Зачем нужен h1 </h1>
<p>
В теге h1 пишут заголовки, как "Как писать теги" чуть выше.
Это парный тег, у него есть начало и конец, как и у тега p.
</p>
<p>
У тега img нет "начала" или "конца". Он значит только то, что нужно добавить картинку.
Браузеру не нужно сообщать, когда она "закончится".
</p>
Парные теги нужно закрывать
Допишите тег
Оля хотела добавить ссылку с помощью тега <a>, и теперь она поняла, как это сделать. Ещё немного гуглежа и она узнала : тег парный, а значит выглядеть он должен вот так:
<a href="#">Читать ещё</a>
Оля не знала какую ссылку поставить для ссылки, ведь ссылки будут подставляться уже при шаблонизации, поэтому оставила “#” вместо ссылки. Это называется якорь, и это такой обычай среди верстальщиков: если не знаешь, какую ссылку поставить, ставь #.
Теперь на страничке Оли появилась ссылка. Попробуйте повторить результат Оли:
4. Выделите все “коала” на странице
Поисковик выделяет жирным шрифтом все слова, которые вы искали. Оля не знает, что это за тег, но по запросу html жирный шрифт в google.com Оля нашла ссылку на заветный htmlbook.ru.
Попробуйте, у вас получится, как у Оли? У неё получился такой текст:
Сейчас текст у Оли весь одинакового размера. В нём Оля хочет выделить заголовок: Коала — Википедия крупно, а чуть ниже весь остальной текст, мельче. Оля загуглила html заголовок и сразу нашла подходящий тег: <h1>.
Странно, получается, заголовку достался отдельный тег, а остальному тексту — нет. Оля продолжила гуглить теги и узнала о теге <p>: пишут, что он нужен для текста. Но зачем? Чтобы разобраться в этом Оле пришлось узнать о строчных и блочных тегах.
О строчных и блочных тегах
Если вы хотите отредактировать текст, то вам нужны строчные теги. Они существуют только внутри текста: выделяют текст жирным, курсивом, или делают его ссылкой. С ними вы уже успели познакомиться, вот небольшой список из самых популярных:
<a>— ссылка;<i>— выделение текста курсивом;<b>— выделение текста жирным;<br>— одиночный тег для переноса строки.
Другой вид тегов — блочные. Это теги, которые объединяют другие теги внутри себя в группы, и наделяют их смыслом. Например, блочный тег <h1> содержит в себе заголовок страницы, а блочный тег <p> — параграф текста. За счёт них можно оформить заголовок в одном стиле, а остальной текст — в другом:
<h1 style="color:red;">Статья о котиках</h1>
<p style="...">
<b>Котики</b> — замечательные животные. Я полюбил их, когда мне было 7 лет.
Как сейчас помню, на мой <i>день рождения</i> мне подарили замечательного кота...
</p>
В этом примере заголовок статьи покрашен в красный цвет: color:red;. Текст же статьи при этом остался чёрным, покрасился только заголовок “Статья о котиках”. Для текста внутри тега <p> теперь можно определить другие, отдельные стили, которые не коснутся текста в заголовке <h1>.
Внутри тега <p> есть несколько строчных тегов: <b> и <i>. Они прямо “срослись” с текстом, существуют прямо внутри него, в отличие от блочных, которые только обрамляют текст по краям.
Блочные теги незаменимы, когда хочется добавить тексту фон, рамку, отступы… Вот небольшой список из самых популярных блочных тегов:
<header>— “шапка” сайта, полоса, которая всегда висит в самом верху страницы;<footer>— “подвал” сайта — самый низ страницы, где расположены всякие ссылки на техподдержку, лицензии, контакты поддержки и т.д.;<main>— главный контент на странице: то, ради чего пользователь пришёл на сайт;<div>— для создания прочих блоков, для которых нет специализированного тега. Например, для карточки товара в магазине или карточки поста.
Отдельно стоит выделить эти блочные теги:
<p>— параграф текста;<h1>, <h2>... <h6>— заголовок. Чем больше число — тем мельче заголовок;
Допишите код
Теперь, когда Оля разобралась с блочными/строчными тегами, она может наконец закончить незавершённую работу: добавить на страницу теги <h1> и <p>. Заголовок с тегом <h1> показался ей слишком крупным, поэтому она воспользовалась <h2>:
Заголовок на то и нужен, чтобы на него хотелось кликнуть. А на ваш заголовок кликнуть нельзя. Что делать? Нужен тег для ссылок <a>. Но как правильно: положить тег <a> внутрь тега <h1> или наоборот?..
О комбинации тегов
Нельзя располагать блочные теги внутри строчных.
Такой код существовать не должен:
<a><h1>Заголовок</h1></a>
Тег <a> — строчный, он существует внутри текста. Тег <h1> — блочный, он оборачивает собой текст и все строчные теги для этого текста. Вот как стоило поступить в этой ситуации:
<h1><a>Заголовок</a></h1>
Оля прислушалась к этой рекоммендации и вот что у неё получилось:
<h2>
<a href="#"><b>Коала</b> — Википедия</a>
</h2>
Проверьте, у вас получилось сделать заголовок ссылкой?
Теперь Оля хочет подпись под заголовком ссылки, как вот тут:
Оля загуглила html мелкий текст и нашла тег, который поможет сделать текст меньше. Подпись под заголовком Оля решила делать прямо внутри тега <h2>, чтобы она была “едина” с заголовком <h2>, никуда не уехала и так далее:
<h2>
<a href="#"><b>Коала</b> — Википедия</a>
<small>ru.wikipedia.org›Коала</small>
</h2>
Получилось не то, что хотела Оля… Во-первых, текст не сильно-то и уменьшился. Во-вторых, не хватает переноса.
В HTML обычные переносы строк игнорируются, так как текст переносится по ширине экрана. Чтобы заставить текст перенестись насильно, есть одиночный тег <br>:
<h2>
<a href="#"><b>Коала</b> — Википедия</a>
<br>
<small>ru.wikipedia.org›Коала</small>
</h2>
Теперь нужно сделать текст ещё мельче. Оказывается, теги можно комбинировать, вот так:
<small>
<small>
ru.wikipedia.org›Коала
</small>
</small>
Тег как бы “накапливает” эффект мелкого текста и делает его ещё мельче. Проверьте, у вас тоже так получится?
Попробуйте применить
Что делать, если подходящий тег не нашёлся
В первую очередь, загуглите. В этой статье перечислены не все теги, какие есть в HTML, их там очень много.
Если же и гугл не помогает — придётся подумать, как составить то, что вы хотите из того, что есть. Самый простой пример — вы хотите сделать кнопку с картинкой. Такого тега нет, зато есть кнопка и есть картинка:
<button>
<img src="#" >
</button>
Или вы хотите, чтобы ваш текст был выделен жирным и при этом был ссылкой, вот так: жирная ссылка.
Это можно сделать двумя способами, комбинируя теги <a> и <b>, они оба строчные:
<a><b>Жирная ссылка</b></a>
<b><a>Жирная ссылка</a></b>
Что ещё почитать по теме
- Статья Строчные элементы от htmlbook.ru
- Слайды типичные ситуации в вёрстке
Для управления текстом и изменения его вида существует достаточно большое количество различных элементов. Что не удивительно, ведь текст — это самый популярный вид информации.
Особенности текста в HTML
Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.
Любое количество пробелов идущих подряд, в браузере отображается как один
Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. То же правило относится к символам табуляции и переносу текста. Приведённые ниже строки будут отображаться на веб-странице одинаково, несмотря на их разное написание.
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром.
Отмечай мелом.
Отрубай топором.</p>
Исключением из этого правила является элемент <pre>, содержимое которого отображается именно так, как оно указано в коде, с учётом всех пробелов. По этой причине <pre> часто применяется для фрагментов программ, где важны пробелы (пример 1).
Пример 1. Использование <pre>
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>pre</title>
</head>
<body>
<pre>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;
}
}</pre>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Текст внутри <pre>
Текст занимает всю ширину окна браузера
Если вы просто напишете одну длинную строку в коде HTML, то в браузере она будет отформатирована так, чтобы текст поместился по ширине. Под форматированием подразумевается автоматическое добавление переносов текста там, где есть пробел или дефис. Соответственно, переносы текста будут меняться в зависимости от диагонали экрана устройства и размеров окна браузера.
Абзацы
Как правило, блоки текста разделяют между собой абзацами. По умолчанию между абзацами существует небольшой вертикальный отступ, называемый отбивкой. Синтаксис создания абзацев следующий.
<p>Первый абзац</p>
<p>Второй абзац</p>Каждый абзац начинается с открывающего тега <p> и заканчивается закрывающим тегом </p>. В примере 2 показано применение нескольких абзацев.
Пример 2. Использование абзацев
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Абзацы</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.</p>
<p>В одних краях ещё февраль, в других — уже апрель.</p>
<p>Проходит время, вечный счёт: год за год, век за век…</p>
<p>Во всём — его неспешный ход, его кромешный бег.</p>
<p>В году на радость и печаль по двадцать пять недель.</p>
<p>Мне двадцать пять недель февраль, и двадцать пять — апрель.</p>
<p>По двадцать пять недель в туман уходит счёт векам.</p>
<p>Летит мой звонкий балаган куда-то к облакам.</p>
<p>М. Щербаков</p>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Абзацы текста
Как видно из приведённого рисунка, при использовании элемента <p> между абзацами возникают отступы. От них можно избавиться, если в местах переноса строк добавить элемент <br>. В отличие от абзаца, <br> не создаёт дополнительных вертикальных отступов между строк и может применяться практически в любом тексте.
Так, текст примера 1 с учётом переноса строк будет преобразован следующим образом (пример 3).
Пример 3. Использование <br>
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Переносы в тексте</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.<br>
В одних краях ещё февраль, в других — уже апрель.<br>
Проходит время, вечный счёт: год за год, век за век…<br>
Во всём — его неспешный ход, его кромешный бег.<br>
В году на радость и печаль по двадцать пять недель.<br>
Мне двадцать пять недель февраль, и двадцать пять — апрель.<br>
По двадцать пять недель в туман уходит счёт векам.<br>
Летит мой звонкий балаган куда-то к облакам.</p>
<p>М. Щербаков</p>
</body>
</html>
Результат примера продемонстрирован на рис. 3. Видно, что расстояние между строками текста уменьшилось и текст приобрёл более компактный вид.
Рис. 3. Вид текста с учётом переносов
Учтите, что один абзац нельзя вкладывать внутрь другого.
Заголовки
Заголовки выполняют важную функцию на веб-странице — с их помощью происходит систематизация текста и определяется иерархия подразделов. Это учитывается поисковыми системами при индексации веб-страницы и при отображении результатов поиска.
В HTML для заголовков есть шесть элементов от <h1> до <h6>. Элемент <h1> определяет заголовок первого уровня, он самый значимый и применяется обычно для заголовка статьи или поста блога. Элемент <h2> определяет заголовок второго уровня, он используется, как правило, для подзаголовков. Последним по иерархии идёт <h6>.
Синтаксис создания заголовков показан в примере 4.
Пример 4. Добавление заголовков
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Заголовки в тексте</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
</body>
</html>
Результат данного примера показан на рис. 4. Содержимое элемента <h1> отображается самым крупным шрифтом жирного начертания, а <h6> — самым мелким.
Рис. 4. Вид заголовков на веб-странице
Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.
Верхний и нижний индексы
Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз (рис. 5). В зависимости от положения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: <sup> — верхний индекс (от англ. superscript) и <sub> — индекс нижний (от англ. subscript). Текст внутри этих элементов обозначается меньшим размером, чем обычный текст, и смещается вверх или вниз.
Рис. 5. Базовая линия текста
В примере 5 показано применение нижнего индекса для химической формулы.
Пример 5. Использование нижнего индекса
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Нижний индекс</title>
</head>
<body>
<p>Формула серной кислоты: H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>
Результат данного примера показан на рис. 6.
Рис. 6. Использование элемента <sub>
В примере 6 показано применение верхнего индекса для математической формулы.
Пример 6. Использование верхнего индекса
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Верхний индекс</title>
</head>
<body>
<p>ax<sup>2</sup> + bx + c</p>
</body>
</html>
Результат данного примера показан на рис. 7.
Рис. 7. Использование элемента <sup>
Специальные символы
Преимуществом кодировки UTF-8 является то, что она позволяет напрямую вставлять символы, которых на клавиатуре нет, к примеру знаки зодиака. На сайте utf8icons.com вы можете найти множество различных символов, скопировать их и вставить в свой код HTML. Главное, чтобы текстовый редактор поддерживал кодировку UTF-8.
При этом некоторые символы нельзя вставлять в код напрямую. К примеру, если в тексте понадобились символы < и >, а вы вставите их в код, то HTML воспримет их как теги, что может привести к ошибке отображения. В подобных случаях используется специальная форма написания, показанная в табл. 1.
| < | Знак «меньше» |
| > | Знак «больше» |
| " | Двойная кавычка |
| & | Амперсанд |
| | Неразрывный пробел |
| ­ | Мягкий перенос |
Спецсимвол начинается с амперсанда, затем идёт текстовое обозначение символа и заканчивается всё точкой с запятой. Любое отклонение от такой формы записи приведёт к тому, что символ отображаться не будет.
Таким образом, чтобы вывести код HTML, в тексте мы используем следующую запись (пример 7).
Пример 7. Использование спецсимволов
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Угловые скобки</title>
</head>
<body>
<p><meta charset="utf-8"></p>
</body>
</html>
Переносы в тексте
HTML произвольно переносит текст на новую строку в тех местах, где встречается пробел или дефис. Но по правилам русского языка в некоторых случаях переносы запрещены. Так, нельзя разрывать переносом сокращения, вроде «т. д.», отрывать инициалы от фамилии, от значения единицы измерения (5 км) и обозначение года (1917 г.) и др. Чтобы запретить перенос в определённых местах вместо пробела применяется неразрывный пробел , как показано в примере 8.
Пример 8. Неразрывный пробел
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Пробел</title>
</head>
<body>
<p>Возврат к стереотипам аннигилирует глубокий
полифонический роман, именно об этом говорил
Б. В. Томашевский в своей работе
1925 года.</p>
</body>
</html>
И, наоборот, там, где в длинных словах желательно поставить перенос строки, вы можете использовать элемент <wbr> или спецсимвол ­. И тот и другой вариант работает одинаково — слово отображается целиком, когда оно помещается в строке, а если не помещается, то в указанных местах делается перенос (пример 9). Есть только небольшая разница в отображении — ­ добавляет при переносе дефис, а <wbr> нет.
Пример 9. Переносы в тексте
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Переносы</title>
</head>
<body>
<p>Название орудия — сорока­пяти­миллиметровая
противотанковая пушка образца 1942 года (М-42).</p>
</body>
</html>
Перейти к заданиям
Последнее изменение: 01.06.2020
Чем отличается написание текста в обычном текстовом редакторе, от написания в HTML? В текстовом редакторе, форматирование текста происходит в интерфейсе программы. Для HTML страницы – текст форматируется, при помощи тегов.
Теги сообщают браузерам, как и в каком месте страницы, отображать текст. Для этого придуманы специальные теги. Мы не пишем, текст, просто так.
Хорошего Вам дня!
Текст, всегда заключают, между тегами, например, внутри абзаца.
<p>Пожелайте мне удачи!</p>
Мы собрали список, наиболее частых запросов, связанных с текстом, от начинающих изучать HTML.
Как сделать текст в центре
По умолчанию, текст, прилипает к левому краю. Свойство text-align, внутри тега div, выравнивает текст по центру.
<div>Поставьте меня в центр</div> // HTML
div {
text-align: center; // CSS
}
Как сделать текст справа
<div>Хочу стоять справа</div> // HTML
div {
text-align: right; // CSS
}
Как сделать отступ текста
За отступы текста отвечают свойства – margin и padding. Margin отделяет абзацы друг от друга, а padding создает воздушное пространство, внутри абзаца. Отступы измеряют в абсолютных единицах измерения – пикселях или в относительных – %, em, rem.
<p>Отодвинься от меня</p> // HTML
p {
margin: 20px; // CSS
padding: 10px;
}
Как сделать текст жирным
Через тег b, можно вставлять прямо в разметку. Этот способ предпочтительнее для SEO-оптимизации.
<p>Хочу быть <b>жирным</b></p> // HTML
или выделять участок тегом span и задавать степень жирности в CSS правилах.
<p>Хочу быть <span>самым жирным</span></p> // HTML
span {
font-weight: bolder; // CSS
}
или указывать жирность в цифрах.
span {
font-weight: 700; // в интервале 100 - 900
}
Как сделать ссылку в тексте
Нужный фрагмент текста, заключить в тег a, с указанием URL-адреса.
<p>Вам следует перейти по этой <a href="http://yandex.ru">ссылке</a></p> // внешняя ссылка
<p>У меня тут есть <a href="page_5.html">хорошая статья</a></p> // внутренняя ссылка
Как сделать текст в рамке
Рамка задается не тексту, а блочному тегу, в котором находится этот текст.
<p>Я - важный текст</p> // HTML
p {
border: 2px solid pink; // толщина, сплошная, цвет
padding: 15px; // воздух между рамкой и текстом
}
Как сделать текст подчеркнутым
Нужное место, обрамляем тегом u.
<p>Прошу здесь <u>подчеркнуть</u> меня</p> // HTML
Как задать тексту фон
Сделать фон для всего абзаца.
<p>Хочу выделиться фоном</p> // HTML
p {
background-color: pink; // CSS
}
Если вы хотите задать фон, отдельному фрагменту текста, тогда используйте span.
<p>Нет, только <span>розовый цвет</span></p> // HTML
span {
background-color: pink; // CSS
}
Как увеличить текст
<p>Посмотрите, какой я большой</p> // HTML
p {
font-size: 30px; // CSS
}
Как сделать текст курсивом
Через тег i в разметке.
<p>Здесь я прямой, а тут - <i>курсивом</i></p> // HTML
CSS стили + тег
<p><span>Курсивом</span> - я особенный</p> // HTML
span {
font-style: italic; // CSS
}
Итого
Мы взяли список топовых запросов, связанных с форматированием текста в HTML, от начинающих и коротко ответили на них. Задавайте ваши вопросы в комментариях.
-
Создано 29.07.2019 10:29:18
-
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
