Отдельные слова или целые фрагменты могут быть очень легко наклонены или выделены жирным шрифтом. Сначала рассмотрим вариант с жирным шрифтом. Два HTML-элемента, которые обеспечивают жирное выделение текста, - это b и strong.
Добро пожаловать на <b>PSD-Tutorials.de</b>! <br /> Добро пожаловать на <strong>PSD-Tutorials.de</strong>!
Просмотр результата в браузере даст следующее изображение:
Очевидно, что оба элемента обеспечивают одинаковое отображение. Почему тогда существуют два различных элемента? Фактически для веб-страниц существуют иные способы отображения, чем у известных стандартных браузеров. Например, подумайте о ридере для слепых людей или мобильных устройствах. HTML-элементы, предлагаемые W3C, призваны поддерживать семантику. Так, теперь элемент b не означает, что что-то должно быть выделено жирным шрифтом. Скорее b означает текст, который выделен и не обладает повышенной важностью. Например, это могут быть названия продуктов или ключевые слова в документах.
Элемент strong ранее использовался для усиленного выделения, а em использовался для выделенного важного текста. В предыдущих версиях HTML strong был усиленным вариантом em. В HTML5 этим элементам придается другое значение.
Сначала текст с нормальным выделением.
<p> Кошки - милые животные. </p>
Теперь тот же текст, но уже с выделением особого внимания к первому слову.
<p> <em>Кошки</em> милые животные. </p>
Использование em перекладывает внимание на слово Кошки. Это может быть полезно, например, в обсуждении о том, что коты или кошки более милы.
Теперь в данном примере можно применить элемент em к слову милые.
<p> Кошки <em> милые </em> животные. </p>
Это может быть ответом в обсуждении, где кто-то утверждает, что кошки совсем не милы.
Фрагменты текста, отмеченные em, отображаются в браузере курсивом. Тот же оптический эффект можно достичь с помощью элемента i.
Согласно рабочему набору HTML5, элемент i теперь больше не используется для курсива.
<p> Добро пожаловать на <i>PSD-Tutorials.de</i> </p>
Этот элемент теперь означает, что через него хотят передать другое настроение. Например, элемент i может быть интересен для обозначения технических терминов или таксономических наименований.
Все это звучит ужасно теоретически, я знаю. Вообще говоря, вам следует придерживаться рекомендаций HTML5. С другой стороны, вас, конечно же, никто не осудит, если вы используете strong вместо b.
<p> <em>Строка с em</em><br /> <i>Строка с i</i><br /> <strong>Строка с strong</strong><br /> <b>Строка с b</b> </p>
В конечном итоге здесь должны действовать производители браузеров.
За фактическое оформление текстов с этими элементами отвечает в любом случае CSS.
Акронимы с abbr
Для обозначения акронимов используется тот же элемент, который ранее был использован для сокращений, а именно abbr.
Офис Deutsch-Österreich das <abbr title="World Wide Web Consortium">W3C</abbr> с апреля 2009 года находится в Фахочухшуле Потсдаме.
Браузеры, правильно интерпретирующие элемент abbr, подчеркивают текст, заключенный в элемент abbr.
Кроме того, элементу abbr следует присвоить атрибут title. Здесь обычно указывается полное значение акронима. Когда посетитель наводит указатель мыши на акроним, во всплывающем окне отображается значение.
Адреса с address
С помощью элемента address можно выделить информацию об адресе.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Браузеры обычно отображают содержимое элемента address курсивом.
Выделение программного кода с помощью элемента code
Элемент code используется для выделения программного кода. В этом отношении по сравнению с предыдущими версиями HTML ничего не изменилось. Элемент code по-прежнему используется для этой цели.
<pre>
Das ist ein HTML-Kopfbereich:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Обычно элемент code сочетается с элементом pre, чтобы сохранить отступы, используемые в программном коде.
Спецификация HTML5 рекомендует использовать атрибут class в связи с элементом code. Этому атрибуту можно присвоить язык, используемый внутри элемента code. Вот некоторые типичные примеры того, как могут выглядеть такие выделения:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Ни то, ни другое, браузеры не обязаны обрабатывать эти инструкции в соответствии с W3C.
<pre>
Das ist ein HTML-Kopfbereich:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
В данный момент атрибут class не оказывает видимого воздействия в браузере. Однако человеку, просматривающему страницу в режиме просмотра исходного кода, будет видно, на каком языке написан программный код, если он использует элемент code.
Выделение маленьким шрифтом с помощью элемента small
Элемент small первоначально использовался для уменьшения размера текста. В HTML5 small предназначен специально для мелкого текста, который может включать следующее:
• Авторские права
• Отказ от ответственности
• Лицензионные условия
• Условия использования
W3C явно указывает, что элемент small не следует использовать для длинных текстовых фрагментов.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Подчеркивание текста
Вы можете выделить слова с помощью элемента u, чтобы подчеркнуть их. Вот пример:
<p>Willkommen bei <u>PSD-Tutorials.de</u></p>
Результат в браузере будет выглядеть следующим образом:
При просмотре результата действительно достигается желаемый эффект. Однако здесь есть подвох. В Интернете подчеркнутый текст обычно означает гиперссылку. Если вы подчеркнете текст или слово, пользователи могут подумать, что это гиперссылка. Попытка щелкнуть по нему, конечно же, не приведет к успеху. Поэтому вам следует избегать подчеркивания.
