Как написать текст на сайте html

Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.

Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.

Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице
и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы.
По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.

Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку.
Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение
каждого элемента web-страницы по отдельности.

Строчные элементы обрамляются тегами <span>…</span>.

Для обрамления элементов блочного типа используется пара <div>…</div>.

Браузеры обрамляют div-блоки разрывами строки.

Блок <div> не может располагаться внутри блока <span>.

Пример
<!DOCTYPE html>
<html>
<head>
    <title>Блоки</title>
    <meta charset="utf-8">
</head>
<body>
    <div>Первый блок текста</div>
    <div>Второй блок текста</div>
</body>
</html>

Основные теги форматирования текста

<p>…</p> Абзац.
<h1>…</h1> Заголовок первого уровня.
<h2>…</h2> Заголовок второго уровня.
…
<h6>…</h6> Заголовок шестого уровня.
<br> Переход на новую строку.
<q>…</q> Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes.
<hr> Горизонтальная разделительная линия.
<pre>…</pre> Текст фиксированной ширины с сохранением всех пробелов и переносов.
Пример
<!DOCTYPE html>
<html>
<head>
    <title>Заголовки и абзацы</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>Заголовок<br>первого уровня</h1>
    <h2>Заголовок второго уровня</h2>
    <h3>Заголовок третьего уровня</h3>
    <h4>Заголовок четвертого уровня</h4>
    <h5>Заголовок пятого уровня</h5>
    <h6>Заголовок шестого уровня</h6>
    <hr>
    <p>Тест абзаца</p>
</body>
</html>

Создайте текстовый файл, как в примере. Сохраните его с расширением html.

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

Для создания и редактирования html-страниц подойдёт даже Блокнот. Но я рекомендую использовать
Notepad++ или
PhpStorm.

Выделение в тексте

<b>…</b> Полужирный шрифт.
<i>…</i> Курсив.
<ins>…</ins> Подчеркнутый текст.
<del>…</del> Перечеркнутый текст.
<sup>…</sup> Надстрочный текст.
<sub>…</sub> Подстрочный текст.
Пример
<b>Текст может быть полужирным</b>. <i>Текст может быть курсивом.</i><br>
<ins>Текст можно подчеркнуть.</ins> <del>Текст можно зачеркнуть.</del><br>
Текст может быть <sup>надстрочным</sup>. Текст может быть <sub>подстрочным</sub>.

РЕЗУЛЬТАТ:

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

Цитаты, переменные, адреса

<address>…
</address>		 Служит для предоставления автором документа контактной информации, чтобы желающие могли связаться с автором материала. Обычно отображается курсивом. Блочный элемент.
<blockquote>…
</blockquote>		 Выделение цитат. Блочный элемент.
<cite>…</cite> Выделение цитат. Обычно отображается курсивом.
<code>…</code> Вывод текста шрифтом фиксированной ширины. Применяется, как правило, для вывода небольшого куска программного кода (для больших листингов используется тег <pre>).
<em>…</em> Выделение важных фрагментов текста. Обычно отображается курсивом.
<kbd>…</kbd> Вывод текста шрифтом фиксированной ширины.
<samp>…</samp> Вывод текста шрифтом фиксированной ширины.
<strong>…</strong> Сильное выделение важных фрагментов текста. Обычно отображается полужирным шрифтом.
<var>…</var> Используется для отметки имен переменных. Обычно отображается курсивом.

Читать дальше: HTML списки

Источник
  • Назад
  • Обзор: Introduction to HTML
  • Далее

Одна из основных задач HTML — придавать тексту структуру и смысл, семантику, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать HTML, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.

Предварительные требования: Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача: Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..

Основы: Заголовки и абзацы / параграфы

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

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

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

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

<p>Я параграф, да, это я.</p>

Каждый заголовок заключён в элемент заголовка <h1> (en-US):

<h1>Я заголовок истории.</h1>

Имеется шесть элементов заголовка: <h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US) и <h6> (en-US). Каждый элемент представляет разный уровень контента в документе; <h1> представляет главный заголовок, <h2> представляет подзаголовки, <h3> представляет под-подзаголовки и так далее.

Создание иерархической структуры

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

<h1> Сокрушительная скука </ h1>

<p> Крис Миллс </ p>

<h2> Глава 1: Тёмная ночь </ h2>

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

<h2> Глава 2: Вечное молчание </ h2>

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

<h3> Призрак говорит </ h3>

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

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

  • Предпочтительнее использовать <h1> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.
  • Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте <h3> для создания подзаголовков при одновременном использовании <h2> для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.
  • Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.

Зачем нам необходима структура?

Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).

Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

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

  • Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки (мы обычно тратим очень мало времени на веб-странице). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
  • Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения SEO (Search Engine Optimization — поисковая оптимизация).
  • Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
  • Чтобы стилизовать контент с помощью CSS или сделать его интересным с помощью JavaScript, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.

Поэтому нужно дать структурную разметку нашему контенту.

Активное изучение: создание структуры для нашего контента

Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».

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

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

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

<textarea id="code" class="input" style="min-height: 100px; width: 95%">Моя мини-история
Я полицейский, и моё имя Триш.
Мои ноги сделаны из картона, и мой муж — рыба.</textarea>

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

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

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

Почему мы нуждаемся в семантике?

Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент <h1> (en-US) также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».

<h1>Это заголовок верхнего уровня</h1>

По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS). Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).

С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня. Рассмотрим следующее:

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

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

Списки

Теперь обратим наше внимание на списки. Списки есть везде вокруг нас — от вашего списка покупок до списка направлений, которым вы подсознательно следуете, чтобы каждый день добраться домой, и списка инструкций, которые вы выполняете в этом руководстве! Списки используются всюду в Интернете, и мы рассмотрим три разных типа списков.

Неупорядоченные

Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:

молоко
яйца
хлеб
хумус

Каждый неупорядоченный список начинается с элемента <ul> (unordered list) — он обёртывает все элементы списка: молоко, яйца, хлеб, хумус.

Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент <li> (элемент списка):

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

Активное изучение: разметка неупорядоченного списка

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

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

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

<textarea id="code" class="input" style="min-height: 100px; width: 95%">молоко
яйца
хлеб
хумус</textarea>

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

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

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 = '<ul>n<li>молоко</li>n<li>яйца</li>n<li>хлеб</li>n<li>хумус</li>n</ul>';
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();
};

Упорядоченные

Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:

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

Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент <ol> (ordered list), а не <ul>:

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

Активное изучение: разметка упорядоченного списка

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

<h2>Результат</h2>
<div class="output" style="min-height: 50px;">
</div>
<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>

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

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

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

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

Активное изучение: разметка собственной страницы рецептов

Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла text-start.html и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

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

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

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

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

  Ингредиенты

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

  Рецепт

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

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

  Хранение

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

  Хумус можно хранить в морозильном отделении 2–3 месяца.</textarea>

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

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

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 = '<h1>Рецепт быстрого приготовления хумуса.</h1>nn<p>Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.</p>nn<p>Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой.</p>nn<h2>Ингредиенты</h2>nn<ul>n<li>1 банка (400г) турецкого гороха (или бараньего гороха)</li>n<li>175г тахани</li>n<li>6 вяленых томатов</li>n<li>Половинка красного перца</li>n<li>Щепотка кайенского перца</li>n<li>1 зубчик чеснока</li>n<li>Чуть-чуть оливкового масла</li>n</ul>nn<h2>Рецепт</h2>nn<ol>n<li>Очистите чеснок от кожуры и крупно нарежьте.</li>n<li>Удалите стебель и семена у перца; крупно нарежьте.</li>n<li>Добавьте все ингредиенты в пищевой комбайн.</li>n<li>Измельчите все ингредиенты до состояния пасты.</li>n<li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>n<li>Если вам нужен гладкий хумус, измельчайте дольше.</li>n</ol>nn<p>По вкусу можете добавить в небольших количествах лимон и кориандский перец, лайм и чипотле, хариссу и мяту или шпинат и брынзу. Попробуйте и решите, что подходит вам.</p>nn<h2>Хранение</h2>nn<p>Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его.</p>nn<p>Хумус можно хранить в морозильном отделении 2–3 месяца.</p>';
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();
};

Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.

Вложенные списки

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

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

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

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

Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.

Акцент и важность

В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространённых.

Акцент

Когда мы хотим добавить акцент в разговорный язык, мы подчёркиваем определённые слова, тонко изменяя смысл того, что мы говорим. Точно так же на письменном языке мы склонны подчёркивать слова, выделяя их курсивом. Например, следующие два предложения имеют разные значения.

Я рад, что ты не опоздал.

Я рад, что ты не опоздал.

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

В таких случаях в HTML используется элемент <em> (выделение). Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном. Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив. Для выделения курсивом вы можете использовать элемент <span> и CSS, или, возможно, элемент <i> (en-US) (смотрите ниже).

<p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p>

Важное значение

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

Эта жидкость очень токсична.

Я рассчитываю на вас. Не опаздывай!

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

<p>Эта жидкость <strong>очень токсична</strong>.</p>

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

При желании вы можете вложить важные и акцентированные слова друг в друга:

<p>Эта жидкость <strong>очень токсична</strong> —
если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>.</p>

Активное изучение: Давайте будем важны!

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

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

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

<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Важное объявление</h1>
<p>9 января 2010 года, в воскресенье,
банда вандалов была обнаружена за кражей нескольких
садовых гномов из торгового центра в центре Милуоки. На них были
надеты зелёные спортивные костюмы и глупые шляпы, и,
по-видимому, они были в нетрезвом состоянии. Если у кого-то
есть какая-либо информация об этом инциденте, пожалуйста,
позвоните в полицию немедленно.</p></textarea>

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

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

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

Курсив, жирный шрифт, подчеркивание…

Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике. Ситуация с <b>, <i> (en-US) и <u> несколько сложнее. Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчёркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.

HTML5 переопределил <b>, <i> и <u> с новыми, несколько запутанными, семантическими ролями.

Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчёркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.

  • <i> (en-US) используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли …
  • <b> используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения …
  • <u> используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное, орфографическая ошибка …

Примечание: Предупреждение о подчёркивании: люди сильно ассоциируют подчёркивание с гиперссылками. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.

<!-- Научные наименования -->
<p>
  Колибри обыкновенный (<i>архилоус обыкновенный</i>) —
наиболее часто встречающийся вид колибри в северо-восточной Америке.
</p>

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

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

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

Заключение

Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как создавать гиперссылки, возможно, самый важный элемент в Интернете.

  • Назад
  • Обзор: Introduction to HTML
  • Далее

В этом модуле

Источник

Текст в HTML
HTML текст — теги, которые используются для форматирования текста на web-странице. Предполагается что вы уже изучили основы HTML настоящего самоучителя HTML.

Правильное и качественное форматирование текста в документе решает две задачи:

  1. Помогают поисковым роботам правильно понять содержимое документа.
  2. Позволяют пользователю легко изучить страницу и понять ее смысловое содержание.

Согласитесь, легче читать текст который разбит на абзацы с подзаголовками. А вот «портянку» сплошного текста читать довольно трудно.

Рассмотрим основные и дополнительные теги форматирования текста в HTML.

Заголовки в HTML создаются с помощью тега h после которого идет цифра от 1 до 6, например <h1>, где:

  • h — сокращение от английского heading (заголовок);
  • 1…6 — уровни заголовка.

Заголовки используются для определения нового раздела или подраздела. Заголовки имеют иерархию, от заголовка <h1> до заголовка <h6>.

Например, если мы рассматриваем какую-либо обширную тему, мы заключаем ее название в <h1>. Заголовок на уровень ниже в <h2> и так далее до <h6>.

Например, возьмем заголовок «рецепты с гречкой». Далее все зависит от того, как вы хотите структурировать страницу. Я бы взял и разделил следующим образом:

  1. h1 — рецепты с гречкой;
  2. h2 — рецепты с гречкой в (мультиварке, духовке, кастрюле);
  3. h3 — рецепты с гречкой в … с (мясом, луком, курицей);
  4. h4 — рецепты с гречкой в … с … на (завтрак, обед, ужин);
  5. h5 — рецепты с гречкой в … с … на … как (просто, по-купечески);
  6. h6 — рецепты с гречкой в … с … на … как … + фото, видео, инструкция и так далее.

Может это не самая лучшая структура, но смысл ясен.

Так же подзаголовки могут разделяться на какие-то логические действия. Например:

  • h1 — как построить баню;
  • h2 — как выбрать фундамент;
  • h3 — виды фундаментов;
  • h4 — ленточный (или иной вид) фундамент;
  • h5 — особенности ленточного фундамента.

В общем и целом понимание должно появиться. Идем дальше.

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

Если мы наберем следующий код:

<h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>

То результат будет следующим.

Заголовки h1 - h6

Рассмотрим каждый элемент подробнее.

Тег h1

Элемент <h1> — заголовок верхнего уровня. Он должен встречаться в документе один раз в самом начале. Это как заголовок книги, ведь название книги не может встречаться несколько раз.

Рекомендуется делать уникальный заголовок <h1> для каждой страницы сайта.

Стандартный стиль для заголовка <h1>:

display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег h2

Элемент <h2> — подзаголовок <h1>. В отличии от <h1> может встречаться на веб-странице несколько раз.

Стандартный стиль для заголовка <h2>:

display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег h3

Подзаголовок элемента <h2>.

Стандартный стиль для заголовка <h3>:

display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег h4

Подзаголовок элемента <h3>.

Стандартный стиль для заголовка <h4>:

display: block;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег h5

Подзаголовок элемента <h4>.

Стандартный стиль для заголовка <h5>:

display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег h6

Подзаголовок элемента <h5>.

Стандартный стиль для заголовка <h6>:

display: block;
font-size: 0.67em;
margin-block-start: 2.33em;
margin-block-end: 2.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Теги форматирования текста

Форматирование текста — это разметка (процесс разметки) текста. В HTML используется много тегов форматирования, которые со временем заменяет CSS. Рассмотрим эти элементы.

Тег b

Элемент <b> выделяет текст полужирным, не несет смысловой нагрузки.
Пример.

<b>Жирный текст</b> в этом предложении.

Результат.

Жирный текст в этом предложении.

Тег strong

Элемент <strong> выделяет текст полужирным, придает выделеному тексту смысловую нагрузку.
Пример.

<strong>Жирный текст со смысловой нагрузкой</strong> в этом предложении.

Результат.

Жирный текст со смысловой нагрузкой в этом предложении.

Тег i

Элемент <i> выделяет текст курсивом без смысловой значимости.
Пример.

<i>Курсив</i> в этом предложении.

Результат.

Курсив в этом предложении.

Тег em

Элемент <em> выделяет текст курсивом со смысловой значимостью, визуально не отличается от <i>.
Пример.

<em>Курсив со смысловой нагрузкой</em> в этом предложении.

Результат.

Курсив со смысловой нагрузкой в этом предложении.

Тег small

Элемент <small> уменьшает размер текста на единицу.

Пример.

Стандартный текст, <small>а это текст в теге small</small>.

Результат.

Стандартный текст, а это текст в теге small.

Тег sup

Элемент <sup> используется для создания надстрочного текста.

Пример.

Объем емкости для воды был 3 м.<sup>3</sup>

Результат.

Объем емкости для воды был 3 м.3

Тег sub

Элемент <sub> используется для создания подстрочного текста.
Пример.

Задача: нужно найти x<sub>1</sub> если...

Результат.

Задача: нужно найти x1 если…

Тег ins

Элемент <ins> предназначен для выделения текста в новой версии веб-документа, подчеркивает текст. Применяется довольно редко (по собственному опыту).

Пример.

Актуальная версия HTML <ins>5</ins>

Результат.

Актуальная версия HTML 5

Тег del

Элемент <del> предназначен для пометки текста на удаление, перечеркивает текст.
Пример.

Актуальная версия HTML <del>4.1</del> <ins>5</ins>

Результат.
Актуальная версия HTML 4.1 5

Тег mark

Элемент <mark> выделяет текст желтым цветом.
Пример.

Я даю согласие на <mark>обработку персональных данных</mark>.

Результат.

Я даю согласие на обработку персональных данных.

Устаревшие теги

Теги, которые использовались в ранних версиях HTML и на данный момент считаются устаревшими, вместо них использую CSS.

Тег u

Элемент <u> использовался для подчеркивания текста.

Стандартный стиль тега:
text-decoration: underline;

То есть вместо кода:

Это <u>подчеркнутый</u> текст.

В настоящее время рекомендуется использовать его стиль, то есть:

<style>
.under{text-decoration: underline;}
</style> 
Это <span class="under">подчеркнутый</span> текст.

Результат будет одинаков.

Это подчеркнутый текст.

На смену <u> пришел элемент <ins>.

Тег s

Элемент <s> использовался для создания перечеркнутого текста.
Стандартный стиль тега:
text-decoration: line-through;

Тут все аналогично предыдущему тегу. Вместо <s> используется <del> либо оформление с помощью CSS.

Абзац и перенос текста

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

Тег p

Элемент <p> используется для создания параграфа, то есть он разделяет текст на отдельные абзацы между которыми стоит пустая строка.
Пример.

<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. </p><p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>

Результат.

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.

В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Тег br

Элемент <br> используется для разрыва строки. После него текст переноситься на новую строку. Это одиночный тег, он не имеет закрывающего тега.

Пример.

Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. <br>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Результат.

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.
В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Тег hr

Элемент <hr> используется для создания горизонтальной линии. Не требует закрывающего тега.

Пример.

Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. <hr>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Результат.

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.

В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Цитаты, определения и направление текста

Тег abbr

Элемент <abbr> предназначен для форматирования аббревиатур. Подчеркивает аббревиатуру пунктирной линией. Расшифровка указывается в атрибуте title. В справочнике HTML есть подробное описание тега <abbr>.

Пример.

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> язык гипертекстовой разметки.</p>

Результат.

HTML язык гипертекстовой разметки.

Тег blockquote

Элемент <blockquote> предназначен для выделения цитат в тексте.

Пример.

<blockquote cite="https://abuzov.com/">
    <h1>HTML тег: blockquote</h1>
    <p>Блок текста, цитируемый из других источников.</p>
</blockquote>

Результат.

HTML тег: blockquote

Блок текста, цитируемый из других источников.

Тег q

Элемент <q> используется для выделения в документе коротких цитат. Короткие цитаты берутся в кавычки.

Пример.

Пример <q>короткой цитаты</q>

Результат.

Пример короткой цитаты

Тег cite

Элемент <cite> — ссылка на творческое произведение, такое как книга, веб-сайт или заявление. Он должен включать имя автора, название работы или ссылку на URL.

Пример.

Для написания статьи использовалась книга: <p> Бабаш Александр Владимирович, Шанкин Генрих Петрович<cite> История криптографии</cite>. 2002 год.</p>

Результат.

Для написания статьи использовалась книга:

Бабаш Александр Владимирович, Шанкин Генрих Петрович История криптографии. 2002 год.

Теги ввода, кода и направления

Тег code

Элемент <code> указывает на то, что текст является фрагментом компьютерного кода. Вы уже сталкивались с результат работы этого тега, пример:

<code>display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;</code>

Результат.

display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег kbd

Элемент <kbd> указывает что фрагмент теста введен с клавиатуры.

Пример.

Для запуска диспетчера задач введите: <kbd>ctrl + alt + del</kbd>

Результат.

Для запуска диспетчера задач введите: ctrl + alt + del

Тег samp

Элемент <samp> выделяет пример результата выполнения программы.

Пример.

Если вы выберете опцию «чемпион», вы получите сообщение <samp> Обезьяна не гусеница </samp>

Результат.

Если вы выберете опцию «чемпион», вы получите сообщение Обезьяна не гусеница

Тег var

Элемент <var> задает переменную, например, в математической формуле или в компьютерном коде.

Пример.

Если <var>x</var> = 3 , то <var>y</var> = 6

Результат.

Если x = 3 , то y = 6

Тег pre

Элемент <pre> сохраняет изначальное форматирование текста. При этом пробелы и переносы строк в начальном тексте не удаляются.

Пример.

<pre>Текст переносится 
без помощи br и иных средств форматирования
он просто             сохраняет исходное 
                  форматирование</pre>

Результат.

Текст переносится 
без помощи br и иных средств форматирования
он просто             сохраняет исходное 
                  форматирование

Тег bdo

Элемент <bdo> изменяет текущее направление текста.

Пример.

Результатом этого <bdo dir = "rtl"> слова </bdo> будет "аволс".

Результат.

Результатом этого слова будет «аволс».

На этом можно считать что вы изучили текст HTML.

Источник

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

В этом туториале вы поможете верстальщице Оле сделать страницу с результатами поиска в Яндексе. Получится не один в один, но довольно похоже:

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

1. Создайте HTML-документ

Для начала Оле понадобится заготовка, файл index.html. Создайте у себя файл с таким же содержимым:

<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
  </body>
</html>

Здесь 3 тега, которые обязаны быть в каждом html-файле:

  • <html> — здесь лежат все теги страницы, он “корневой”, главный;
  • <head> — в этом теге лежит всё, что не контент страницы: стили, заголовок страницы в теге <title>, кодировка и так далее;
  • <body> — “тело” HTML-документа, здесь лежит всё, что вы увидите на страничке в браузере.

2. Добавьте текст

Вот что Оля должна вывести при поиске “Коала” в поисковике, для которого она верстает страницу с результатами поиска:

Коала — Википедия

Коaла (лат. Phascolarctos cinereus) — вид сумчатых, обитающий в Австралии. Единственный современный представитель семейства коаловых ... Читать ещё.

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

 Как получилось у Оли

Не долго думая, Оля добавила текст прямо внутрь <body> и получила такой результат:

3. Добавьте ссылку

Без ссылок на результаты поиска работа Оли бесполезна. Люди пришли не просто почитать про коал: им нужны ссылки на сайты про коал.

Оля помнит наизусть несколько тегов: <img> — для картинок, а <p> — для параграфа текста. Но как добавить ссылку? Какой у неё тег?

Оля загуглила, и получила этот ответ:

htmlbook.ru — крутой сайт, на котором хорошая документация по HTML и CSS, поэтому в первую очередь присматривайтесь к нему.

Отлично, нужен тег <a>! Но как его написать?..

Как писать теги

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

Пример парного тега:

<p>Покупайте наши веб-сайты!</p>

Так на страницу можно добавить параграф с текстом. Тег <p> обязательно “закрывать” — добавлять в конце ещё один, но с чёрточкой: </p>. Так вы скажете браузеру, что всё, текст параграфа закончился.

Пример одиночного тега:

<img src="адрес_картинки">

Он сам по себе, его “закрывать” не нужно. Одиночных тегов очень мало, в основном, вам пригодится только <img> — для картинок, <br> — перенос строки и <hr> — горизонтальная линия.

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

<img src="https://dvmn.org/filer/canonical/1594118255/683/">
<h1> Зачем нужен h1 </h1>
<p>
   В теге h1 пишут заголовки, как "Как писать теги" чуть выше.
   Это парный тег, у него есть начало и конец, как и у тега p.
</p>
<p>
   У тега img нет "начала" или "конца". Он значит только то, что нужно добавить картинку.
   Браузеру не нужно сообщать, когда она "закончится".
</p>

Парные теги нужно закрывать

Допишите тег

Оля хотела добавить ссылку с помощью тега <a>, и теперь она поняла, как это сделать. Ещё немного гуглежа и она узнала : тег парный, а значит выглядеть он должен вот так:

<a href="#">Читать ещё</a>

Оля не знала какую ссылку поставить для ссылки, ведь ссылки будут подставляться уже при шаблонизации, поэтому оставила “#” вместо ссылки. Это называется якорь, и это такой обычай среди верстальщиков: если не знаешь, какую ссылку поставить, ставь #.

Теперь на страничке Оли появилась ссылка. Попробуйте повторить результат Оли:

4. Выделите все “коала” на странице

Поисковик выделяет жирным шрифтом все слова, которые вы искали. Оля не знает, что это за тег, но по запросу html жирный шрифт в google.com Оля нашла ссылку на заветный htmlbook.ru.

Попробуйте, у вас получится, как у Оли? У неё получился такой текст:

Сейчас текст у Оли весь одинакового размера. В нём Оля хочет выделить заголовок: Коала — Википедия крупно, а чуть ниже весь остальной текст, мельче. Оля загуглила html заголовок и сразу нашла подходящий тег: <h1>.

Странно, получается, заголовку достался отдельный тег, а остальному тексту — нет. Оля продолжила гуглить теги и узнала о теге <p>: пишут, что он нужен для текста. Но зачем? Чтобы разобраться в этом Оле пришлось узнать о строчных и блочных тегах.

О строчных и блочных тегах

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

  • <a> — ссылка;
  • <i> — выделение текста курсивом;
  • <b> — выделение текста жирным;
  • <br> — одиночный тег для переноса строки.

Другой вид тегов — блочные. Это теги, которые объединяют другие теги внутри себя в группы, и наделяют их смыслом. Например, блочный тег <h1> содержит в себе заголовок страницы, а блочный тег <p> — параграф текста. За счёт них можно оформить заголовок в одном стиле, а остальной текст — в другом:

<h1 style="color:red;">Статья о котиках</h1>

<p style="...">
  <b>Котики</b> — замечательные животные. Я полюбил их, когда мне было 7 лет.
  Как сейчас помню, на мой <i>день рождения</i> мне подарили замечательного кота...
</p>

В этом примере заголовок статьи покрашен в красный цвет: color:red;. Текст же статьи при этом остался чёрным, покрасился только заголовок “Статья о котиках”. Для текста внутри тега <p> теперь можно определить другие, отдельные стили, которые не коснутся текста в заголовке <h1>.

Внутри тега <p> есть несколько строчных тегов: <b> и <i>. Они прямо “срослись” с текстом, существуют прямо внутри него, в отличие от блочных, которые только обрамляют текст по краям.

Блочные теги незаменимы, когда хочется добавить тексту фон, рамку, отступы… Вот небольшой список из самых популярных блочных тегов:

  • <header> — “шапка” сайта, полоса, которая всегда висит в самом верху страницы;
  • <footer> — “подвал” сайта — самый низ страницы, где расположены всякие ссылки на техподдержку, лицензии, контакты поддержки и т.д.;
  • <main> — главный контент на странице: то, ради чего пользователь пришёл на сайт;
  • <div> — для создания прочих блоков, для которых нет специализированного тега. Например, для карточки товара в магазине или карточки поста.

Отдельно стоит выделить эти блочные теги:

  • <p> — параграф текста;
  • <h1>, <h2>... <h6> — заголовок. Чем больше число — тем мельче заголовок;

Допишите код

Теперь, когда Оля разобралась с блочными/строчными тегами, она может наконец закончить незавершённую работу: добавить на страницу теги <h1> и <p>. Заголовок с тегом <h1> показался ей слишком крупным, поэтому она воспользовалась <h2>:

Заголовок на то и нужен, чтобы на него хотелось кликнуть. А на ваш заголовок кликнуть нельзя. Что делать? Нужен тег для ссылок <a>. Но как правильно: положить тег <a> внутрь тега <h1> или наоборот?..

О комбинации тегов

Нельзя располагать блочные теги внутри строчных.

Такой код существовать не должен:

<a><h1>Заголовок</h1></a>

Тег <a> — строчный, он существует внутри текста. Тег <h1> — блочный, он оборачивает собой текст и все строчные теги для этого текста. Вот как стоило поступить в этой ситуации:

<h1><a>Заголовок</a></h1>

Оля прислушалась к этой рекоммендации и вот что у неё получилось:

<h2>
  <a href="#"><b>Коала</b> — Википедия</a>
</h2>

Проверьте, у вас получилось сделать заголовок ссылкой?

Теперь Оля хочет подпись под заголовком ссылки, как вот тут:

Оля загуглила html мелкий текст и нашла тег, который поможет сделать текст меньше. Подпись под заголовком Оля решила делать прямо внутри тега <h2>, чтобы она была “едина” с заголовком <h2>, никуда не уехала и так далее:

<h2>
  <a href="#"><b>Коала</b> — Википедия</a>
  <small>ru.wikipedia.org›Коала</small>
</h2>

Получилось не то, что хотела Оля… Во-первых, текст не сильно-то и уменьшился. Во-вторых, не хватает переноса.

В HTML обычные переносы строк игнорируются, так как текст переносится по ширине экрана. Чтобы заставить текст перенестись насильно, есть одиночный тег <br>:

<h2>
  <a href="#"><b>Коала</b> — Википедия</a>
  <br>
  <small>ru.wikipedia.org›Коала</small>
</h2>

Теперь нужно сделать текст ещё мельче. Оказывается, теги можно комбинировать, вот так:

<small>
    <small>
        ru.wikipedia.org›Коала
    </small>
</small>

Тег как бы “накапливает” эффект мелкого текста и делает его ещё мельче. Проверьте, у вас тоже так получится?

Попробуйте применить

Что делать, если подходящий тег не нашёлся

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

Если же и гугл не помогает — придётся подумать, как составить то, что вы хотите из того, что есть. Самый простой пример — вы хотите сделать кнопку с картинкой. Такого тега нет, зато есть кнопка и есть картинка:

<button>
    <img src="#" >
</button>

Или вы хотите, чтобы ваш текст был выделен жирным и при этом был ссылкой, вот так: жирная ссылка.
Это можно сделать двумя способами, комбинируя теги <a> и <b>, они оба строчные:

<a><b>Жирная ссылка</b></a>

<b><a>Жирная ссылка</a></b>

Что ещё почитать по теме

  • Статья Строчные элементы от htmlbook.ru
  • Слайды типичные ситуации в вёрстке
Источник

Как сделать текст в HTML (топ 10 запросов)

Чем отличается написание текста в обычном текстовом редакторе, от написания в HTML? В текстовом редакторе, форматирование текста происходит в интерфейсе программы. Для HTML страницы – текст форматируется, при помощи тегов.

Теги сообщают браузерам, как и в каком месте страницы, отображать текст. Для этого придуманы специальные теги. Мы не пишем, текст, просто так.


Хорошего Вам дня!

Текст, всегда заключают, между тегами, например, внутри абзаца.


<p>Пожелайте мне удачи!</p>

Мы собрали список, наиболее частых запросов, связанных с текстом, от начинающих изучать HTML.

Как сделать текст в центре

По умолчанию, текст, прилипает к левому краю. Свойство text-align, внутри тега div, выравнивает текст по центру.


<div>Поставьте меня в центр</div> // HTML

div {
    text-align: center; // CSS
}

Как сделать текст в HTML.

Как сделать текст справа


<div>Хочу стоять справа</div> // HTML

div {
    text-align: right; // CSS
}

Как сделать текст в HTML.

Как сделать отступ текста

За отступы текста отвечают свойства – margin и padding. Margin отделяет абзацы друг от друга, а padding создает воздушное пространство, внутри абзаца. Отступы измеряют в абсолютных единицах измерения — пикселях или в относительных — %, em, rem.


<p>Отодвинься от меня</p> // HTML

p {
    margin: 20px; // CSS
    padding: 10px;
}

Как сделать текст в HTML.

Как сделать текст жирным

Через тег b, можно вставлять прямо в разметку. Этот способ предпочтительнее для SEO-оптимизации.


<p>Хочу быть <b>жирным</b></p> // HTML

или выделять участок тегом span и задавать степень жирности в CSS правилах.


<p>Хочу быть <span>самым жирным</span></p> // HTML

span {
    font-weight: bolder; // CSS
}

или указывать жирность в цифрах.


span {
    font-weight: 700; // в интервале 100 - 900
}

Как сделать текст в HTML.

Как сделать ссылку в тексте

Нужный фрагмент текста, заключить в тег a, с указанием URL-адреса.


<p>Вам следует перейти по этой <a href="http://yandex.ru">ссылке</a></p> // внешняя ссылка

<p>У меня тут есть <a href="page_5.html">хорошая статья</a></p> // внутренняя ссылка

Как сделать текст в HTML.

Как сделать текст в рамке

Рамка задается не тексту, а блочному тегу, в котором находится этот текст.


<p>Я - важный текст</p> // HTML

p {
    border: 2px solid pink; // толщина, сплошная, цвет
    padding: 15px; // воздух между рамкой и текстом
}

Как сделать текст в HTML.

Как сделать текст подчеркнутым

Нужное место, обрамляем тегом u.


<p>Прошу здесь <u>подчеркнуть</u> меня</p> // HTML

Как сделать текст в HTML.

Как задать тексту фон

Сделать фон для всего абзаца.


<p>Хочу выделиться фоном</p> // HTML

p {
    background-color: pink; // CSS
}

Если вы хотите задать фон, отдельному фрагменту текста, тогда используйте span.


<p>Нет, только <span>розовый цвет</span></p> // HTML

span {
    background-color: pink; // CSS
}

Как сделать текст в HTML.

Как увеличить текст


<p>Посмотрите, какой я большой</p> // HTML

p {
    font-size: 30px; // CSS
}

Как сделать текст в HTML.

Как сделать текст курсивом

Через тег i в разметке.


<p>Здесь я прямой, а тут - <i>курсивом</i></p> // HTML

CSS стили + тег


<p><span>Курсивом</span> - я особенный</p> // HTML

span {
    font-style: italic; // CSS
}

Как сделать текст в HTML.

Итого

Мы взяли список топовых запросов, связанных с форматированием текста в HTML, от начинающих и коротко ответили на них. Задавайте ваши вопросы в комментариях.

  • Создано 29.07.2019 10:29:18


  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Источник

Для управления текстом и изменения его вида существует достаточно большое количество различных элементов. Что не удивительно, ведь текст — это самый популярный вид информации.

Особенности текста в HTML

Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.

Любое количество пробелов идущих подряд, в браузере отображается как один

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

<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром.
Отмечай мелом.
Отрубай топором.</p>

Исключением из этого правила является элемент <pre>, содержимое которого отображается именно так, как оно указано в коде, с учётом всех пробелов. По этой причине <pre> часто применяется для фрагментов программ, где важны пробелы (пример 1).

Пример 1. Использование <pre>

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>pre</title>
</head>
<body>
<pre>public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith(«http://») || url.startsWith(«https://»)) {
view.getContext().startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
return true;
} else {
return false;
}
}</pre>
</body>
</html>

Результат данного примера показан на рис. 1.

Текст внутри <pre>

Рис. 1. Текст внутри <pre>

Текст занимает всю ширину окна браузера

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

Абзацы

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

<p>Первый абзац</p>
<p>Второй абзац</p>

Каждый абзац начинается с открывающего тега <p> и заканчивается закрывающим тегом </p>. В примере 2 показано применение нескольких абзацев.

Пример 2. Использование абзацев

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Абзацы</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.</p>
<p>В одних краях ещё февраль, в других — уже апрель.</p>
<p>Проходит время, вечный счёт: год за год, век за век…</p>
<p>Во всём — его неспешный ход, его кромешный бег.</p>
<p>В году на радость и печаль по двадцать пять недель.</p>
<p>Мне двадцать пять недель февраль, и двадцать пять — апрель.</p>
<p>По двадцать пять недель в туман уходит счёт векам.</p>
<p>Летит мой звонкий балаган куда-то к облакам.</p>
<p>М. Щербаков</p>
</body>
</html>

Результат данного примера показан на рис. 2.

Абзацы текста

Рис. 2. Абзацы текста

Как видно из приведённого рисунка, при использовании элемента <p> между абзацами возникают отступы. От них можно избавиться, если в местах переноса строк добавить элемент <br>. В отличие от абзаца, <br> не создаёт дополнительных вертикальных отступов между строк и может применяться практически в любом тексте.

Так, текст примера 1 с учётом переноса строк будет преобразован следующим образом (пример 3).

Пример 3. Использование <br>

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Переносы в тексте</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.<br>
В одних краях ещё февраль, в других — уже апрель.<br>
Проходит время, вечный счёт: год за год, век за век…<br>
Во всём — его неспешный ход, его кромешный бег.<br>
В году на радость и печаль по двадцать пять недель.<br>
Мне двадцать пять недель февраль, и двадцать пять — апрель.<br>
По двадцать пять недель в туман уходит счёт векам.<br>
Летит мой звонкий балаган куда-то к облакам.</p>
<p>М. Щербаков</p>
</body>
</html>

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

Вид текста с учётом переносов

Рис. 3. Вид текста с учётом переносов

Учтите, что один абзац нельзя вкладывать внутрь другого.

Заголовки

Заголовки выполняют важную функцию на веб-странице — с их помощью происходит систематизация текста и определяется иерархия подразделов. Это учитывается поисковыми системами при индексации веб-страницы и при отображении результатов поиска.

В HTML для заголовков есть шесть элементов от <h1> до <h6>. Элемент <h1> определяет заголовок первого уровня, он самый значимый и применяется обычно для заголовка статьи или поста блога. Элемент <h2> определяет заголовок второго уровня, он используется, как правило, для подзаголовков. Последним по иерархии идёт <h6>.

Синтаксис создания заголовков показан в примере 4.

Пример 4. Добавление заголовков

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Заголовки в тексте</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
</body>
</html>

Результат данного примера показан на рис. 4. Содержимое элемента <h1> отображается самым крупным шрифтом жирного начертания, а <h6> — самым мелким.

Вид заголовков на веб-странице

Рис. 4. Вид заголовков на веб-странице

Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.

Верхний и нижний индексы

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз (рис. 5). В зависимости от положения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: <sup> — верхний индекс (от англ. superscript) и <sub> — индекс нижний (от англ. subscript). Текст внутри этих элементов обозначается меньшим размером, чем обычный текст, и смещается вверх или вниз.

Базовая линия текста

Рис. 5. Базовая линия текста

В примере 5 показано применение нижнего индекса для химической формулы.

Пример 5. Использование нижнего индекса

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Нижний индекс</title>
</head>
<body>
<p>Формула серной кислоты: H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>

Результат данного примера показан на рис. 6.

Использование элемента <sub>

Рис. 6. Использование элемента <sub>

В примере 6 показано применение верхнего индекса для математической формулы.

Пример 6. Использование верхнего индекса

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Верхний индекс</title>
</head>
<body>
<p>ax<sup>2</sup> + bx + c</p>
</body>
</html>

Результат данного примера показан на рис. 7.

Использование элемента <sup>

Рис. 7. Использование элемента <sup>

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

Преимуществом кодировки UTF-8 является то, что она позволяет напрямую вставлять символы, которых на клавиатуре нет, к примеру знаки зодиака. На сайте utf8icons.com вы можете найти множество различных символов, скопировать их и вставить в свой код HTML. Главное, чтобы текстовый редактор поддерживал кодировку UTF-8.

При этом некоторые символы нельзя вставлять в код напрямую. К примеру, если в тексте понадобились символы < и >, а вы вставите их в код, то HTML воспримет их как теги, что может привести к ошибке отображения. В подобных случаях используется специальная форма написания, показанная в табл. 1.

Табл. 1. Спецсимволы

&lt; Знак «меньше»
&gt; Знак «больше»
&quot; Двойная кавычка
&amp; Амперсанд
&nbsp; Неразрывный пробел
&shy; Мягкий перенос

Спецсимвол начинается с амперсанда, затем идёт текстовое обозначение символа и заканчивается всё точкой с запятой. Любое отклонение от такой формы записи приведёт к тому, что символ отображаться не будет.

Таким образом, чтобы вывести код HTML, в тексте мы используем следующую запись (пример 7).

Пример 7. Использование спецсимволов

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Угловые скобки</title>
</head>
<body>
<p>&lt;meta charset=&quot;utf-8&quot;&gt;</p>
</body>
</html>

Переносы в тексте

HTML произвольно переносит текст на новую строку в тех местах, где встречается пробел или дефис. Но по правилам русского языка в некоторых случаях переносы запрещены. Так, нельзя разрывать переносом сокращения, вроде «т. д.», отрывать инициалы от фамилии, от значения единицы измерения (5 км) и обозначение года (1917 г.) и др. Чтобы запретить перенос в определённых местах вместо пробела применяется неразрывный пробел &nbsp;, как показано в примере 8.

Пример 8. Неразрывный пробел

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Пробел</title>
</head>
<body>
<p>Возврат к стереотипам аннигилирует глубокий
полифонический роман, именно об этом говорил
Б.&nbsp;В.&nbsp;Томашевский в своей работе
1925&nbsp;года.</p>
</body>
</html>

И, наоборот, там, где в длинных словах желательно поставить перенос строки, вы можете использовать элемент <wbr> или спецсимвол &shy;. И тот и другой вариант работает одинаково — слово отображается целиком, когда оно помещается в строке, а если не помещается, то в указанных местах делается перенос (пример 9). Есть только небольшая разница в отображении — &shy; добавляет при переносе дефис, а <wbr> нет.

Пример 9. Переносы в тексте

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Переносы</title>
</head>
<body>
<p>Название орудия — сорока&shy;пяти&shy;миллиметровая
противотанковая пушка образца 1942&nbsp;года (М-42).</p>
</body>
</html>

Перейти к заданиям

Последнее изменение: 01.06.2020

Источник

Заголовки

Как вставить текст в HTML страницу? Для этого существуют специальные HTML теги для текста.

В HTML существует шесть уровней заголовков. Они добавляются с помощью тэгов
<h1> — <h6>. При
этом <h1> это заголовок первого уровня, он самый большой.

Пример создания заголовков:

+

8
9
10
11
12
13

 
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

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

Новички иногда не могут разобраться с вопросом — сколько заголовков первого уровня может быть на странице.
В интернете я не раз встречал на эту тему неполную и недостоверную информацию. Поэтому я решил подробно
рассмотреть этот вопрос.

На работу страницы количество тэгов <h1> никак не влияет. Можно их
добавлять сколько угодно. А вот поисковые системы отрицательно относятся к тому, что на странице есть больше
одного заголовка первого уровня. Поэтому, если Вы собираетесь продвигать свой сайт в поисковых системах,
то на каждой странице должен быть только один заголовок первого уровня. Вывод: лучше сразу привыкать к тому,
чтобы не ставить больше одного тэга <h1> на страницу. Ведь в HTML есть
целых шетсь уровней заголовков. При любой вёрстке страницы этого вполне достаточно, чтобы выделить тэг
<h1> только для одного заголовка.

Абзац

Тэг <p> создаёт абзац текста. У него есть отступы сверху и снизу для
отделения одного абзаца
от другого. Кроме того, есть возможность установить отступ первой строки. Всё это регулируется с помощью CSS.

Тэг <br>

Тэг <br> это не совсем текстовый тэг. Он производит перевод строки.
Если он находится внутри текста, то последующий текст переходит на новую строку. А если
он находится между блоками, то он добавляет пустую строку.

Пример перевода строки:

15

 
<p>Начало текста<br>новая строка</p>

Тэг <span>

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

Для примера выделим часть текста красным цветом.

15
16

 
<p>Начало текста <span style="color: red">красный текст</span>
продолжение текста</p>

Нужная часть текста находится внутри тэга <span>. Чтобы она
была красной, тэгу установлен атрибут style,
который задаёт стили. Так как работа со стилями описывается в учебнике CSS, здесь я не буду объяснять,
как работает этот атрибут. Просто добавьте его в тэг, как написано в примере.

Тэг <pre>

Тэг <pre> используется для особых видов текста, в которых важно
сохранить форматирование. Текст внутри этого тэга отображается на странице именно так, как он выглядит
в коде страницы. В нём сохраняются все пробелы и переносы строки. Текст отображается
моноширинным шрифтом, но это можно изменить с помощью стилей.

17
18
19

 
<pre>текст       текст после пробелов
следующая строка
следующая строка</pre>

Выделение текста

В HTML есть тэги для выделения текста. Тэги <b>
и <strong> создают жирный шрифт. Хотя
эти тэги имеют некоторые различия, на странице они обычно выглядят одинаково. Тэги
<i> и <em>
выделяют текст курсивом. Существует тэг <u>, который делает текст
подчёркнутым, но использование его нежелательно.

Пример выделения текста:

21
22
23
24

 
<b>Жирный шрифт</b>
<strong>Жирный шрифт</strong>
<i>Курсивный шрифт</i>
<em>Курсивный шрифт</em>

Текст можно выделять с помощью стилей. Каждый сам решает, как выделять текст, с помощью тэгов
или стилей.

Другие тэги

Мы рассмотрели специальные HTML теги для текста. Но текст могут содержать и многие другие
тэги, которые добавляют контент на страницу. Можно даже вставить текст вне каких-либо
тэгов, он всё равно отобразится на экране. Но на практике так никто не делает, потому что вне тэгов
текстом нельзя управлять. Поэтому весь текст конечно должен находиться внутри тэгов. А когда Вы изучите
CSS, Вы сможете определять внешний вид текста.

Источник

Понравилась статья? Поделить с друзьями:
  • Как написать текст на компьютере вертикально
  • Как написать текст на китайском языке
  • Как написать текст на картинке на iphone
  • Как написать текст на картинке jpg
  • Как написать текст на документе pdf