Окремі слова або цілі уривки можна дуже легко вирізняти курсивом і жирним шрифтом. По-перше, щодо жирного підкреслення. Для цього, в принципі, доступні два HTML-елементи: b та strong.
Ласкаво просимо на <b>PSD-Tutorials.de</b>! <br/> Ласкаво просимо на <strong>PSD-Tutorials.de</strong>!
Перегляд результату у браузері показує таке зображення:
Очевидно, обидва елементи забезпечують ідентичне відображення. Чому тоді існують два різні елементи? Фактично, для веб-сторінок існують інші способи відображення, аніж традиційний браузер. Наприклад, почніть думати про читальників для незрячих людей або мобільні пристрої. HTML-елементи, що пропонуються W3C, призначені для підтримки семантики. Таким чином, тепер елемент b насправді не означає, що щось повинно бути відображено жирним. Скоріше, b позначає текст, виділений для видимого підкреслення без підвищеної важливості. Це, наприклад, може бути назва продукту або ключові слова в документах.
Елемент strong раніше вказував на посилене підкреслення. em використовувався для підкреслення важливого тексту (емоційно). strong колись був підсиленням em в ранніх версіях HTML. Однак обом елементам 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-Österreichische Büro des <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>
Це заголовок HTML:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Зазвичай комбінують код з елементом pre, щоб отримати відступи, використані в програмному коді.
Специфікація HTML5 рекомендує використовувати атрибут class у контексті елемента code. Цьому атрибуту можна призначити мову, яка використовується всередині елементу code. Ось декілька типових прикладів того, як виглядають такі виділення:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Те, як браузери обробляють ці інструкції, не визначено W3C.
<pre>
Це заголовок HTML:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
На даний момент атрибут class не має видимих впливів у браузері. Однак людські спостерігачі можуть побачити, мова якої програмування лежить в основі програмного коду, проглянувши вихідний код сторінки.
Зменшення регістру за допомогою елемента 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>Ласкаво просимо до <u>PSD-Tutorials.de</u></p>
Результат виглядає в браузері так:
Після перегляду результату можна побачити, що дійсно досягнутий бажаний ефект. Проте це має свої недоліки. В інтернеті підкреслені тексти, відомі як гіперпосилання. Якщо ви підкреслите текст або слово, відвідувачі можуть подумати, що це гіперпосилання. Спроба клікнути на нього, звісно, не принесе результатів. Тому варто відмовитися від підкреслення.
