Руководство по HTML5
Адам Фриман
Добавление акцента
Элемент 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