В этой лекции можно глубже узнать о том, какими тегами размечается текст на веб-странице, как вставить списки, цитаты и фрагменты кода. Также можно увидеть, какие теги нужно использовать, чтобы акцентировать внимание читающего на слово или фразу, как включить жирное и курсивное начертания текста.
Перед прочтением стоит ознакомиться с информацией о том, что такое теги. Важно знать структуру тегов, их виды – парные и непарные. Знания о том, как выглядят теги для заголовков и параграфов также пригодятся. С материалом по этим темам можно ознакомиться в предыдущей лекции – 2.1 Базовые теги для разметки документа
В прошлой лекции были рассмотрены вопросы, связанные с разметкой крупных структурных блоков на странице, а также с разметкой текста с помощью заголовков и параграфов. Но для разметки сайта мало двух тегов. Поэтому в этой лекции разговор пойдет о более тонкой работе с текстом.
Можно начать со списков. В HTML есть три вида списков: неупорядоченные, упорядоченные и списки определений (описаний). У каждого из из этих видов есть свой тег, атрибуты и другие особенности.
Предположим, есть потребность вставить на страницу перечень однотипных элементов, порядок которых неважен. Для этого подойдет неупорядоченный список. Для его вставки на страницу используется тег <ul> (unordered list). Этот тег является своеобразной обёрткой, указывающей браузеру на начало и конец списка.
Сами пункты списка должны верстаться при помощи тега <li>(list item). Таким образом, полностью список верстается с использованием обоих тегов:
<ul>
<li>Покормить кота</li>
<li>Продолжать работать</li>
</ul>
Важно, что дочерними тегами для тега <ul> могут быть исключительно теги <li>. Любые другие теги обязательно должны находиться внутри пунктов списка <li>. Например:
<ul>
<li>Покормить кота</li>
<li> <!-- открывающий тег элемента списка -->
<p>Продолжать работать</p>
<p>Или</p>
<p>Пойти погулять</p>
</li><!-- закрывающий тег элемента списка -->
</ul>
Неупорядоченным списком на сайтах как правило верстается навигация (список элементов в меню), рубрикаторы (списки рубрик), пагинация (порядковая нумерация страниц), кнопки соцсетей в подвале и другие перечни однотипных элементов.
У неупорядоченного списка по умолчанию предусмотрены несколько видов маркеров: точки – disc, окружности – circle, квадраты – square, и даже их отсутствие – none. Изменять вид маркера раньше можно с помощью атрибута type.
<aside>
🔴 Атрибут type является устаревшим и приведен здесь в качестве примера. В следующих лекциях будет проведено знакомство с инструментом, который в данный момент используется для настройки типа маркеров списка.
</aside>
В том случае, если порядок элементов в списке важен, стоит использовать тег <ol>(ordered list). При этом пункты списка оборачиваются всё в тот же тег <li>. В упорядоченных списках так же, как и в неупорядоченных, дочерними тегами обязательно должны быть <li>, в которые уже могут быть вложены любые другие теги.