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

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

Адам Фриман

Создание цитат, определений и аббревиатур

Следующие четыре элемента, которые мы рассмотрим, позволяют обозначить цитаты, определения и аббревиатуры. Они широко используются в научных и учебных документах.

Обозначение аббревиатур

Элемент abbr позволяет обозначить аббревиатуру. При использовании этого элемента мы используем атрибут title, чтобы предоставить расширенный текст, который представляет аббревиатура. В таблице 8-16 показан этот элемент.

Таблица 8-16: Элемент abbr
Элемент abbr
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовый контент
Локальные атрибуты Нет, но глобальный атрибут title имеет специальное значение
Содержание N/A
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Нет
Соглашение по стилям Нет

В листинге 8-15 показано использование элемента abbr.

Листинг 8-15: Использование элемента abbr
<!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>
		I like apples and oranges.
		The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida
		citrus industry.
	</body>
</html>

Для элемента abbr нет соглашения по стилям, поэтому контент, содержащийся с этом элементе, не смещается.

Определение терминов

Элемент dfn обозначает определяющую составляющую термина, объясняя значение или важность слова или фразы. В таблице 8-17 представлен этот элемент.

Таблица 8-17: Элемент dfn
Элемент dfn
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовый контент
Локальные атрибуты Нет, но глобальный атрибут title имеет специальное значение
Содержание Текст или один элемент abbr
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Нет
Соглашение по стилям Нет

Есть несколько правил о том, как использовать элемент dfn. Если у элемента dfn есть атрибут title, то значением атрибута title должен быть термин, который определяется. Пример того, как используется элемент dfn, можно увидеть в листинге 8-16.

Листинг 8-16: Использование элемента dfn
<!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>
		I like apples and oranges.
		The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida
		citrus industry.
		<p>
			The <dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree,
			species Malus domestica in the rose family.
		</p>
	</body>
</html>

Если элемент dfn содержит элемент abbr, то аббревиатура – это термин, который определяется. Если нет атрибута title, и содержимое элемента представляет собой текст, тогда текст представляет собой термин, который определяется. Для этого элемента нет соглашения по стилям, поэтому содержание этого элемента не смещается.

Цитирование содержимого из другого источника

Элемент q обозначает содержание, цитируемое из другого источника. В таблице 8-18 представлен элемент q.

Таблица 8-18: Элемент q
Элемент q
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовый контент
Локальные атрибуты cite
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Нет
Соглашение по стилям q { display: inline; } q:before { content: open-quote; } q:after { content: close-quote; }

Определение термина apple (яблоко) в предыдущем разделе я взял из Википедии, и думаю, это нужно правильно оформить. Атрибут cite используется для указания URL исходного документа, как показано в листинге 8-17.

Листинг 8-17: Использование элемента q
<!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>
		I like apples and oranges.
		The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida
		citrus industry.
		<p>
			<q cite="http://en.wikipedia.org/wiki/Apple">The
			<dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree,
			species Malus domestica in the rose family.</q>
		</p>
	</body>
</html>

Стили для элемента q используют CSS: селекторы псевдо-элементов :before и :after, чтобы окружить цитируемый текст кавычками, как показано на рисунке 8-14. Мы изучим селекторы псевдо-элементов в главах 17 и 18.

Рисунок 8-14: Использование элемента q

Цитирование названия другой работы

Элемент cite обозначает название цитируемой работы, например, книги, статьи, фильма или стихотворения. В таблице 8-19 представлен элемент cite.

Таблица 8-19: Элемент cite
Элемент cite
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовый контент
Локальные атрибуты Нет
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Элемент cite уже не может быть использован для цитирования имени человека, а только для цитирования названия работы
Соглашение по стилям cite { font-style: italic; }

В листинге 8-18 показано, как используется элемент cite.

Листинг 8-18: Использование элемента cite
<!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>
		I like apples and oranges.
		The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida
		citrus industry.
		<p>
			<q cite="http://en.wikipedia.org/wiki/Apple">The
			<dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree,
			species Malus domestica in the rose family.</q>
		</p>
		My favorite book on fruit is <cite>Fruit: Edible, Inedible, Incredible</cite>
		by Stuppy & Kesseler
	</body>		
</html>

На рисунке 8-15 можно увидеть применение базового соглашения по стилям для этого элемента.

Рисунок 8-15: Использование элемента cite
или RSS канал: Что новенького на smarly.net