Работа с текстом в HTML
Не важно насколько классный дизайн у вашего сайта и неважно сколько прикольных и модных эффектов вы используете, всегда главное на сайте — это информация. Сегодня я расскажу как правильно структурировать информацию посредством HTML.
Стоит отметить, что есть два вида тэгов для работы с текстом. Это тэги физического и логического форматирования.
Следует рассмотреть некоторые тэги физического форматирования для понимания разницы, но т.к. стандарт языка xHTML уже не включает теги физического форматирования как устаревшие, особо на них останавливаться не будем.
Физическое и логическое форматирования текста
Итак, у нас есть два тэга:
1 2 | <strong>...</strong> <b>...</b> |
Разница заключается в значении этих тэгов. Тэг <strong>...</strong> означает важный текст, а тэг <b>...</b> делает текс просто жирный.
Теги физического форматирования не несут никакой смысловой нагрузки, а просто изменяют способ отображения. Теги логического форматирования не указывают браузеру, как должен выглядеть текст, они несут только смысловую нагрузку. Просто так уж исторически сложилось что внешне браузеры их интерпретируют одинаково.
Чувствуете разницу? Если да, то продолжим. Приводить полный список тэгов физического форматирования я не вижу смысла т.к. он морально устарел. А вот более подробно остановиться на логическом форматировании текста можно и даже нужно.
Тэги логического форматирования
<abbr> — Аббревиатура. Может иметь параметр title, который содержит ее расшифровку.
код:
1 | <abbr title="eXtensible Hypertext Markup Language">xHTML</abbr> |
в браузере это выглядит так:
<acronym> — Обозначает те аббревиатуры, которые уже настолько прижились, что используются в качестве самостоятельных слов. Так же может иметь параметр title, который содержит ее расшифровку.
код:
1 | <acronym title="Disk Operating System">DOS</acronym> |
в браузере это выглядит так:
<cite> — Помечает текст как цитату или сноску на другой материал. Обычно отображается курсивом.
код:
1 | <cite>Это цитата</cite> |
в барузере это выглядит так:
<code> — Отмечает небольшой фрагмент программного кода. Из-за работы плагина CodeColorer показать пример не могу — он перехватывает тэг <code>. Обычно отображается моноширинным шрифтом.
<del> — Отмечает текст как удаленный. По действию напоминает тег физического форматирования <s>, так как обычно браузеры выводят отмеченный фрагмент перечеркнутым.
код:
1 | <del>Перечеркнутый текст</del> |
в барузере это выглядит так:
<ins> — Отмечает текст, как вставленный в новой версии документа. В идеале должен следовать сразу после <del>. По действию напоминает тег <u>, то есть обычно выводит отмеченный текст подчеркнутым.
код:
1 | <ins>Подчеркнутый текст</ins> |
в барузере это выглядит так:
<dfn> — обозначает «определение». Когда в тексте первый раз встречается новый неизвестный термин, его стоит выделить этим тегом и дать определение.
код:
1 | <dfn>Браузер</dfn> - программа для просмотра веб-страниц |
в барузере это выглядит так:
<strong> — Используется для выделения важного фрагмента текста. Браузеры обычно форматируют фрагмент полужирным начертанием. Внешне схож с тэгом <b>, но разницу мы разбирали ранее.
код:
1 | <strong>Важный текст</strong> |
в барузере это выглядит так:
<em> — Используется для выделения важный фрагмент текста, расстановки акцентов. Обычно отображается курсивом
код:
1 | <em>Важный текст выделенный курсивом</em> |
в барузере это выглядит так:
<q> — Также используется для выделения из текста цитат. Отображается как закавыченный текст.
код:
1 | <q>Цитата в кавычках</q> |
в барузере это выглядит так:
Цитата в кавычках, а это обычный текст
<samp> — Обозначает текст, который выводится в результате работы какой-либо программы. Обычно отображается моноширинным шрифтом.
1 | <samp>x = 10</samp> |
в барузере это выглядит так:
<kbd> — Обозначает текст, который набирается пользователем на клавиатуре. Обычно выводится моноширинным шрифтом.
код:
1 | Из под рута введите <kbd>rm -f</kbd> и будет вам счастье. |
в барузере это выглядит так:
<var> — Отмечает текст, как переменную какой-либо компьютерной программы. Обычно отображается курсивом. Например:
код:
1 | <var>$count</var> |
в барузере это выглядит так:
Вот, пожалуй, и все. Поскольку тэги логического форматирования призваны придать большее значение тексту, они должны использоваться только по назначению, а не просто для придания тексту полужирного или курсивного начертания.
Подпишитесь чтобы следить за обновлениями и ничего не пропустить.
Удачи.
↑ К оглавлению ↑
Популярность: 81%
Комментарии к посту «Работа с текстом в HTML»
Про большинство тегов даже не слышал. Хотя часть этих тегов реально нужны. Спасибо.
ЦитироватьЯ всегда обхожусь несколькими, самыми распространёнными тегами форматирования текста. На мой взгляд использовать много различных тегов есть излишество.
ЦитироватьОбъясните зачем каждый тег нужнен. Реально используются лишь strong, em, code, abbr, dfn, и то, последний очень редко.
ЦитироватьВсе это было придумано с одной лишь целью — сделать текст более логичным не только для читателя, но и для компьютера.
В таких случаях, в пример, обычно, приводят людей с какими-нибудь нарушениями зрения и пользующихся специальными программами, которые читают текст со страницы, т.е. и интонацией и все такое. Если используется только физическое форматирование программа не сможет расставить интонацию или разобраться где слово, а где аббревиатура.
Для примера, попробуйте прочитать "HTML" как единое слово, а не по буквам. Фигня непроизносимая получиться.
Пользуюсь всегда небольшим набором тегов, но узнать парочку новых лишним не будет! Спасибо за примеры.
ЦитироватьВ большей степени все теги эти знакомы (качал литературу на эту тематику) хотя все не изучил. Но за 2 последних тега спасибо.
ЦитироватьТеги учить наизусть необязательно, функцию памяти замещает любой специализированный софт
ЦитироватьНикакой специализированный софт не поможет тебе, если ты не знаешь в чем тебе нужна помощь
Оставить комментарий