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> element означает двунаправленное переопределение и используется для переопределения текущего направления текста.

пример

<!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>element (или HTML Definition Element) позволяет указать, что вы вводите специальный термин. Его использование похоже на курсив в середине абзаца.

Обычно вы используете элемент <dfn> в первый раз, когда вводите ключевой термин. Самые последние браузеры отображают содержимое элемента <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> element указывает пример вывода программы, сценария и т. д. Опять же, он в основном используется при документировании концепций программирования или кодирования.

пример

<!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>

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