HTML — фразовые теги

Оглавление

    Показать оглавление

Теги фраз были разработаны для определенных целей, хотя они отображаются так же, как и другие основные теги, такие как

<b>
<i>
<pre>
<tt>

вы видели в предыдущей главе. В этой главе вы познакомитесь со всеми важными фразовыми тегами, так что давайте начнем рассматривать их один за другим.

Выделенный текст

Все, что появляется внутри элемента

<em>...</em>

отображается как выделенный текст.

Пример

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
	
</html>

Это даст следующий результат:

Выделенный текст

Все, что появляется внутри

<mark>...</mark>

элемент, отображается как помеченный желтыми чернилами.

Пример

<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
	
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
	
</html>

Это даст следующий результат:

Сильный текст

Все, что появляется внутри

<strong>...</strong>

элемент отображается как важный текст.

Пример

<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
	
</html>

Это даст следующий результат:

Текстовое сокращение

Вы можете сократить текст, поместив его внутри открывающего и закрывающего тегов.

<abbr> 
</abbr>

Если атрибут title присутствует, он должен содержать это полное описание и ничего больше.

Пример

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
	
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
	
</html>

Это даст следующий результат:

Элемент аббревиатуры

Элемент

<acronym>

позволяет указать, что текст между тегами является аббревиатурой.

<acronym>
</acronym>

В настоящее время основные браузеры не меняют внешний вид содержимого элемента.

<acronym>

Пример

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
	
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
	
</html>

Это даст следующий результат:

Направление текста

Элемент

<bdo>...</bdo>

расшифровывается как Bi-Directional Override и используется для переопределения текущего направления текста.

Пример

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>

Это даст следующий результат:

Специальные условия

Элемент

<dfn>...</dfn>

(или элемент определения HTML) позволяет указать, что вы вводите специальный термин. Его использование похоже на курсив в середине абзаца.

Как правило, вы должны использовать этот элемент при первом вводе ключевого термина:

<dfn>

Самые последние браузеры отображают содержимое элемента курсивом.

Пример

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
	
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
	
</html>

Это даст следующий результат:

Цитирование текста

Если вы хотите процитировать отрывок из другого источника, вы должны поместить его между тегами

<blockquote>...</blockquote>

Текст внутри элемента

<blockquote>

обычно имеет отступ от левого и правого краев окружающего текста, а иногда используется курсивный шрифт.

Пример

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
	
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
	
</html>

Это даст следующий результат:

Короткие цитаты

Элемент

<q>...</q>

используется, когда вы хотите добавить двойную кавычку в предложение.

Пример

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
	
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
	
</html>

Это даст следующий результат:

Текстовые цитаты

Если вы цитируете текст, то можете указать источник, поместив его между открывающим и закрывающим тегами.

<cite>
</cite>

Как и следовало ожидать в печатном издании, содержимое элемента

<cite>

по умолчанию отображается курсивом.

Пример

<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

Это даст следующий результат:

Компьютерный код

Любой программный код, отображаемый на веб-странице, должен быть помещен в теги.

<code>...</code>

Обычно содержимое элемента

<code>

представлен моноширинным шрифтом, как код в большинстве книг по программированию.

Пример

<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>

Это даст следующий результат:

Текст клавиатуры

Когда вы говорите о компьютерах, если вы хотите предложить читателю ввести текст, вы можете использовать

<kbd>...</kbd>

элемент, чтобы указать, что следует ввести, как в этом примере.

Пример

<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

Это даст следующий результат:

Программирование переменных

Этот элемент обычно используется в сочетании с элементами

<pre>

и

<code>

чтобы указать, что содержимое этого элемента является переменной.

Пример

<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

Это даст следующий результат:

Вывод программы

Элемент

<samp>...</samp>

указывает образец вывода программы, сценария и т. д. Опять же, он в основном используется при документировании концепций программирования или кодирования.

Пример

<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>

Это даст следующий результат:

Текст адреса

Элемент

<address>...</address>

используется для хранения любого адреса.

Пример

<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
   
</html>

Это даст следующий результат: