Работа с текстом в HTML

Не важно насколько классный дизайн у вашего сайта и неважно сколько прикольных и модных эффектов вы используете, всегда главное на сайте — это информация. Сегодня я расскажу как правильно структурировать информацию посредством HTML.

Стоит отметить, что есть два вида тэгов для работы с текстом. Это тэги физического и логического форматирования.

Следует рассмотреть некоторые тэги физического форматирования для понимания разницы, но т.к. стандарт языка xHTML уже не включает теги физического форматирования как устаревшие, особо на них останавливаться не будем.

Физическое и логическое форматирования текста

Итак, у нас есть два тэга:

<strong>...</strong>
<b>...</b>

Разница заключается в значении этих тэгов. Тэг <strong>...</strong> означает важный текст, а тэг <b>...</b> делает текс просто жирный.

Теги физического форматирования не несут никакой смысловой нагрузки, а просто изменяют способ отображения. Теги логического форматирования не указывают браузеру, как должен выглядеть текст, они несут только смысловую нагрузку. Просто так уж исторически сложилось что внешне браузеры их интерпретируют одинаково.

Чувствуете разницу? Если да, то продолжим. Приводить полный список тэгов физического форматирования я не вижу смысла т.к. он морально устарел. А вот более подробно остановиться на логическом форматировании текста можно и даже нужно.

Тэги логического форматирования

<abbr> — Аббревиатура. Может иметь параметр title, который содержит ее расшифровку.

код:

<abbr title="eXtensible Hypertext Markup Language">xHTML</abbr>

в браузере это выглядит так:

---

<acronym> — Обозначает те аббревиатуры, которые уже настолько прижились, что используются в качестве самостоятельных слов. Так же может иметь параметр title, который содержит ее расшифровку.

код:

<acronym title="Disk Operating System">DOS</acronym>

в браузере это выглядит так:

---

<cite> — Помечает текст как цитату или сноску на другой материал. Обычно отображается курсивом.

код:

<cite>Это цитата</cite>

в барузере это выглядит так:

---

<code> — Отмечает небольшой фрагмент программного кода. Из-за работы плагина CodeColorer показать пример не могу — он перехватывает тэг <code>. Обычно отображается моноширинным шрифтом.

<del> — Отмечает текст как удаленный. По действию напоминает тег физического форматирования <s>, так как обычно браузеры выводят отмеченный фрагмент перечеркнутым.

код:

<del>Перечеркнутый текст</del>

в барузере это выглядит так:

---

<ins> — Отмечает текст, как вставленный в новой версии документа. В идеале должен следовать сразу после <del>. По действию напоминает тег <u>, то есть обычно выводит отмеченный текст подчеркнутым.

код:

<ins>Подчеркнутый текст</ins>

в барузере это выглядит так:

---

<dfn> — обозначает «определение». Когда в тексте первый раз встречается новый неизвестный термин, его стоит выделить этим тегом и дать определение.

код:

<dfn>Браузер</dfn> - программа для просмотра веб-страниц

в барузере это выглядит так:

---

<strong> — Используется для выделения важного фрагмента текста. Браузеры обычно форматируют фрагмент полужирным начертанием. Внешне схож с тэгом <b>, но разницу мы разбирали ранее.

код:

<strong>Важный текст</strong>

в барузере это выглядит так:

---

<em> — Используется для выделения важный фрагмент текста, расстановки акцентов. Обычно отображается курсивом

код:

<em>Важный текст выделенный курсивом</em>

в барузере это выглядит так:

---

<q> — Также используется для выделения из текста цитат. Отображается как закавыченный текст.

код:

<q>Цитата в кавычках</q>

в барузере это выглядит так:

---

<samp> — Обозначает текст, который выводится в результате работы какой-либо программы. Обычно отображается моноширинным шрифтом.

<samp>x = 10</samp>

в барузере это выглядит так:

---

<kbd> — Обозначает текст, который набирается пользователем на клавиатуре. Обычно выводится моноширинным шрифтом.

код:

Из под рута введите <kbd>rm -f</kbd> и будет вам счастье.

в барузере это выглядит так:

---

<var> — Отмечает текст, как переменную какой-либо компьютерной программы. Обычно отображается курсивом. Например:

код:

Данная функция в своей работе использует локальную переменную <var>$count</var>

в барузере это выглядит так:

---

Вот, пожалуй, и все. Поскольку тэги логического форматирования призваны придать большее значение тексту, они должны использоваться только по назначению, а не просто для придания тексту полужирного или курсивного начертания.

Подпишитесь чтобы следить за обновлениями и ничего не пропустить.

Удачи.

---

↑ К оглавлению ↑

---

2leep.com

---

---