1. Тег p.
Изучение тегов для работы с текстом начнем с тега p, при помощи которого создаются абзацы. По умолчанию абзацы начинаются с новой строки и по ширине растягиваются от левого до правого окна браузера, т.е. на всю доступную ширину.
Если создать подряд 2 абзаца с текстом, то мы увидим, что между ними расстояние больше, чем между строк внутри абзацев.
Кроме того, обратите внимание, что, помимо отступов сверху и снизу между абзацами, мы также нигде не указывали ни размер шрифта, ни его цвет.
Соответственно, возникает 2 логических вопроса: какие характеристики у нашего текста на текущий момент и как их можно изменить?
Ответ на первый вопрос довольно прост. В браузерах для всех тегов есть свой набор свойств по умолчанию, причем, в зависимости от браузера эти характеристики могут отличаться.
Для того, чтобы посмотреть, например, какой отступ между абзацами текста или какой размер шрифта, давайте активируем приложение Firebug, которое мы установили к браузеру на первом уроке.
В открывшемся снизу окне выберите мышкой элемент с изображением стрелочки и наведите мышкой на второй абзац текста. При этом весь абзац выделится своеобразной интерактивной окантовкой, как бы указывая на границы выбранного элемента.
Нажмите левой кнопкой мышки в любом месте выбранного абзаца. В окне снизу в левой его части вы увидите структуру Вашей страницы, идентичную той, которая написана в Вашем редакторе кода. Выбранный Вами элемент будет выделен синим цветом.
В правой части нижнего окна выберите закладку «Скомпилированный стиль». Здесь Вы увидите все свойства выбранного элемента и их значения, заданные браузером по умолчанию. Свойства указаны в алфавитном порядке.
Если пролистать немного вниз, то для свойства color мы увидим значение rgb(0, 0, 0), что означает черный цвет в формате rgb, а для свойства font-size - 16px, что означает 16 пикселей. Это и есть те самые значения свойств по умолчанию для тега p.
Ответ на вопрос как эти свойства изменять и в каких форматах можно устанавливать значения мы рассмотрим немного позже.
2. Тег br.
Как Вы заметили, текст в абзаце заполняет каждую строку от начала до конца и переходит на новую строку лишь тогда, когда очередное слово не вмещается целиком в текущей строке.
Но иногда возникает необходимость принудительно перенести текст на новую строку, не создавая при этом новый абзац. Например, при написании стихов или текстов песен.
Для этого в языке html предусмотрен одинарный тег br. Давайте вставим его где-нибудь в первой строке второго абзаца.
Как видите, последующий текст перешел на новую строку, при этом отступ между строками остался прежним.
3. Теги strong, b.
Если есть необходимость выделить одно или несколько слов или даже предложений жирным начертанием, то для этих целей мы можем использовать парные теги strong или b.
Визуально действия обоих тегов одинаковы, они делают выбранный текст полужирным. Отличительной чертой тега strong является задание выделенному фрагменту текста семантической важности. Это используется для сео-оптимизации страниц сайта и к данному курсу не относится. Пока можете использовать любой тег на выбор.
4. Теги i, em.
Следующие два тега i и em предназначены для акцентирования внимания на слово или фразу путем изменения начертания на курсивное.
Как и у предыдущих двух тегов, нет никакого визуального отличия от действия данных тегов. С точки зрения семантики тег em имеет большую важность, чем i.
Курсивом обычно выделяют названия, термины, иностранные слова и т.д.
5. Тег mark.
Еще один способ визуально выделить часть текста – это использовать тег mark. Его действие аналогично цветному маркеру для выделения текста на бумаге – в браузерах текст внутри mark подсвечивается жёлтым фоном.
6. Теги del и ins.
Если на странице своего сайта Вы делаете правки по тексту, например, обновляете цены на продукцию в сторону уменьшения, и при этом хотите указать пользователям на эти изменения, то можно использовать теги del и ins:
- del выделяет текст, который был удалён в новой версии документа;
- ins выделяет текст, который был добавлен в новой версии документа.
Еще одним примером применения этих тегов может служить список ошибок. Когда ошибка исправлена, её помечают тегом del, если найдена новая ошибка, то её добавляют в список и помечают тегом ins.
Оба тега имеют атрибут datetime (об атрибутах поговорим чуть позже), в котором можно указать дату и время, когда была внесена та или иная правка.
7. Теги sup и sub.
Следующие два тега обычно используются не для выделения слов, а для выделения отдельных символов. Например, для указания единиц измерения или для написания простых формул: 20м2, H2O, X3+X2=1.
Тег sup отображает текст в виде верхнего индекса.
Тег sub отображает текст в виде нижнего индекса.
8. Теги h1 - h6.
Для логического структурирования больших текстов в книгах, газетах и другой литературе обычно используются заголовки. В языке html тоже есть возможность выделить текст заголовком. Причем предусмотрено целое семейство тегов: от h1 до h6.
Тег h1 обозначает самый важный заголовок - заголовок первого уровня, а тег h6 обозначает подзаголовок самого нижнего уровня.
На практике редко встречаются тексты, в которых встречаются подзаголовки ниже третьего уровня. Поэтому самыми часто используемыми тегами заголовков являются: h1, h2 и h3.
Стоит отметить, что поисковые системы придают особое значение заголовкам, особенно заголовку h1, поэтому необходимо учиться правильно их использовать.
В частности, заголовок h1 не рекомендуется использовать на странице больше 1 раза.
9. Тег blockquote.
В html существует несколько тегов для обозначения цитат:
- тег blockquote предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату как отдельный блок текста с отступами.
- тег q предназначен для выделения коротких цитат в предложениях. Текст внутри этого тега автоматически обрамляется кавычками.
- тег cite используется для того, чтобы выделить источник цитаты, название произведения или автора цитаты.