Разметка текста с помощью HTML
Научимся добавлять на простейшую HTML-страницу текстовое содержание и правильно размечать его: абзацы, заголовки, подзаголовки, списки и многое другое.
Абзацы [1/17]
В курсе «Структура HTML-документа» вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, и с некоторыми служебными тегами, которые не отображаются в браузере.
В этом курсе мы будем изучать теги для логической разметки текста. Использовать их можно только внутри тега <body> .
Начнём с простейшего тега <p> , с помощью которого создаются абзацы. По умолчанию абзацы начинаются с новой строки и имеют вертикальные отступы, которыми можно управлять с помощью стилей.
Заголовки и подзаголовки [2/17]
Для создания структуры больших текстов обычно используются заголовки. В текстовых редакторах есть возможность выделить часть текста, найти пункт «Заголовок» нужного уровня в меню, и применить его.
В языке HTML для выделения заголовков предусмотрено целое семейство тегов: от <h1> до <h6> . Тег <h1> обозначает самый важный заголовок (заголовок верхнего уровня), а тег <h6> обозначает подзаголовок самого нижнего уровня.
На практике редко встречаются тексты, в которых встречаются подзаголовки ниже третьего уровня. Поэтому самыми часто используемыми тегами заголовков являются: <h1> , <h2> и <h3> .
Стоит отметить, что поисковые системы придают особое значение заголовкам, поэтому необходимо учиться правильно их использовать.
Неупорядоченный список [3/17]
Списки часто используются в различных документах. Иногда, чтобы сделать список, пользователь просто нумерует строчки текста. Такой подход не является хорошим, так как в документе отсутствует логическая сущность «список».
В HTML существует семейство тегов для создания списков: неупорядоченных, упорядоченных и списков определений. В последующих заданиях мы будем тренироваться работать с ними.
Неупорядоченные (или маркированные) списки создаются с помощью тега <ul> (Unordered List — неупорядоченный список), который может содержать внутри себя теги <li> (List Item, элемент списка), обозначающие «элемент списка».
Упорядоченный список [4/17]
Упорядоченный список создаётся с помощью тега <ol> , который может содержать внутри себя теги <li> .
Если элементы неупорядоченного списка по умолчанию отмечаются маркерами, то элементы упорядоченного списка — нумеруются.
Для упорядоченного списка можно задать атрибут start , который изменяет начало нумерации. Например, код:
Приведёт к такому результату:
- раз
- два
Многоуровневый список [5/17]
Создать многоуровневый список достаточно просто.
Сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами <li> и </li> , добавить список второго уровня. При этом необходимо аккуратно закрывать все теги.
В примере с ошибкой вложенный список вставлен не внутрь элемента списка, а между элементами, что недопустимо.
Количество уровней в списках не ограничено. В многоуровневом списке можно использовать как упорядоченные, так и неупорядоченные списки.
В этом задании мы потренируемся работать с многоуровневыми списками.
Ещё более многоуровневый [6/17]
Хорошо. Вы создали двухуровневый список. Теперь задание посложнее.
В этом задании вам нужно будет создать четырёхуровневый список, наподобие этого:
- Разметка
- Основы HTML
- HTML-теги
- парные
- одиночные
- Селекторы
- по типу
- по классу
- вложенные
Список определений [7/17]
Список определений создаётся с помощью трёх тегов:
- <dl> (Definition List) обозначает сам список определений;
- <dt> (Definition Term) обозначает термин;
- <dd> (Definition Definition) обозначает определение термина.
Теги <dt> и <dd> пишутся парами внутри <dl> .
Важность. Теги strong и b [8/17]
Ещё раз отметим, что этот курс посвящён логической разметке текста, поэтому уделяется особое внимание смыслу элементов, их предназначению, а не визуальному форматированию.
В предыдущих заданиях вы познакомились с элементами, которые предназначены для разметки крупных блоков текста: заголовков, абзацев и списков. В этом и последующих заданиях мы познакомимся с элементами, предназначенными для разметки небольших фраз и отдельных слов.
Первые два тега предназначены, чтобы указать на важность слова или фразы.
Тег <strong> определяет важность отмеченного текста.
Тег <b> предназначен для выделения текста без придания ему особой важности.
Визуально оба тега одинаковы, они выделяют текст полужирным.
Лучше всего отличия этих тегов будут заметны людям, которые используют специальные настройки ОС, в частности, слепым и слабовидящим. Когда они включают функцию чтения текста, то «говорилка» будет интонацией выделять слова с тегом <strong> . То же самое касается и тегов <em> и <i> . Тег <em> «говорилка» будет выделять интонацией.
Акцентируем внимание. Теги em и i [9/17]
Следующие два тега предназначены для акцентирования внимания на слово или фразу.
Тег <em> определяет текст, на который сделан особый акцент, меняющий смысл предложения.
Например, если мы хотим подчеркнуть, что Кекс не любит питаться укропом (он больше за тунца), а любит только гонять его по полу, то разметим текст так:
Тег <i> обозначает текст, который отличается от окружающего текста, но не является более важным. Обычно так выделяют названия, термины, иностранные слова.
Например, если мы хотим указать, что инспектор — это какой-то специальный термин, то разметим текст так:
Визуально оба тега одинаковы, они выделяют текст курсивом.
Переносы и разделители. Теги br и hr [10/17]
Иногда возникает необходимость вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.
Для этого в HTML предусмотрен одиночный тег <br> .
Одиночный тег <hr> используется для того, чтобы создать горизонтальную линию-разделитель. На внешний вид этой линии можно влиять с помощью атрибутов, но правильней делать это с помощью CSS (это будет изучаться в последующих курсах).
Абзацный отступ HTML
Для облегчения восприятия и чтения текст разделяют на части. Например, книга состоит из глав, газета – из рубрик, статья – из подзаголовков, которые имеют собственную структуру: отступы, абзацы, списки и т.д.
На размещенный в интернете текст тоже распространяется данное правило. Он должен иметь понятную пользователю структуру. Ведь от того насколько удобно и просто он будет восприниматься, в первую очередь зависит, задержится ли пользователь на вашем сайте и как усвоит прочитанную информацию.
Чтоб создать абзацы в HTML применяется тег p разделяющий документ на вертикальные отступы, добавляя внизу и вверху пустую строчку.
Заглавная строка
Это первая строчка абзаца с отступом. Раньше, когда книги переписывались вручную было принято делать ее красными чернилами. Со временем традиция упразднилась, но название осталось.
Хотя наличие отступов облегчает чтение, создавая интернет-страницы, их значение недооценивают и поэтому редко оформляют.
Автоматическое добавление красной строки осуществляется благодаря свойству CSS text-indent, оно позволяет устанавливать фиксированный отступ перед первой буквой абзаца. Введенные данные определяют на какое расстояние красная строка сдвинется вправо. Существует способ сделать текст выступающим (передвинуть начало абзаца влево), введя отрицательные цифры.
В качестве значений допускается указывать сантиметры (cm), пиксели (px) или другие единицы измерения, понятные CSS. Но наиболее разумно использовать проценты % или относительные единицы (em), которые автоматически соответствуют заданному размеру шрифта.
Следует учитывать, на разные экраны человек смотрит с различного расстояния, и 1 сантиметр на мониторе компьютера и на смартфоне воспринимается по-разному. Например, когда установленный шрифт 2in, то 1em означает 2in. Также допустимо указывать процент, когда величина отступа рассчитывается в % от ширины блока текста.
Если необходимо создать для отдельного абзаца индивидуальный отступ, дополнительно внутри HTML элемента p прописывается атрибут style со значеним text-indent, и вносятся требуемые величины отступа.
Для более гибкой настройки представляемого текста можно создать отдельные классы CSS с различными отступами, и применять их в зависимости от важности и необходимости персонализации контента.
Хотите, чтобы абзацы по умолчанию начинались с фиксируемого отступа, используйте свойство CSS text-indent.
- HTML-теги
- Основы HTML