Learn web development

Основы редактирования текста в HTML

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

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

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

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

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

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

<p>I am a paragraph, oh yes I am.</p>

Каждый заголовок заключен в элемент заголовка:

<h1>I am the title of the story.</h1>

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

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

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

<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The Dark Night</h2>

<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>

<h2>Chapter 2: The eternal silence</h2>

<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>

<h3>The specter speaks</h3>

<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</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 смогли эффективно работать.

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

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

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

Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки «Reset». Если вы застряли, нажмите кнопку «Show solution», чтобы увидеть ответ.

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

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

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

<h1>This is a top level heading</h1>

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

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

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

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

Списки/перечни

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

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

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

milk
eggs
bread
hummus

Каждый неупорядоченный список начинается с элемента <ul> - он обертывает все элементы списка:

<ul>
milk
eggs
bread
hummus
</ul>

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

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

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

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

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

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

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

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

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

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

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

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

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

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

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

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

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, process it for a longer time.</li>
</ol> 
Поскольку последние две строки очень тесно связаны с тем, что было до них (они читаются как вспомогательные инструкции или варианты, которые подходят под этой маркой), может иметь смысл вложить их в свой собственный неупорядоченный список и поместить этот список внутри текущего. Это будет выглядеть так:
<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.
    <ul>
      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>

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

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

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

Акцент

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

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

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

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

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

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

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

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

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

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

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

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

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

<p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</em></strong>.</p>

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

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

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

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

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

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

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

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

<!-- scientific names -->
<p>
  The Ruby-throated Hummingbird (<i>Archilocus colubris</i>)
  is the most common hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p>
  Someday I'll learn how to <u>spel</u> better.
</p>

<!-- Highlight keywords in a set of instructions -->
<ol>
  <li>
    <b>Slice</b> two pieces of bread off the loaf.
  </li>
  <li>
    <b>Insert</b> a tomato slice and a leaf of
    lettuce between the slices of bread.
  </li>
</ol>

Заключение

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

Метки документа и участники

 Внесли вклад в эту страницу: nikin93
 Обновлялась последний раз: nikin93,