We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

В процессе перевода.

 

 

57/5000

Есть много других элементов в HTML для форматирования текста

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

Необходимо знать :

Базовое знакомство с HTML, раскрытое в 
Начало работы с HTML. Как фотрматировать текст с помощью HTML, описано в статье Основы редактирования текста в HTML.

Цель: To learn how to use lesser-known HTML elements to mark up advanced semantic features.

Списки описания

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

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

soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information

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

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

<dl>
  <dt>soliloquy</dt>
  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
  <dt>monologue</dt>
  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
  <dt>aside</dt>
  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
</dl>

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

монолог
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.

Note that it is permitted to have a single term with multiple descriptions, for example:

aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.
В письменной форме раздел содержимого, связанный с текущей темой, но не вписывающийся непосредственно в основной поток контента, поэтому представлен рядом (часто в коробке сбоку).

Активное обучение: разметка набора определений

 

Пришло время попробовать свои силы в списках описания; добавьте элементы в исходный текст в поле «Ввод», чтобы он отображался как список описания в поле «Вывод». Вы можете попробовать использовать свои собственные термины и описания, если хотите.

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

 

Цитаты

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

Цитаты

Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. Д.) Цитируется из другого места, вы должны обернуть ее внутри элемента <blockquote>, чтобы обозначить это, и укажите URL-адрес, указывающий на источник цитаты внутри атрибута cite.

Например, следующая следующая разметка берется из страницы элемента MDN <blockquote>:

<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>

Чтобы превратить это в цитату блока, мы просто сделаем следующее:

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

Утилита по умолчанию для браузера будет отображать это как абзац с отступом, как индикатор, который является цитатой; MDN делает это, но также добавляет некоторый дополнительный стиль:

Элемент HTML <blockquote> Element (или элемент кода блока HTML) указывает, что закрытый текст является расширенной цитатой.

Внутренние котировки

Встроенные цитаты работают точно так же, за исключением того, что они используют элемент <q>. Например, следующий бит разметки содержит цитату из страницы MDN <q>:

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

 

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

Элемент quote - <q> - предназначен для коротких цитат, которые не требуют разрывов абзаца.

Цитирование

Содержание атрибута cite полезно, но, к сожалению, браузеры, программы чтения счётчиков и т. Д. На самом деле мало чем помогают. Невозможно заставить браузер отображать содержимое цитирования без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент <cite> рядом с (или внутри) элементом цитаты. Это действительно означает, что имя источника цитаты - то есть имя книги или имя человека, которое произвело цитату, - но нет причин, по которым вы не могли бы связать текст внутри <cite> с цитатой источник в некотором роде:

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере quotations.html

Активное обучение: кто это сказал?

Время для другого активного примера обучения! В этом примере мы хотели бы, чтобы вы:

  1. Поверните средний абзац в blockquote, который включает атрибут cite.
  2. Поверните часть третьего абзаца во встроенную цитату, которая включает атрибутcite.
  3. Включите элемент <cite> для каждой ссылки.

Источники цитирования, которые вам нужны:

  • http://www.brainyquote.com/quotes/authors/c/confucius.html for the Confucius quote
  • http://www.affirmationsforpositivethinking.com/index.htm for "The Need To Eliminate Negative Self Talk".

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

 

Аббревиатуры

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

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

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

 

Они будут выглядеть примерно так (расширение появится в подсказке, когда этот термин зависнет):

Мы используем HTML для структурирования наших веб-документов.

Я думаю, что преподобный Грин сделал это на кухне с бензопилой.

 

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

Активное обучение: выделение аббревиатуры

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

Вы можете использовать наш образец ниже или заменить его на свой собственный.

Разметка контактных данных

HTML имеет элемент для разметки контактных данных - <address>.

Это просто обертывает ваши контактные данные, например:

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

Однако следует помнить, что элемент <address> предназначен для разметки контактных данных человека, который написал HTML-документ, а не какого-либо адреса. Таким образом, вышесказанное было бы только в порядке, если бы Крис написал документ, на котором появляется разметка. Обратите внимание: что-то вроде этого тоже будет нормально:

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

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

Иногда вам придется использовать надстрочный индекс и индекс при маркировке предметов, таких как даты, химические формулы и математические уравнения, чтобы они имели правильное значение. Элементы <sup> и <sub> обрабатывают это задание.

Например:

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

 

Результат этого кода выглядит так:

Мой день рождения - 25 мая 2001 года.

Химическая формула кофеина - C8H10N4O2.

Если x2 равно 9, x должно равняться 3 или -3.

 

Представление компьютерного кода

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

  • <code>: Для разметки общих частей компьютерного кода.
  • <pre>: Для сохранения пробелов (как правило, кодовых блоков) - если вы используете отступы или лишние пробелы внутри вашего текста, браузеры будут игнорировать его, и вы не увидите его на вашей отображаемой странице. Если вы поместите текст в теги <pre> </ pre>, но ваши пробелы будут отображаться идентично тому, как вы его видите в текстовом редакторе.
  • <var>: Для конкретной маркировки имен переменных.
  • <kbd>: Для маркировки вывода компьютерной программы. Для маркировки ввода клавиатуры (и других типов), введенного в компьютер.
  • <samp>: Для маркировки вывода компьютерной программы.

Давайте рассмотрим несколько примеров. Вы должны попробовать сыграть с ними (попробуйте захватить копию нашего файла other-semantics.html):

<pre><code>var para = document.querySelector('p');

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

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

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>


<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

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

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

Разметка времени и даты

HTML также предоставляет элемент <time> для отметки времени и дат в машиночитаемом формате. Например:

<time datetime="2016-01-20">20 January 2016</time>

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

  • 20 Января 2018
  • 20-ое Января 2016
  • Январь 20 2018
  • 20/01/18
  • 01/20/18
  • 20 Января следующего месяца
  • 20e Janvier 2018
  • 2018年1月20日
  • И другое...

 

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

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

 

<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>

Заключение

Это знаменует собой конец нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML - мы хотели попытаться охватить основные моменты, а некоторые из наиболее распространенных из них вы увидите в дикой природе или, по крайней мере, можете найти интересные , Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на HTML element reference (поле семантики текста Inline text semantics станет отличным местом для начала.) В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различные части HTML-документа.

 

 

В этой статье

Перевод: Глеб Ткаченко ( instagramm: @gleb.sc )

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

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