Добавление акцента
Элемент em представляет собой отрывок текста с подчеркнутым акцентом. Вы можете использовать его, чтобы обратить внимание читателя на смысл предложения или абзаца. Я расскажу вам, что это обозначает, после таблицы 8-6, в которой описан элемент em.
Таблица 8-6: Элемент em| Элемент | em |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовый контент |
| Локальные атрибуты | Нет |
| Содержание | Фразовый контент |
| Стиль тегов | Требуются открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Нет |
| Соглашение по стилям | em { font-style: italic; } |
В листинге 8-5 показано использование элемента em.
Листинг 8-5: Использование элемента em<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<base href="http://titan/listings/" />
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<em>I</em> like <b>apples</b> and <b>oranges</b>.
</body>
</html>Соглашение по стилям для этого элемента заключается в использовании курсива, как показано на рисунке 8-3.
Рисунок 8-3: Использование элемента em
В этом примере я поставил акцент на Я (I) в начале предложения. Если подумать об элементе em, то при произнесении предложения вслух мы рассматриваем вопрос о том, что это предложение является ответом на вопрос. Например, представьте, что я спросил: «Кто любит яблоки и апельсины?» Ваш ответ будет: «Я люблю яблоки и апельсины.» (Когда вы произносите это вслух и ставите акцент на Я, вы даете понять, что вы человек, который любит эти фрукты).
Но если бы я спросил: «Вы любите яблоки и что еще?» Вы могли бы ответить: «Я люблю яблоки и апельсины (oranges)». В этом случае, акцент будет сделан на последнее слово, подчеркивая, что апельсины являются другим фруктом, который вам нравится. Этот вариант в HTML выглядел бы следующим образом:
I like apples and <em>oranges</em>.Определение иностранных слов и технических терминов
Элемент i обозначает часть текста, которая имеет иную природу, нежели окружающий контент. Это довольно расплывчатое определение, но общие примеры включают в себя слова из других языков, технические или научные термины и даже мысли человека (в отличие от речи). В таблице 8-7 описан элемент i.
Таблица 8-7: Элемент i| Элемент | i |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовый контент |
| Локальные атрибуты | Нет |
| Содержание | Фразовый контент |
| Стиль тегов | Требуются открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | В HTML4 элемент i имел только презентационный смысл; в HTML5 он получил семантическое значение, которое было описано ранее, а презентационный смысл был понижен |
| Соглашение по стилям | i { font-style: italic; } |
В листинге 8-6 показано использование элемента i.
Листинг 8-6: Использование элемента i<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<base href="http://titan/listings/" />
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<em>I</em> like <b>apples</b> and <b>oranges</b>.
My favorite kind of orange is the mandarin, properly known
as <i>citrus reticulata</i>.
</body>
</html>Вы можете увидеть результат использования элемента i на рисунке 8-4. Обратите внимание, что соглашение по стилям для элемента i такое же, как и для элемента em. Это отличный пример того, как значение элемента отличается от его внешнего вида.
Рисунок 8-4: Использование элемента i
Показ неточностей или исправлений
Вы можете использовать элемент s, чтобы обозначить отрывок текста, который больше не правильный или не точный. Соглашение по стилям заключается в отображении текста с линией, проведенной через него (перечеркнутый текст). В таблице 8-8 описан элемент s.
Таблица 8-8: Элемент s| Элемент | s |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовый контент |
| Локальные атрибуты | Нет |
| Содержание | Фразовый контент |
| Стиль тегов | Требуются открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | В HTML4 элемент s имел только презентационный смысл; в HTML5 он получил семантическое значение, которое было описано ранее, а презентационный смысл был понижен |
| Соглашение по стилям | s { text-decoration: line-through; } |
В листинге 8-7 показано использование элемента s.
Листинг 8-7: Использование элемента s<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<base href="http://titan/listings/" />
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<em>I</em> like <b>apples</b> and <b>oranges</b>.
My favorite kind of orange is the mandarin, properly known
as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 each</s> $2 for 3.
</body>
</html>Вы можете увидеть соглашение по стилям по умолчанию для элемента s на рисунке 8-5.
Рисунок 8-5: Использование элемента s
Определение важного текста
Элемент strong обозначает отрывок текста, который имеет важное значение. В таблице 8-9 описан этот элемент.
Таблица 8-9: Элемент strong| Элемент | strong |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовый контент |
| Локальные атрибуты | Нет |
| Содержание | Фразовый контент |
| Стиль тегов | Требуются открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Нет |
| Соглашение по стилям | strong { font-weight: bolder; } |
В листинге 8-8 показано использование элемента strong.
Листинг 8-8: Использование элемента strong
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<base href="http://titan/listings/" />
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
I like apples and oranges.
<strong>Warning:</strong> Eating too many oranges can give you heart burn.
</body>
</html>
Я удалил часть текста из предыдущих примеров, чтобы сделать листинг более удобным для чтения. Вы можете увидеть соглашение по стилям по умолчанию для элемента strong на рисунке 8-6. Элемент strong имеет то же соглашение по стилям, что и элемент b. Тем не менее, важно выбрать правильный элемент при разметке содержания; обратите внимание, что элемент b не придает никакой важности тексту, который он охватывает.
Рисунок 8-6: Использование элемента strong
Подчеркивание текста
Элемент u выделяет отрывок текста из окружающего контента, не придавая ему при этом повышенную важность или акцент. Это расплывчатое описание, потому что элемент u ранее имел только презентационный смысл (подчеркнуть текст) и никакого реального семантического значения. В сущности, это все еще презентационный элемент и его работа заключается в том, чтобы подчеркнуть текст (хотя потенциально может изменить это поведение, используя CSS, но я не рекомендую повторное использование элементов таким образом, лучше вместо этого обратиться к элементу span). В таблице 8-10 представлен элемент u.
Таблица 8-10: Элемент u| Элемент | u |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовый контент |
| Локальные атрибуты | Нет |
| Содержание | Фразовый контент |
| Стиль тегов | Требуются открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | В HTML4 элемент u имел только презентационный смысл; в HTML5 он получил семантическое значение, которое было описано ранее, а презентационный смысл был понижен |
| Соглашение по стилям | u { text-decoration:underline; } |
Соглашение по стилям для элемента u аналогично тому, что и для элемента a, что обозначает, что пользователи часто путают подчеркнутый текст и гиперссылку. Чтобы избежать этой путаницы, старайтесь по возможности не применять элемент u. В листинге 8-9 показано, как используется элемент u.
Листинг 8-9: Использование элемента u<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<base href="http://titan/listings/" />
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
I like apples and oranges.
<strong>Warning:</strong> Eating <u>too many</u> oranges can give you heart burn.
</body>
</html>
Вы можете увидеть, как браузер по умолчанию отображает этот элемент на рисунке 8-7.
Рисунок 8-7: Использование элемента u
Добавление мелкого шрифта
Элемент small обозначает мелкий шрифт и часто используется для оговорок и уточнений. В таблице 8-11 представлен элемент small.
Таблица 8-11: Элемент small| Элемент | small |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовый контент |
| Локальные атрибуты | Нет |
| Содержание | Фразовый контент |
| Стиль тегов | Требуются открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | В HTML4 элемент small имел только презентационный смысл; в HTML5 он получил семантическое значение, которое было описано ранее, а презентационный смысл был понижен |
| Соглашение по стилям | small { font-size: smaller; } |
В листинге 8-10 показано, как используется элемент small.
Листинг 8-10: Использование элемента small<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
Oranges at my local store are $1 each <small>(plus tax)</small>
</body>
</html>Вы можете увидеть, как браузер по умолчанию отображает этот элемент на рисунке 8-8.
Рисунок 8-8: Использование элемента small
Добавление верхнего и нижнего индекса
Вы можете использовать элементы sub и sup для обозначения верхнего и нижнего индекса, соответственно. Верхние индексы используются для написания слов в некоторых языках, а оба, верхний и нижний индексы, используются в простых математических выражениях. В таблице 8-12 представлены эти элементы.
Таблица 8-12: Элементыsubиsup
| Элемент | sub и sup |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовый контент |
| Локальные атрибуты | Нет |
| Содержание | Фразовый контент |
| Стиль тегов | Требуются открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Нет |
| Соглашение по стилям | sub { vertical-align: sub;font-size: smaller; }
sup { vertical-align: super;font-size: smaller;} |
В листинге 8-11 показано, как используются элементы sub и sup.
Листинг 8-11: Использование элементовsubиsup
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
The point x<sub>10</sub> is the 10<sup>th</sup> point.
</body>
</html>Вы можете увидеть, как браузер применяет стили по умолчанию для этих элементов на рисунке 8-9.
Рисунок 8-9: Использование элементовsubиsup
