path: root/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html

---
title: Продвинутое форматирование текста
slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
tags:
  - Beginner
  - Guide
  - HTML
  - Начинающий
  - Руководство
translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">В HTML для форматирования текста есть много других элементов, не рассмотренных  в статье <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>. Элементы, описанные в этой статье, не так часто используются, но всё же полезны для понимания (и это всё ещё будет не полный список элементов). Здесь вы узнаете о цитатах, списках описания, компьютерном коде и другом виде текстовых элементов, подстрочном и надстрочном тексте, контактной информации и других типах текста.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Предварительные требования:</th>
   <td>
    <p>Базовое знакомство с HTML, раскрытое в <br>
     <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a>. Форматирование текста с помощью HTML, описанное в статье <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>.</p>
   </td>
  </tr>
  <tr>
   <th scope="row">Задача:</th>
   <td>Научиться использовать менее известные HTML-элементы для продвинутой семантической разметки текста.</td>
  </tr>
 </tbody>
</table>

<h2 id="Списки_описания">Списки описания</h2>

<p>В основах HTML-текста мы рассмотрели, как <a href="HTML_text_fundamentals#Lists">пометить привычные типы списков</a> в HTML, но мы не упоминали о третьем типе списка, с которым вы иногда сталкиваетесь, — списке описания. Цель этих списков состоит в том, чтобы пометить набор элементов и их связанных описаний, таких как термины и определения или вопросы и ответы.</p>

<p>Давайте рассмотрим пример набора терминов и определений:</p>

<pre>Солилоквий
Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).
Монолог
Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.
Ремарка
В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</pre>

<p>В списках описания используется иная оболочка, чем в других типах списков — {{htmlelement ("dl")}} (от <em>description list</em>); кроме того, каждый термин завёрнут в элемент {{htmlelement ("dt")}} (<em>description term</em> — термин для описания) и каждое определение завёрнуто в элемент {{htmlelement ("dd")}} (<em>description definition</em> — описание определения).</p>

<p>Закончим разметку нашего примера:</p>

<pre class="brush: html">&lt;dl&gt;
  &lt;dt&gt;Солилоквий&lt;/dt&gt;
  &lt;dd&gt;Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).&lt;/dd&gt;
  &lt;dt&gt;Монолог&lt;/dt&gt;
  &lt;dd&gt;Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.&lt;/dd&gt;
  &lt;dt&gt;Ремарка&lt;/dt&gt;
  &lt;dd&gt;В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.&lt;/dd&gt;
&lt;/dl&gt;</pre>

<p>В стилях браузера по умолчанию будут отображаться списки описания с некоторыми отступами от терминов. Стили, определённые на MDN, довольно близки к этому соглашению, но также вносят некоторые изменения:</p>

<dl>
 <dt>Солилоквий</dt>
 <dd>Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).</dd>
 <dt>Монолог</dt>
 <dd>Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.</dd>
 <dt>Ремарка</dt>
 <dd>В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</dd>
</dl>

<p>Заметьте, что разрешено давать одному элементу несколько описаний:</p>

<dl>
 <dt>Ремарка</dt>
 <dd>В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</dd>
 <dd>В письменности: отметка, примечание (<em>устар.</em>).</dd>
</dl>

<h3 id="Активное_обучение_разметка_набора_определений">Активное обучение: разметка набора определений</h3>

<p>Пришло время попробовать свои силы в списках описания: добавьте элементы в исходный текст в поле Ввод, чтобы он отображался как список описания в поле <em>Вывод</em>. Вы можете попробовать использовать свои собственные термины и описания, если хотите.</p>

<p>Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Редактируемый код&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
Бекон
Скрепляет мир вокруг.
Яйца
Скрепляют пироги вокруг.
Кофе
Рычаг, движущий планетами.
Светло-коричневого цвета.&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Сбросить"&gt;
  &lt;input id="solution" type="button" value="Показать решение"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '&lt;dl&gt;\n &lt;dt&gt;Бекон&lt;/dt&gt;\n &lt;dd&gt;Скрепляет мир вокруг.&lt;/dd&gt;\n &lt;dt&gt;Яйца&lt;/dt&gt;\n &lt;dd&gt;Скрепляют пироги вокруг.&lt;/dd&gt;\n &lt;dt&gt;Кофе&lt;/dt&gt;\n &lt;dd&gt;Рычаг, движущий планетами.&lt;/dd&gt;\n &lt;dd&gt;Светло-коричневого цвета.&lt;/dd&gt;\n&lt;/dl&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Цитаты">Цитаты</h2>

<p>HTML также имеет функции, доступные для маркировки цитат; какой элемент вы используете, зависит от того, маркируете ли вы блочную или строчную цитату.</p>

<h3 id="Блочные_цитаты">Блочные цитаты</h3>

<p>Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть её внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.</p>

<p class="syntaxbox">Например, следующая разметка берётся из страницы элемента MDN <code><strong>&lt;blockquote&gt;</strong></code>:</p>

<pre class="brush: html">&lt;p&gt;&lt;strong&gt;HTML-элемент&lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (от англ. &lt;em&gt;HTML Block
Quotation Element&lt;/em&gt;) указывает на то, что заключённый в нём текст является развёрнутой цитатой.&lt;/p&gt;</pre>

<p>Чтобы превратить её в блочную цитату, мы просто делаем следующее:</p>

<pre class="brush: html">&lt;blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"&gt;
  &lt;p&gt;&lt;strong&gt;HTML-элемент&lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (от англ. &lt;em&gt;HTML Block Quotation Element&lt;/em&gt;) указывает на то, что заключённый в нём текст является развёрнутой цитатой.&lt;/p&gt;
&lt;/blockquote&gt;</pre>

<p>Стиль браузера по умолчанию будет отображать это как абзац с отступом, как индикатор того, что это цитата; абзац над цитатой призван продемонстрировать это. MDN делает это, но также добавляет некоторый дополнительный стиль:</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p><strong>HTML-элемент &lt;blockquote&gt; </strong>(от англ. <em>Block Quotation</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p>
</blockquote>

<h3 id="Строчные_цитаты">Строчные цитаты</h3>

<p>Строчные цитаты работают точно так же, за исключением того, что они используют элемент {{htmlelement ("q")}}. Например, следующий кусочек разметки содержит цитату из страницы <code>&lt;q&gt;</code> MDN:</p>

<pre class="brush: html">&lt;p&gt;Элемент цитирования — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;предназначен
для коротких цитат, не требующих прерывания абзаца&lt;/q&gt;.&lt;/p&gt;</pre>

<p>Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:</p>

<p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен для коротких цитат, не требующих прерывания абзаца</q>.</p>

<h3 id="Цитирование">Цитирование</h3>

<p>Содержание атрибута {{htmlattrxref ("cite", "blockquote")}} выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута <code>&lt;cite&gt;</code> без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент {{htmlelement ("cite")}} рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри <code>&lt;cite&gt;</code> с источником цитаты:</p>

<pre class="brush: html">&lt;p&gt;Как указано в статье о &lt;a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"&gt;
&lt;cite&gt;блочных цитатах&lt;/cite&gt;&lt;/a&gt;:
&lt;/p&gt;

&lt;blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"&gt;
  &lt;p&gt;&lt;strong&gt;HTML-элемент&lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (от англ. &lt;em&gt;HTML Block
  Quotation Element&lt;/em&gt;) указывает на то, что заключённый в нем текст является развёрнутой цитатой.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Элемент цитирования — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;предназначен
для коротких цитат, не требующих прерывания абзаца&lt;/q&gt;. -- &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;
&lt;cite&gt;Строчные цитаты&lt;/cite&gt;&lt;/a&gt;.&lt;/p&gt;</pre>

<p>По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a></p>

<h3 id="Активное_обучение_кто_это_сказал">Активное обучение: кто это сказал?</h3>

<p>Время для другого примера активного обучения! В этом примере мы хотели бы, чтобы вы совершили следующие действия:</p>

<ol>
 <li>Преобразуйте средний абзац в блочную цитату (<code>&lt;blockquote&gt;</code>), который включает атрибут <code>cite</code>.</li>
 <li>Заверните часть третьего абзаца в строчную цитату, которая включает атрибут <code>cite</code>.</li>
 <li>Включите элемент <code>&lt;cite&gt;</code> для каждой ссылки.</li>
</ol>

<p>Источники цитирования, которые вам потребуются:</p>

<ul>
 <li><a href="http://www.brainyquote.com/quotes/authors/c/confucius">http://www.brainyquote.com/quotes/authors/c/confucius</a> — HTML-страница с цитатами Конфуция</li>
 <li><a href="https://www.affirmationsforpositivethinking">https://www.affirmationsforpositivethinking</a> — HTML-страница <em>The Need To Eliminate Negative Self Talk</em>.</li>
</ul>

<p>Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p>

<div class="hidden">
<h6 id="Playable_code_2">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Редактируемый код&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 150px; width: 95%"&gt;
&lt;p&gt;Здравствуйте и добро пожаловать на мою страницу мотивации! Конфуций как-то сказал:&lt;/p&gt;
&lt;p&gt;Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.&lt;/p&gt;
&lt;p&gt;Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает Необходимость избавления от негативного внутреннего разговора (как сказано в зарубежной статье Affirmations for Positive Thinking.)&lt;/p&gt;
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Сбросить"&gt;
  &lt;input id="solution" type="button" value="Показать решение"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '&lt;p&gt;Здравствуйте и добро пожаловать на мою страницу мотивации! &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;Конфуций&lt;/cite&gt;&lt;/a&gt; как-то сказал:&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n &lt;p&gt;Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает &lt;q cite="http://www.affirmationsforpositivethinking.com/index.htm"&gt;Необходимость избавления от негативного внутреннего разговора&lt;/q&gt; (как сказано в зарубежной статье &lt;a href="http://www.affirmationsforpositivethinking.com/index.htm"&gt;&lt;cite&gt;Affirmations for Positive Thinking&lt;/cite&gt;&lt;/a&gt;.)&lt;/p&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Аббревиатуры">Аббревиатуры</h2>

<p>Другой довольно часто встречающийся элемент, который вы будете часто встречать в Интернете, — это {{htmlelement ("abbr")}}, используемый для обёртывания аббревиатур или акронимов и обеспечивающий полную расшифровку сокращения (с помощью атрибута {{htmlattrxref("title")}}.)</p>

<p>Давайте рассмотрим несколько примеров:</p>

<pre>&lt;p&gt;Мы используем &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt; для структурирования наших веб-документов.&lt;/p&gt;

&lt;p&gt;Я думаю, &lt;abbr title="Почтенный"&gt;Почт.&lt;/abbr&gt; Грин сделал это на кухне с бензопилой.&lt;/p&gt;
</pre>

<p>Они будут выглядеть примерно так (расшифровка появится в подсказке при наведении курсора мыши на сокращение):</p>

<p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p>

<p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p>

<div class="note">
<p><strong>Примечание:</strong> Существует ещё один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <code>&lt;abbr&gt;</code>, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <code>&lt;abbr&gt;</code>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <code>&lt;abbr&gt;</code>.</p>
</div>

<h3 id="Активное_обучение_выделение_аббревиатуры">Активное обучение: выделение аббревиатуры</h3>

<p>В рамках этого простого упражнения мы хотели бы, чтобы вы просто указали аббревиатуру. Вы можете использовать наш образец ниже или заменить его на свой собственный.</p>

<div class="hidden">
<h6 id="Playable_code_3">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Редактируемый код&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 50px; width: 95%"&gt;
&lt;p&gt;Безусловно, NASA занимается классными вещами.&lt;/p&gt;
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Сбросить"&gt;
  &lt;input id="solution" type="button" value="Показать решение"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '&lt;p&gt;Безусловно, &lt;abbr title="National Aeronautics and Space Administration"&gt;NASA&lt;/abbr&gt; занимается классными вещами.&lt;/p&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Разметка_контактных_данных">Разметка контактных данных</h2>

<p>HTML имеет элемент для разметки контактных данных — {{htmlelement ("address")}}. Он просто обёртывает ваши контактные данные, например:</p>

<pre class="brush: html">&lt;address&gt;
  &lt;p&gt;Крис Миллс, Манчестер, Жестокий Север, РФ&lt;/p&gt;
&lt;/address&gt;</pre>

<p>Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не <em>любого </em>адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдёт:</p>

<pre class="brush: html">&lt;address&gt;
  &lt;p&gt;Автор страницы — &lt;a href="../authors/chris-mills/"&gt;Крис Миллс&lt;/a&gt;.&lt;/p&gt;
&lt;/address&gt;</pre>

<h2 id="Верхний_и_нижний_индекс">Верхний и нижний индекс</h2>

<p>Иногда вам понадобится использовать надстрочный или подстрочный индекс при разметке таких вещей, как даты, химические формулы и математические уравнения, чтобы они имели правильное представление. Элементы {{htmlelement ("sup")}} и {{htmlelement ("sub")}} созданы для таких ситуаций.</p>

<p>Приведём пример:</p>

<pre class="brush: html">&lt;p&gt;Я просыпаюсь в 6&lt;sup&gt;35&lt;/sup&gt; часов утра.&lt;/p&gt;
&lt;p&gt;Химическая формула кофеина: C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
&lt;p&gt;Если x&lt;sup&gt;2&lt;/sup&gt; равно 9, x должен равняться 3 или -3.&lt;/p&gt;</pre>

<p>Результат этого кода выглядит следующим образом:</p>

<p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p>

<p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>

<p>Если x<sup>2</sup> равно 9, x должен равняться 3 или -3.</p>

<h2 id="Representing_computer_code">Представление компьютерного кода</h2>

<p>Существует несколько элементов для маркировки компьютерного кода с использованием HTML:</p>

<ul>
 <li>{{htmlelement("code")}}: Для разметки общих частей компьютерного кода.</li>
 <li>{{htmlelement("pre")}}: Для сохранения пробелов (как правило, кодовых блоков) — если вы используете отступы или лишние пробелы внутри вашего текста, браузеры будут игнорировать его, и вы не увидите его на вашей отображаемой странице; если вы поместите текст в теги <code>&lt;pre&gt;&lt;/pre&gt;</code>, то ваши пробелы будут отображаться идентично тому, как вы видите текст в редакторе.</li>
 <li>{{htmlelement("var")}}: Для конкретной маркировки имён переменных.</li>
 <li>{{htmlelement("kbd")}}: Для маркировки ввода с клавиатуры (и других типов).</li>
 <li>{{htmlelement("samp")}}: Для маркировки вывода компьютерной программы.</li>
</ul>

<p>Давайте рассмотрим несколько примеров. Вы должны попробовать поиграть с ними (захватите копию нашего файла <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p>

<pre class="brush: html">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;You shouldn't use presentational elements like &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;In the above JavaScript example, &lt;var&gt;para&lt;/var&gt; represents a paragraph element.&lt;/p&gt;

&lt;p&gt;Select all the text with &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;

&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
&lt;samp&gt;PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms&lt;/samp&gt;&lt;/pre&gt;</pre>

<p>Вышеприведённый код будет выглядеть так:</p>

<p>{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Разметка_времени_и_даты">Разметка времени и даты</h2>

<p>HTML также содержит элемент {{htmlelement ("time")}} для отметки времени и дат в машиночитаемом формате. Например:</p>

<pre class="brush: html">&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20<span class="pl-pds">"</span></span>&gt;20 Января 2020&lt;/<span class="pl-ent">time</span>&gt;</pre>

<p>Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:</p>

<ul>
 <li>20 Января 2020</li>
 <li>20-ое Января 2020</li>
 <li>Янв 20 2020</li>
 <li>20/01/20</li>
 <li>01/20/20</li>
 <li><span lang="fr">20e Janvier 2020</span></li>
 <li><span lang="ja">2020年1月20日</span></li>
 <li>и другое...</li>
</ul>

<p>Но эти разные формы не могут быть легко распознаны компьютерами — что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент {{htmlelement ("time")}} позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.</p>

<p>В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:</p>

<pre class="brush: html">&lt;!-- Стандартная дата --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20<span class="pl-pds">"</span></span>&gt;20 Января 2020&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Только год и месяц --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01<span class="pl-pds">"</span></span>&gt;Январь 2020&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Только месяц и день --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>&gt;20 Января&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Только время, часы и минуты --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>&gt;19:30&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Также вы можете отобразить секунды и миллисекунды! --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>&gt;19:30:01.856&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Дата и время --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20T19:30<span class="pl-pds">"</span></span>&gt;7.30pm, 20 Января 2020&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Дата и время со смещением по часовому поясу --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20T19:30<span class="pl-pds">+01:00"</span></span>&gt;7.30pm, 20 Января 2020, — это 8.30pm во Франции.&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Вызов номера недели --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-W04<span class="pl-pds">"</span></span>&gt;Четвёртая неделя 2020&lt;/<span class="pl-ent">time</span>&gt;</pre>

<h2 id="Заключение">Заключение</h2>

<p>На этом мы подошли к концу нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML. Мы попытались охватить основные из них, с которыми вы, скорее всего, столкнётесь в практической деятельности или, по крайней мере, сочтёте их интересными. Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element">Элемент</a>. В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.</p>

<p>{{PreviousMenuNext ("Learn/HTML/Introduction_to_HTML/Create_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ul>
 <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a></li>
 <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li>
 <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li>
 <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
 <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Продвинутое форматирование текста</a></li>
 <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li>
 <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li>
 <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li>
 <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></li>
</ul>