Ранее я
рассказал вам о некоторых тегах необходимых для создания самой простой HTMLстраницы и
тегах, которые не отображаются в браузере в посте - структура HTMLдокумента.. Теперь пришла пора
поговорить о тегах, для логической
разметки текста, которые используются только внутри тега <body>
Стоит отметить, что поисковые системы придают особое значение заголовкам, поэтому необходимо учиться правильно их использовать.
Важность Теги strong и b
Остается вспомнить одну из самых сложных тем -
Тег <p>- размечают
абзацы. Он начинается с новой строчки и высотой отступа в нем можно управлять с
помощью стилей.
Заголовки и подзаголовки.
Для создания структур и больших
текстов, обычно используют заголовки и подзаголовки. Это легко сделать, выделив
текст в редакторе и найдя нужный пункт в меню (заголовок или подзаголовок).
В
HTML это теги <h> их может быть
шесть.<h1>-<h6> Заголовок самый верхний 1 , нижний 6.
На практике редко встречаются тексты, в
которых встречаются подзаголовки ниже третьего уровня. Поэтому самыми часто
используемыми тегами заголовков являются: <h1>,
<h2> и <h3>.Стоит отметить, что поисковые системы придают особое значение заголовкам, поэтому необходимо учиться правильно их использовать.
Неупорядоченный список.
Списки часто
используются в различных документах. Иногда, чтобы сделать список,
пользователь просто нумерует строчки текста. Такой подход не является
хорошим, так как в документе отсутствует логическая сущность «список».
В HTML существует семейство тегов для
создания списков: неупорядоченных,
упорядоченных и списков определений.
Неупорядоченные
(или маркированные) списки создаются с помощью тега <ul>, который может содержать внутри
себя теги <li>, обозначающие
«элемент списка».
Упорядоченный список создаётся с помощью тега <ol>, который может содержать
внутри себя теги <li>.
Если элементы неупорядоченного списка по умолчанию
отмечаются маркерами, то элементы упорядоченного списка — нумеруются.
Для
упорядоченного списка можно задать атрибут start,
который изменяет начало нумерации. Например, код:
<ol
start="3">
<li>раз</li>
<li>два</li>
</ol>
Приведёт
к такому результату:
3. раз
4. два
5. »
Многоуровневый список
Создать многоуровневый список достаточно просто.
Сначала нужно создать список первого уровня,
а затем внутрь любого элемента этого списка, между тегами <li> и </li>, добавить список второго уровня. При этом необходимо
аккуратно закрывать все теги.
Пример
правильного кода:
<ul>
3. <li>1
4. <ul>
5. <li>1.1</li>
6. <li>1.2</li>
7. </ul>
8. </li>
9. <li>2</li>
10. </ul>
Пример кода с ошибкой:
11. <ul>
12. <li>1</li>
13. <ul>
14. <li>1.1</li>
15. <li>1.2</li>
16. </ul>
17. <li>2</li>
18. </ul>
В примере с ошибкой вложенный список вставлен
не внутрь элемента списка, а между элементами, что недопустимо.
Количество уровней в списках не ограничено.
В многоуровневом списке можно использовать как упорядоченные, так и неупорядоченные списки.
Список определений
Список
определений создаётся с помощью трёх тегов:
1. <dl> обозначает
сам список определений;
2. <dt> обозначает
термин;
3. <dd> обозначает
определение термина.
Теги <dt> и <dd> пишутся парами внутри <dl>.
Например:
<dl>
<dt>Термин</dt>
<dd>Определение</dd>
<dt>Второй термин</dt>
<dd>И его определение</dd>
<dt>Кошка</dt>
<dd>Шерстяное изделие развлекательного
характера</dd>
</dl>
Важность Теги strong и b
Ещё
раз отметим, что сейчас мы занимаемся логической разметкой текста, поэтому
уделяется особое внимание смыслу элементов, их предназначению, а не визуальному
форматированию.
Ранее,
я писал об элементах, которые предназначены для разметки крупных блоков текста:
заголовков, абзацев и списков. Теперь пришла пора разобраться с элементами,
предназначенными для разметки небольших фраз и отдельных слов.
Первые
два тега предназначены, чтобы указать на важность слова или фразы.
Тег <strong>
определяет важность отмеченного текста.
Тег <b>
предназначен для выделения текста без придания ему особой важности.
Лучше
всего отличия этих тегов будут заметны людям, которые используют специальные
настройки ОС, в частности, слепым и слабовидящим. Когда они включают функцию
чтения текста, то «говорилка» будет интонацией выделять слова с тегом <strong>.
То же самое касается и тегов <em> и <i>. Тег <em>
«говорилка» будет выделять интонацией.
Визуально
оба тега одинаковы, они выделяют текст полужирным.
Отметим,
что новый смысл тегу <b> придали в HTML5. Раньше это был тег,
который просто делает текст полужирным. То есть он был предназначен только для
визуального форматирования.
Акцентируем
внимание. Теги em и i
Следующие
два тега предназначены для акцентирования внимания на слово или фразу.
Тег <em>
определяет текст, на который сделан особый акцент, меняющий смысл предложения.
Например,
если мы хотим подчеркнуть, что Кот не любит питаться укропом (он больше за
тунца), а любит только гонять его по полу, то разметим текст так:
Инструктор
Кот любит <em>играть</em> с укропом.
Тег <i>
обозначает текст, который отличается от окружающего текста, но не является
более важным.
Обычно так выделяют названия, термины,
иностранные слова.
Например,
если мы хотим указать, что инспектор — это какой-то специальный термин, то
разметим текст так:
Обычно
Кот пользовался <i>инспектором</i> браузера для
поиска ошибок.
Визуально
оба тега одинаковы, они выделяют текст курсивом.
Новый
смысл тегу <i> придали в HTML5. Раньше это был просто тег для
выделения текста курсивом.
Переносы и разделители. Теги br и hr
Иногда
возникает необходимость вставить в текст перенос строки, не создавая при этом
абзац. Например, при разметке стихов или текстов песен.
Для
этого в HTML предусмотрен одиночный тег <br>.
Иногда
этот тег используется для разбиения текста на «как бы абзацы», что является
плохим подходом. Используйте для разметки абзацев тег <p>.
Одиночный
тег <hr> используется для того, чтобы создать горизонтальную
линию-разделитель. На внешний вид этой линии можно влиять с помощью атрибутов,
но правильней делать это с помощью CSS (к этому вернемся позже)
В HTML существует несколько тегов для обозначения цитат:
<blockquote> предназначен
для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег
выделяет цитату как отдельный блок текста с отступами.
<q> предназначен для
выделения коротких цитат в тексте предложения. Текст внутри этого тега
автоматически обрамляется кавычками.
<cite> используется для
того, чтобы выделить источник цитаты, название произведения или автора цитаты.
Верхние и нижние индексы
Следующие
два тега обычно используются не для выделения слов, а для выделения отдельных
символов. Их используют для указания единиц измерения или для написания простых
формул.
Например:
20м2, H2O, X3+X2=1
Тег <sup>
отображает текст в виде верхнего индекса.
Тег <sub>
отображает текст в виде нижнего индекса.
Стоит
отметить, что эти теги являются чисто презентационными и не имеют собственной
семантики.
Эти
теги можно использовать внутри друг друга для создания более сложных формул.
Если
вам нужно вставить очень сложную формулу в HTML-документ, лучше воспользоваться
специальным языком разметки MathML.
Помечаем изменения. Теги del и ins
Любой
документ на протяжении своей «жизни» может изменяться. С распространением
динамических веб-приложений вносить изменения в HTML-документы стало проще
простого.
Иногда
возникает вопрос: а что же именно было изменено в документе, что было
добавлено, а что удалено?
Как
раз для описания изменений предназначены теги <del> и <ins>.
<del> выделяет текст, который был удалён в новой версии документа.
<ins> выделяет текст, который был добавлен в новой версии документа.
Оба
тега имеют атрибут datetime, в котором можно указать дату и время, когда
была внесена та или иная правка.
Простейшим
примером применения этих тегов может служить список ошибок. Когда ошибка
исправлена, её помечают тегом <del>, если найдена новая ошибка, то
её добавляют в список и помечают тегом <ins>.
Атрибут
datetime предназначен не для людей, а для компьютеров, поэтому дату и время
там пишут в стандартизованном формате. При такой разметке программам легче
разбирать документы и анализировать, когда произошли те или иные изменения.
Преформатированный текст
Наверное,
вы уже заметили, как отличается отображение кода в HTML-редакторе и в мини-браузере.
Вы
можете ставить сколько угодно пробелов в HTML-коде, но браузер отобразит их как
один. Вы также можете ставить сколько угодно переносов строки в HTML-коде, а в
браузере переноса не будет, если только не использовать специальные теги,
например <p> или <br>.
Изменить
это поведение браузера можно с помощью тега <pre>, который
обозначает «предварительно отформатированный текст». Браузер сохраняет и
отображает все пробелы и переносы, которые есть внутри тега <pre>.
Наиболее
часто этот тег используется при отображении примеров кода.
Просто выделенный текст
В
HTML5 появился новый тег <mark>, который обозначает выделенный
текст.
Иногда
при работе с объёмными текстами мы используем маркер, чтобы выделять ключевые
слова, идеи или что-то другое на что стоит обратить внимание. Такое же
назначение и у тега <mark>.
В
современных браузерах текст внутри <mark> подсвечивается жёлтым
фоном.Остается вспомнить одну из самых сложных тем -
Почитайте как изменить текст в сайдбаре вашего сайта, там приводятся общие нормы и правила задания тексту шрифтов, размера, окраски и прочего.
Более подробно узнать о всех тонкостях написания кода и потренировать свои навыки онлайн вы сможете на сайте
Более подробно узнать о всех тонкостях написания кода и потренировать свои навыки онлайн вы сможете на сайте
Комментариев нет:
Отправить комментарий