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

---
title: Основы редактирования текста в HTML
slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
tags:
  - Guide
  - HTML
  - Абзацы
  - Введение в HTML
  - Изучение
  - Начинающий
  - Параграфы
  - Руководство
  - Семантика
  - Текст
translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals
---
<div>
<div> {{LearnSidebar}}</div>

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

<p class="summary">Одна из основных задач HTML — придавать тексту структуру и смысл, {{glossary("семантику")}}, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать {{glossary("HTML")}}, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Предварительные требования:</th>
   <td>Базовое знакомство с 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/%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>.</td>
  </tr>
  <tr>
   <th scope="row">Задача:</th>
   <td>Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..</td>
  </tr>
 </tbody>
</table>

<h2 id="Основы_Заголовки_и_абзацы_параграфы">Основы: Заголовки и абзацы / параграфы</h2>

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

<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p>

<p>Упорядоченный контент делает чтение более лёгким и приятным.</p>

<p>В HTML каждый абзац заключён в элемент {{htmlelement("p")}}, подобно:</p>

<pre class="brush: html">&lt;p&gt;Я параграф, да, это я.&lt;/p&gt;</pre>

<p>Каждый заголовок заключён в элемент заголовка {{htmlelement("h1")}}:</p>

<pre class="brush: html">&lt;h1&gt;Я заголовок истории.&lt;/h1&gt;</pre>

<p>Имеется шесть элементов заголовка: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} и {{htmlelement("h6")}}. Каждый элемент представляет разный уровень контента в документе; <code>&lt;h1&gt;</code> представляет главный заголовок, <code>&lt;h2&gt;</code> представляет подзаголовки, <code>&lt;h3&gt;</code> представляет под-подзаголовки и так далее.</p>

<h3 id="Создание_иерархической_структуры">Создание иерархической структуры</h3>

<p>Например, в рассказе <code>&lt;h1&gt;</code> будет представлять заглавие рассказа, <code>&lt;h2&gt;</code> обозначит название каждой главы, <code>&lt;h3&gt;</code>  будет обозначать подзаголовки в каждой главе и так далее.</p>

<pre class="brush: html">&lt;h1&gt; Сокрушительная скука &lt;/ h1&gt;

&lt;p&gt; Крис Миллс &lt;/ p&gt;

&lt;h2&gt; Глава 1: Тёмная ночь &lt;/ h2&gt;

&lt;p&gt; Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на ... &lt;/ p&gt;

&lt;h2&gt; Глава 2: Вечное молчание &lt;/ h2&gt;

&lt;p&gt; Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ... &lt;/ p&gt;

&lt;h3&gt; Призрак говорит &lt;/ h3&gt;

&lt;p&gt; Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» &lt;/ p&gt;
</pre>

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

<ul>
 <li>Предпочтительнее использовать <code>&lt;h1&gt;</code> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.</li>
 <li>Убедитесь, что вы используете заголовки в правильном порядке в иерархии.  Не используйте <code>&lt;h3&gt;</code> для создания подзаголовков при одновременном использовании <code>&lt;h2&gt;</code> для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.</li>
 <li><span id="result_box" lang="ru"><span>Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо.</span></span> <span id="result_box" lang="ru"><span>Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации.</span></span> <span id="result_box" lang="ru"><span>В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.</span></span></li>
</ul>

<h3 id="Зачем_нам_необходима_структура">Зачем нам необходима структура?</h3>

<p><span id="result_box" lang="ru"><span>Чтобы ответить на этот вопрос, давайте посмотрим на </span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> —<span lang="ru"><span> отправную точку нашего примера для этой статьи (хороший рецепт хумуса).</span></span> <span id="result_box" lang="ru"><span>Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже.</span></span> <span id="result_box" lang="ru"><span>Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return  для перехода на следующую строку).</span></span></p>

<p><span id="result_box" lang="ru"><span>Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!</span></span></p>

<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;"></p>

<p><span id="result_box" lang="ru"><span>Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац.</span> <span>Более того:</span></span></p>

<ul>
 <li><span id="result_box" lang="ru"><span>Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки  (мы обычно </span></span><a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">тратим очень мало времени на веб-странице</a><span lang="ru"><span>).</span> <span>Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.</span></span></li>
 <li><span id="result_box" lang="ru"><span>Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы.</span> <span>Без заголовков ваша страница будет плохо работать с точки зрения</span></span> {{glossary("SEO")}} (Search Engine Optimization — поисковая оптимизация).</li>
 <li>Сильно <span id="result_box" lang="ru"><span>слабовидящие люди часто не читают веб-страницы —</span> <span>они слушают их вместо этого.</span> <span>Это делается с помощью программного обеспечения, называемого </span></span><a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">программой чтения с экрана</a><span lang="ru"><span>.</span> <span>Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту.</span> <span>Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию.</span> <span>Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.</span></span></li>
 <li><span id="result_box" lang="ru"><span>Чтобы стилизовать контент с помощью {{glossary ("CSS")}} или сделать его интересным с помощью {{glossary ("JavaScript")}}, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать</span><span>.</span></span></li>
</ul>

<p><span id="result_box" lang="ru"><span>Поэтому нужно дать структурную разметку нашему контенту.</span></span></p>

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

<p><span id="result_box" lang="ru"><span>Давайте рассмотрим это на живом примере.</span> <span>В приведённом ниже примере добавьте элементы в исходный текст в поле «</span></span>Редактируемый код<span lang="ru"><span>», чтобы он отображался как заголовок и два абзаца в поле «</span></span>Результат<span lang="ru"><span>».</span></span></p>

<p><span id="result_box" lang="ru"><span>Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки <em>Сбросить</em>.</span> <span>Если вы застряли, нажмите кнопку <em>Показать решение</em>, чтобы увидеть ответ.</span></span></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: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

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

</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;h1&gt;Моя мини-история&lt;/h1&gt;\n&lt;p&gt;Я полицейский, и моё имя Триш.&lt;/p&gt;\n&lt;p&gt;Мои ноги сделаны из картона, и мой муж — рыба.&lt;/p&gt;';
var solutionEntry = htmlSolution;

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

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;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

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

<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>

<h3 id="Почему_мы_нуждаемся_в_семантике">Почему мы нуждаемся в семантике?</h3>

<p><span id="result_box" lang="ru"><span>Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов;</span> <span>когда мы что-то видим, мы знаем, какова его функция.</span> <span>Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти».</span> <span>Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)</span></span></p>

<p><span id="result_box" lang="ru"><span>В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид.</span> <span>В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает,  роль (или значение) «заголовка верхнего уровня на вашей странице».</span></span></p>

<pre class="brush: html">&lt;h1&gt;Это заголовок верхнего уровня&lt;/h1&gt;</pre>

<p><span id="result_box" lang="ru"><span>По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS).</span> <span>Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).</span></span></p>

<p><span id="result_box" lang="ru"><span>С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня.</span> <span>Рассмотрим следующее:</span></span></p>

<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Это заголовок верхнего уровня?&lt;/span&gt;</pre>

<p><span id="result_box" lang="ru"><span>Это элемент {{htmlelement ("span")}}.</span> <span>У него нет семантики.</span> <span>Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS,</span> <span>чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше.</span> <span>Рекомендуется использовать соответствующий элемент HTML на практике.</span></span></p>

<h2 id="Списки">Списки</h2>

<p><span id="result_box" lang="ru"><span>Теперь обратим наше внимание на списки.</span> <span>Списки есть везде вокруг нас — от вашего списка покупок до списка направлений, которым вы подсознательно следуете, чтобы каждый день добраться домой, и списка инструкций, которые вы выполняете в этом руководстве!</span> <span>Списки используются всюду в Интернете, и мы рассмотрим три разных типа списков.</span></span></p>

<h3 id="Неупорядоченные">Неупорядоченные</h3>

<p><span id="result_box" lang="ru"><span>Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:</span></span></p>

<pre>молоко
яйца
хлеб
хумус</pre>

<p><span id="result_box" lang="ru"><span>Каждый неупорядоченный список начинается с элемента {{htmlelement ("ul")}} (<em>unordered list</em>) — он обёртывает все элементы списка:</span></span> молоко, яйца, хлеб, хумус.</p>

<p><span id="result_box" lang="ru"><span>Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент {{htmlelement ("li")}} (элемент списка):</span></span></p>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;молоко&lt;/li&gt;
  &lt;li&gt;яйца&lt;/li&gt;
  &lt;li&gt;хлеб&lt;/li&gt;
  &lt;li&gt;хумус&lt;/li&gt;
&lt;/ul&gt;</pre>

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

<p><span id="result_box" lang="ru"><span>Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.</span></span></p>

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

<pre class="brush: html"><code>&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;</code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code>&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;</code></pre>

<pre class="brush: css">html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

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

</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;ul&gt;\n&lt;li&gt;молоко&lt;/li&gt;\n&lt;li&gt;яйца&lt;/li&gt;\n&lt;li&gt;хлеб&lt;/li&gt;\n&lt;li&gt;хумус&lt;/li&gt;\n&lt;/ul&gt;';
var solutionEntry = htmlSolution;

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

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;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

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

<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p>

<h3 id="Упорядоченные">Упорядоченные</h3>

<p><span id="result_box" lang="ru"><span>Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:</span></span></p>

<pre>Двигайтесь до конца дороги
Поверните направо
Езжайте прямо через первые два перекрёстка с круговым движением
Поверните налево на третьем перекрёстке
Школа справа от вас, 300 метров вверх по дороге</pre>

<p><span id="result_box" lang="ru"><span>Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не &lt;ul&gt;:</span></span></p>

<pre class="brush: html">&lt;ol&gt;
   &lt;li&gt;Двигайтесь до конца дороги&lt;/li&gt;
   &lt;li&gt;Поверните направо&lt;/li&gt;
   &lt;li&gt;Езжайте прямо через первые два перекрёстка с круговым движением&lt;/li&gt;
   &lt;li&gt;Поверните налево на третьем перекрёстке&lt;/li&gt;
   &lt;li&gt;Школа справа от вас, в 300 метрах вверх по дороге&lt;/li&gt;
&lt;/ol&gt;</pre>

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

<p><span id="result_box" lang="ru"><span>Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.</span></span></p>

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

<pre class="brush: html"><code>&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;</code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code>&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;</code>Двигайтесь до конца дороги
Поверните направо
Езжайте прямо через первые два перекрёстка с круговым движением
Поверните налево на третьем перекрёстке
Школа справа от вас, 300 метров вверх по дороге<code>&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;</code></pre>

<pre class="brush: css">html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

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

</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;ol&gt;\n&lt;li&gt;Двигайтесь до конца дороги&lt;/li&gt;\n&lt;li&gt;Поверните направо&lt;/li&gt;\n&lt;li&gt;Езжайте прямо через первые два перекрёстка с круговым движением&lt;/li&gt;\n&lt;li&gt;Поверните налево на третьем перекрёстке&lt;/li&gt;\n&lt;li&gt;Школа справа от вас, 300 метров вверх по дороге&lt;/li&gt;\n&lt;/ol&gt;';
var solutionEntry = htmlSolution;

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

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;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение&gt;') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

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

<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p>

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

<p><span id="result_box" lang="ru"><span>Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта.</span> <span>Вы можете либо сохранить локальную копию исходного файла </span></span><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a><span lang="ru"><span> и выполнить в нём работу, либо сделать это в приведённом ниже примере.</span> <span>Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы.</span> <span>У обоих способов есть плюсы и минусы.</span></span></p>

<div class="hidden">
<h6 id="Playable_code_4">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;<code>Редактируемый код</code>&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Рецепт быстрого приготовления хумуса.

  Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.

  Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой.

  Ингредиенты

  1 банка (400г) турецкого гороха (или бараньего гороха)
  175г тахини
  6 вяленых томатов
  Половинка красного перца
  Щепотка кайенского перца
  1 зубчик чеснока
  Чуть-чуть оливкового масла

  Рецепт

  Очистите чеснок от кожуры и крупно нарежьте.
  Удалите стебель и семена у перца; крупно нарежьте перец.
  Добавьте все ингредиенты в пищевой комбайн.
  Измельчите все ингредиенты до состояния пасты.
  Если вы хотите "грубый" хумус, измельчайте пару минут.
  Если вам нужен гладкий хумус, измельчайте дольше.

  По вкусу вы также можете добавить в небольших количествах лимон с кориандром, перец чили, лайм с чипотле, хариссу с мятой или же шпинат с брынзой. Попробуйте и решите, что подойдёт вам.

  Хранение

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

  Хумус можно хранить в морозильном отделении 2–3 месяца.&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: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}
</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;h1&gt;Рецепт быстрого приготовления хумуса.&lt;/h1&gt;\n\n&lt;p&gt;Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.&lt;/p&gt;\n\n&lt;p&gt;Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой.&lt;/p&gt;\n\n&lt;h2&gt;Ингредиенты&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 банка (400г) турецкого гороха (или бараньего гороха)&lt;/li&gt;\n&lt;li&gt;175г тахани&lt;/li&gt;\n&lt;li&gt;6 вяленых томатов&lt;/li&gt;\n&lt;li&gt;Половинка красного перца&lt;/li&gt;\n&lt;li&gt;Щепотка кайенского перца&lt;/li&gt;\n&lt;li&gt;1 зубчик чеснока&lt;/li&gt;\n&lt;li&gt;Чуть-чуть оливкового масла&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Рецепт&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Очистите чеснок от кожуры и крупно нарежьте.&lt;/li&gt;\n&lt;li&gt;Удалите стебель и семена у перца; крупно нарежьте.&lt;/li&gt;\n&lt;li&gt;Добавьте все ингредиенты в пищевой комбайн.&lt;/li&gt;\n&lt;li&gt;Измельчите все ингредиенты до состояния пасты.&lt;/li&gt;\n&lt;li&gt;Если вы хотите "грубый" хумус, измельчайте пару минут.&lt;/li&gt;\n&lt;li&gt;Если вам нужен гладкий хумус, измельчайте дольше.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;По вкусу можете добавить в небольших количествах лимон и кориандский перец, лайм и чипотле, хариссу и мяту или шпинат и брынзу. Попробуйте и решите, что подходит вам.&lt;/p&gt;\n\n&lt;h2&gt;Хранение&lt;/h2&gt;\n\n&lt;p&gt;Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его.&lt;/p&gt;\n\n&lt;p&gt;Хумус можно хранить в морозильном отделении 2–3 месяца.&lt;/p&gt;';
var solutionEntry = htmlSolution;

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

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;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

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

<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p>

<p><span id="result_box" lang="ru"><span>Если вы застряли, вы всегда можете нажать кнопку <em>Показать решение</em> или проверить наш пример </span></span><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a><span lang="ru"><span> в нашем реестре github.</span></span></p>

<h3 id="Вложенные_списки">Вложенные списки</h3>

<p><span id="result_box" lang="ru"><span>Вполне нормально вложить один список в другой.</span> <span>Возможно, вы захотите, чтобы один список располагался внутри другого.</span> <span>Давайте возьмём второй список из нашего примера рецепта:</span></span></p>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;Очистите чеснок от кожуры и крупно нарежьте.&lt;/li&gt;
  &lt;li&gt;Удалите стебель и семена у перца; крупно нарежьте перец.&lt;/li&gt;
  &lt;li&gt;Добавьте все ингредиенты в пищевой комбайн.&lt;/li&gt;
  &lt;li&gt;Измельчите все ингредиенты до состояния пасты.&lt;/li&gt;
  &lt;li&gt;Если вы хотите "грубый" хумус, измельчайте пару минут.&lt;/li&gt;
  &lt;li&gt;Если вам нужен гладкий хумус, измельчайте дольше.&lt;/li&gt;
&lt;/ol&gt; </pre>

<div id="gt-res-content">
<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>Поскольку последние две строки очень тесно связаны с тем, что было до них (они читаются как вспомогательные инструкции или варианты, которые подходят под этой маркой), может иметь смысл вложить их в свой собственный неупорядоченный список и поместить этот список внутри текущего</span><span>.</span> <span>Это будет выглядеть так:</span></span></div>
</div>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;Очистите чеснок от кожуры и крупно нарежьте.&lt;/li&gt;
  &lt;li&gt;Удалите стебель и семена у перца; крупно нарежьте перец.&lt;/li&gt;
  &lt;li&gt;Добавьте все ингредиенты в пищевой комбайн.&lt;/li&gt;
  &lt;li&gt;Измельчите все ингредиенты до состояния пасты.
    &lt;ul&gt;
      &lt;li&gt;Если вы хотите "грубый" хумус, измельчайте пару минут.&lt;/li&gt;
      &lt;li&gt;Если вам нужен гладкий хумус, измельчайте дольше.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ol&gt;</pre>

<p><span id="result_box" lang="ru"><span>Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.</span></span></p>

<h2 id="Акцент_и_важность"><span class="short_text" id="result_box" lang="ru"><span>Акцент и важность</span></span></h2>

<div id="gt-res-content">
<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде.</span> <span>HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространённых.</span></span></div>

<div class="trans-verified-button-small" dir="ltr"></div>
</div>

<h3 id="Акцент">Акцент</h3>

<p><span id="result_box" lang="ru"><span>Когда мы хотим добавить акцент в разговорный язык, мы подчёркиваем определённые слова, тонко изменяя смысл того, что мы говорим.</span> <span>Точно так же на письменном языке мы склонны подчёркивать слова, выделяя их <em>курсивом</em>.</span> <span>Например, следующие два предложения имеют разные значения.</span></span></p>

<p><span class="short_text" id="result_box" lang="ru"><span>Я рад, что ты не опоздал.</span></span></p>

<p><span class="short_text" id="result_box" lang="ru"><span>Я <em>рад</em>, что ты не <em>опоздал</em>.</span></span></p>

<p><span id="result_box" lang="ru"><span class="alt-edited">В первом предложении звучит искреннее облегчение, что человек не опоздал. Во втором, напротив, звучит сарказм или пассивная агрессия: так выражена </span></span><span lang="ru"><span class="alt-edited">досада от того, что человек немного опоздал.</span></span></p>

<p><span id="result_box" lang="ru"><span>В таких случаях в HTML используется элемент {{htmlelement ("em")}} (выделение).</span> <span>Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном.</span> <span>Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив.</span> <span>Для выделения курсивом вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("i")}} (смотрите ниже).</span></span></p>

<pre class="brush: html">&lt;p&gt;Я &lt;em&gt;рад&lt;/em&gt;, что ты не &lt;em&gt;опоздал&lt;/em&gt;.&lt;/p&gt;</pre>

<h3 id="Важное_значение"><span class="short_text" id="result_box" lang="ru"><span>Важное значение</span></span></h3>

<p><span id="result_box" lang="ru"><span>Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и <strong>выделять жирным</strong> на письменном языке.</span> <span>Например:</span></span></p>

<p><span id="result_box" lang="ru"><span>Эта жидкость <strong>очень токсична</strong>.</span><br>
 <br>
 <span>Я рассчитываю на вас.</span> <span><strong>Не опаздывай</strong>!</span></span></p>

<p><span id="result_box" lang="ru"><span>В таких случаях в HTML используется элемент {{htmlelement ("strong")}} (важное значение).</span> <span>Помимо того, что документ становится более полезным,  они распознаются программами, считывающими с экрана, и говорят другим тоном.</span> <span>Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить</span></span><span lang="ru"><span> жирный шрифт.</span> <span>Для получения жирного шрифта вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("b")}} (</span></span><span id="result_box" lang="ru"><span>смотрите ниже</span></span><span lang="ru"><span>).</span></span></p>

<pre class="brush: html">&lt;p&gt;Эта жидкость &lt;strong&gt;очень токсична&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Я рассчитываю на тебя. &lt;strong&gt;Не &lt;/strong&gt;опаздывай!&lt;/p&gt;</pre>

<p><span id="result_box" lang="ru"><span>При желании вы можете вложить важные и акцентированные слова друг в друга:</span></span></p>

<pre class="brush: html">&lt;p&gt;Эта жидкость &lt;strong&gt;очень токсична&lt;/strong&gt; —
если ты выпьешь её, &lt;strong&gt;то можешь&lt;em&gt;умереть&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>

<h3 id="Активное_изучение_Давайте_будем_важны!">Активное изучение: <span class="short_text" id="result_box" lang="ru"><span>Давайте будем важны!</span></span></h3>

<p><span id="result_box" lang="ru"><span>В этом разделе активного обучения мы предоставили редактируемый пример.</span> <span>Внутри него мы хотели бы, чтобы вы попытались добавить акцент и большую важность для слов, которые, по вашему мнению, им нужны, просто для того, чтобы попрактиковаться.</span></span></p>

<div class="hidden">
<h6 id="Playable_code_5">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: 200px; width: 95%"&gt;&lt;h1&gt;Важное объявление&lt;/h1&gt;
&lt;p&gt;9 января 2010 года, в воскресенье,
банда вандалов была обнаружена за кражей нескольких
садовых гномов из торгового центра в центре Милуоки. На них были
надеты зелёные спортивные костюмы и глупые шляпы, и,
по-видимому, они были в нетрезвом состоянии. Если у кого-то
есть какая-либо информация об этом инциденте, пожалуйста,
позвоните в полицию немедленно.&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 = 'Show solution';
  updateCode();
});

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

var htmlSolution = '&lt;h1&gt;Важное объявление&lt;/h1&gt;\n&lt;p&gt;&lt;strong&gt;9 января 2010 года, в воскресенье&lt;/strong&gt;, банда &lt;em&gt;вандалов&lt;/em&gt; была обнаружена за кражей &lt;strong&gt;&lt;em&gt;нескольких&lt;/em&gt; садовых гномов&lt;/strong&gt; торговом центре в центре &lt;strong&gt;Милуоки&lt;/strong&gt;. На них были надеты &lt;em&gt;зелёные спортивные костюмы&lt;/em&gt; и &lt;em&gt;глупые шляпы&lt;/em&gt;, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть &lt;strong&gt;какая-либо&lt;/strong&gt; информация об этом инциденте, пожалуйста, позвоните в полицию &lt;strong&gt;немедленно&lt;/strong&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_5', 700, 500) }}</p>

<h3 id="Курсив_жирный_шрифт_подчеркивание...">Курсив, жирный шрифт, подчеркивание...</h3>

<div id="gt-res-content">
<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике.</span> <span>Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее.</span> <span>Они появились в эпоху, когда CSS  поддерживался плохо или вообще не поддерживался</span></span><span lang="ru"><span>, чтобы люди могли писать <strong>жирный </strong>текст, <em>курсив </em>или <u>подчёркнутый</u> текст.</span> <span>Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.</span></span></div>

<div class="trans-verified-button-small" dir="ltr"></div>
</div>

<p><span id="result_box" lang="ru"><span>HTML5 переопределил &lt;b&gt;, &lt;i&gt; и &lt;u&gt; с новыми, несколько запутанными, семантическими ролями.</span></span></p>

<p><span id="result_box" lang="ru"><span class="alt-edited">Вот хорошее правило: предпочтительней использовать &lt;b&gt;, &lt;i&gt; или &lt;u&gt; для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчёркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.</span></span></p>

<ul>
 <li>{{HTMLElement ('i')}} используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли ...</li>
 <li><span id="result_box" lang="ru"><span>{{HTMLElement ('b')}} используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения ...</span></span></li>
 <li><span id="result_box" lang="ru"><span>{{HTMLElement ('u')}} используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное</span></span><span lang="ru"><span>, орфографическая ошибка ...</span></span></li>
</ul>

<div class="note">
<p><span id="result_box" lang="ru"><span>Предупреждение о подчёркивании:<strong> люди сильно ассоциируют подчёркивание с гиперссылками</strong>.</span> <span>Поэтому в Интернете лучше всего подчеркнуть только ссылки.</span> <span>Используйте элемент &lt;u&gt;, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете.</span> <span>Пример ниже иллюстрирует, как это можно сделать.</span></span></p>
</div>

<pre class="brush: html">&lt;!-- Научные наименования --&gt;
&lt;p&gt;
  Колибри обыкновенный (&lt;i&gt;архилоус обыкновенный&lt;/i&gt;) —
наиболее часто встречающийся вид колибри в северо-восточной Америке.
&lt;/p&gt;

&lt;!-- Иностранные слова --&gt;
&lt;p&gt;
  Случился прилив иностранных слов, таких как &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; и &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
&lt;/p&gt;

&lt;!-- Явно неправильное произношение или написание --&gt;
&lt;p&gt;
  Когда-нибудь я узнаю, как &lt;u&gt;гаварить&lt;/u&gt; без ошибок.
&lt;/p&gt;

&lt;!-- Выделение ключевых слов в инструкциях --&gt;
&lt;ol&gt;
  &lt;li&gt;
    &lt;b&gt;Отрежьте&lt;/b&gt; два ломтика хлеба.
  &lt;/li&gt;
  &lt;li&gt;
    &lt;b&gt;Добавьте&lt;/b&gt; кусочек помидора и лист латука между ломтями хлеба.
  &lt;/li&gt;
&lt;/ol&gt;</pre>

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

<p><span id="result_box" lang="ru"><span>Вот и всё!</span> <span>Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области.</span> <span>В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе.</span> <span>В следующей статье мы подробно рассмотрим, как </span></span><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">создавать гиперссылки</a><span lang="ru"><span>, возможно, самый важный элемент в Интернете. </span></span></p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "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>