Главная страница   /   8.2. Добавление акцента (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

8.2. Добавление акцента

Элемент 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