Команды для текста html: Правки HTML-документа

Содержание

HTML-текст

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

Элементы для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family).

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

HTML-элементы для текста

Содержание:
1. Заголовки: <h2...h6>
2. Форматирование текста: , , , , , , , <ins>, <del>, 
3. Ввод «компьютерного» текста: <code>, <kbd>, <samp>, <var>, <pre>
4. Оформление цитат и определений: <abbr>, <bdo>, <blockquote>, <q>, <cite>, <dfn>
5. Абзацы, средства переноса текста: , , <hr>

1. HTML-элементы для заголовков

Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Элементы <h2>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела.

При использовании заголовков необходимо учитывать их иерархию, т.е. за <h2> должен следовать <h3> и т.д. Также не рекомендуется вкладывать в заголовки другие элементы.

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня

Заголовок 6-го уровня

Фигура. 1. Элементы для заголовков HTML-документа

1.1. Элемент <h2>

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

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

1.2. Элемент <h3>

Представляет подзаголовки элемента <h2>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

1.3. Элемент <h4>

Показывает подзаголовки элемента <h3>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

1.4. Элементы <h5>, <h5>, <h6>

Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.

Для всех элементов доступны ‎глобальные атрибуты.

2. Элементы для форматирования текста

2.1. Элемент

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.

Для элемента доступны ‎глобальные атрибуты.

2.2. Элемент

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

Для элемента доступны ‎глобальные атрибуты.

2.3. Элемент

Отображает шрифт курсивом.

Для элемента доступны ‎глобальные атрибуты.

2.4. Элемент

Уменьшает размер шрифта на единицу по отношению к обычному тексту.

Для элемента доступны ‎глобальные атрибуты.

2.5. Элемент

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

Для элемента доступны ‎глобальные атрибуты.

2.6. Элемент

Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.

Для элемента доступны ‎глобальные атрибуты.

2.7. Элемент

Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.

Для элемента доступны ‎глобальные атрибуты.

2.8. Элемент <ins>

Выделяет текст в новой версии документа, подчёркивая его.

Для элемента доступны атрибуты cite и datetime.

2.9. Элемент <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа.

Для элемента доступны атрибуты cite и datetime.

2.10. Элемент

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

Для элемента доступны ‎глобальные атрибуты.

3. Элементы для ввода «компьютерного» текста

3.1. Элемент <code>

Служит для выделения фрагментов программного кода. Отображает текст моноширинным шрифтом.

Для элемента доступны ‎глобальные атрибуты.

3.2. Элемент <kbd>

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

Для элемента доступны ‎глобальные атрибуты.

3.3. Элемент <samp>

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

Для элемента доступны ‎глобальные атрибуты.

3.4. Элемент <var>

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

Для элемента доступны ‎глобальные атрибуты.

3.5. Элемент <pre>

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

Для элемента доступны ‎глобальные атрибуты.

4. Элементы для оформления цитат и определений

4.1. Элемент <abbr>

Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.

Для элемента доступны ‎глобальные атрибуты.

4.2. Элемент <bdo>

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

Для элемента доступен атрибут dir.

4.3. Элемент <blockquote>

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.

Для элемента доступен атрибут cite.

4.4. Элемент <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки.

Для элемента доступен атрибут cite.

4.5. Элемент <cite>

Применяется для выделения цитат, названий произведений, сносок на другие документы.

Для элемента доступны ‎глобальные атрибуты.

4.6. Элемент <dfn>

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

Для элемента доступен атрибут title.

5. Абзацы, средства переноса текста

5.1. Элемент

Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхнее и нижнее внешнее поле margin, равное 1em, при этом поля соседних абзацев «схлопываются».

Для элемента доступны ‎глобальные атрибуты.

5.2. Элемент

Переносит текст на следующую строку, создавая разрыв строки.

Для элемента доступны ‎глобальные атрибуты.

5.3. Элемент <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.

Для элемента доступны ‎глобальные атрибуты.

Правки HTML-документа

HTML-элементы для редактирования документа

1. Элемент <ins>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты, а также необязательный атрибут cite, указывающий ссылку на источник цитаты или дополнительную информацию о редактировании, и datetime, определяющий дату и (необязательно) время изменения.

Элемент <ins> представляет собой добавления к документу, например, одного абзаца:

<aside>
    <ins>
        <p>Я люблю фрукты.</p>
    </ins>
</aside>

<<aside>
    <ins datetime="2005-03-16 00:00Z">
        <p>Я люблю фрукты.</p>
    </ins>
    <ins datetime="2005-03-16 00:00Z">
        Яблоки <em>вкусные</em>.
    </ins>
    <ins datetime="2007-12-19 00:00Z">
        Как и груши.
    </ins>
</aside>>

2. Элемент <del>

Категории контента: потоковое содержимое, текстовое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

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

<h2>Список дел</h2>
<ul>
    <li>Разгрузить посудомоечную машину</li>
    <li><del datetime="2009-10-11T01:25-07:00">Посмотреть лекции Уолтера Левина</del></li>
    <li><del datetime="2009-10-10T23:38-07:00">Скачать больше треков</del></li>
    <li>Купить принтер</li>
</ul>

3. Атрибуты, общие для элементов <ins> и <del>

Атрибут cite может использоваться для ссылки на документ, который объясняет изменение. Когда этот документ длинный, например, протокол собрания, авторам рекомендуется включать фрагмент, указывающий на конкретную часть этого документа, в которой обсуждаются изменения.

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

По материалам Edits

Форматирование текста | htmlbook.ru

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

Табл. 1. Теги для форматирования текста
Код HTML	Описание	Пример
<b>Текст</b>	Жирное начертание текста	Текст
<i>Текст</i>	Курсивное начертание текста	Текст
<sup>Текст</sup>	Верхний индекс	e=mc²
<sub>Текст</sub>	Нижний индекс	H₂O
<pre>Текст</pre>	Текст пишется как есть, включая все пробелы	Текст
<em>Текст</em>	Курсивный текст	Текст
<strong>Текст</strong>	Жирное начертание текста	Текст

Любые теги форматирования текста можно использовать совместно друг
с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом
используется сочетание тегов и 
(пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body>   
   <p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников. 
   <i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>. 
   Но вот беда — никто не смеет принять его вызов.</p>
 </body>
</html>

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

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов и 
сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body> 
  <p><b>Формула изумруда:</b>
  <i>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></i></p>
 </body>
</html>

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

Рис. 2. Нижний индекс в тексте

Теги и 
выполняют те же функции, что теги и ,
но написание последних короче, привычней и удобней.

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

HTML: Теги для текста | HTML самоучитель

В HTML есть теги для изменения внешнего вида текста, такие как и .
Они используются для выделения текста полужирным шрифтом или курсивом, такие
теги в HTML называются тегами для форматирования.

Форматирование текста

Этот пример демонстрирует, как вы можете отредактировать текст в HTML документе, используя специальные теги:


<html>
  <body>

    <p><b>Текст</b></p>
    <p><strong>Текст</strong></p>
    <p><em>Текст</em></p>
    <p><i>Текст</i></p>
    <p><small>Текст</small></p>
    <p>Это<sub> нижний индекс</sub> и <sup>верхний индекс</sup></p>

  </body>
</html>

Попробовать »

Тег <pre>

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


<html>
  <body>

    <pre>
      Он сохраняет авторское форматирование текста
      (оставляет без изменений)
      и делает шрифт моноширинным
    </pre>

  </body>
</html>

Попробовать »

Теги для отображения кода

Пример, показанный ниже, демонстрирует разницу вывода содержимого тегов на экран:


<html>
  <body>

    <p><code>Программный код</code>
      <br>
      <kbd>Ввод с клавиатуры</kbd>
      <br>
      <samp>Образец кода</samp>
      <br>
      <var>Выделение переменной</var>
    </p>
    <p>
      Эти теги обычно используются для того, чтобы показать на странице программный код
    </p>

</body>
</html>

Попробовать »

Тег <address>

Адрес является распространенным элементом многих HTML-документов, для выделения адреса на странице существует специальный тег <address>, отделяющий текст, заключенный в него, от всего остального содержимого.

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


<html>
  <body>

    <p>Вы можете найти меня на моем сайте</p>
    <address>
      <a href="www.puzzleweb.ru">Мой сайт для связи</a>
    </address>

  </body>
</html>

Попробовать »

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

Пример демонстрирует, как можно написать аббревиатуру или сокращение:


<html>
 <body>

    <p><abbr title="Неопознанный Летающий Объект">НЛО</abbr><br><br><br>
      Атрибут title нужен для всплывающей подсказки, она появляется
      при наведении курсора на аббревиатуру.
    </p>

  </body>
</html>

Попробовать »

Направление текста

Пример демонстрирует, как можно изменить направление текста:


<html>
  <body>

    <p>
      Тег bdo определяет направление текста - слева направо и наоборот.<br><br>
      <bdo dir="rtl">
        Это наш текст
      </bdo>
    </p>

  </body>
</html>

Попробовать »

Цитаты

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

В отличие от тега <q>, тег <blockquote> является блочным элементом, он предназначен для выделения длинных цитат, которые по объему больше похожи на целые абзацы. В большинстве браузеров текст элемента <blockquote> будет отображаться с небольшим отступом вправо и иметь разрывы строки до и после себя:


<html>
  <body>

    <p>Длинная цитата:</p>
    <blockquote>
      Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
      Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
    </blockquote>
    <p><b>Для длинных цитат браузер вставляет отступы со всех сторон. </b>
      <br><br>
      Короткая цитата: 
      <q>Это короткая цитата.</q><br>
      <b>Короткие цитаты заключаются в двойные кавычки.</b>
    </p>

</body>
</html>

Попробовать »

Удаленный и вставленный текст

Пример демонстрирует, как можно в документе пометить текст, который был удален (помечается как перечеркнутый) или вставлен (помечается как подчеркнутый):


<html>
  <body>

    <p>
      Содержимое тега del, большинство браузеров отображает <del>перечеркнутым</del>, а 
      содержимое тега ins - <ins>подчеркнутым</ins>
    </p>

  </body>
</html>

Попробовать »

Примечание: также подчёркивание и перечёркивание можно задать с помощью CSS свойства text-decoration.

HTML теги оформления текста | Vaden Pro

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

Сразу отмечу, что все элементы для форматирования текста рассмотренные в данной статье (кроме br) являются парными. Тоесть для обрамления содержимого тегом должен присутствовать как открывающий тег , так и закрывающий Ваш_тег>. Пример:

<h4>Правильно написанный заголовок текста</h4>
<p>Абзац с переносом строки посреди абзаца.<br> Пример использования непарного тега внутри парного.</p>

Формирование структуры текста (блочные элементы). Теги заголовков и абзацев.

Теги h2-h6 отвечают за выделение текста в виде заголовков. Более подробно о их семантичеком влиянии и важности для построения логической структуры страницы для поисковиков написано тут.

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

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

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

HTML теги для разметки текста (строчные элементы)

span — схож по своему смыслу с тегом p, но является строчным элементом. Обычно используется для обозначения части текста внутри абзаца. Зачем это нужно? Все достаточно просто- обозначенному тексту в дальнейшем через CSS можно задать оформление отличающееся от оформления остального текста.
br -делает перенос строки. ТЕГ НЕ ПАРНЫЙ (тобишь закрывающего тега у него нет). Примерно то же самое, что если бы Вы нажали Enter в Верде. В отличие от переноса, создаваемого блочными элементами, не несет на себе никакой логической нагрузки. Используется исключительно для более красивого оформления текста. Рекомендуется избегать его использования без крайней необходимости, поскольку по-сути он просто засоряет код, а для переносов в тексте нужно его просто разбивать на абзацы.
strong — выделяет шрифт жирным. Служит для расстановки логических ударений в тексте для поисковых роботов. Широко используется для внутренней оптимизации текста. Ключевые фразы в тексте рекомендуется обрамлять в этот тег, чтобы робот лучше понимал о чем статья. ВНИМАНИЕ! Важно не переборщить – если схожие ключи в тексте попадаются больше 3-5 раз, то это может быть расценено как переоптимизация текста и страница с текстом будет занижена в поисковой выдаче.
b — визуально ничем не отличается от стронга, но не несет в себе никакой смысловой нагрузки для поисковика. Используется для выделения частей текста исключительно для тех, кто будет его читать. К примеру, если необходимо выделить фразу не содержащую ключевых слов, но способную облегчить понимание структуры текста пользователю.
em — делает текст внутри тега курсивом. Также как и стронг используется для внутренней оптимизации текста под поисковое продвижение, только обладает меньшим весом в сравнении с ним.
i — визуально ничем не отличается от . Не несет смысловой нагрузки для роботов, используется для увеличения удобства прочтения текста пользователями. Аналог тега , только для курсива.
ins— используется для подчеркивания текста. Выделяет текст как для пользователя, так и для поисковика.
u — визуально тождественен предыдущему тегу. Выделяет текст только для пользователя.
tt — выводит текст моноширинным шрифтом. Не несет в себе смысловой нагрузки. Моноширинный означает, что для всех символов шрифта ипользуется одинаковое пространство при написании.
pre — блочный элемент. Используется для того, чтобы сделать моноширинными большие участки текста. Внутри него можно применять любые теги для форматирования текста, кроме sub и sup.
sub — выводит текст как нижний индекс ( уменьшает шрифт текста и выводит его немного ниже уровня строки).
sup — выводит текст как верхний индекс ( уменьшает шрифт текста и выводит его немного выше уровня строки).
strike (s) – делает текст перечеркнутым. Эти два тега абсолютно аналогичны по своему содержанию. Современная документация html вообще осуждает их использование, говоря о том, что для перечеркнутого текста можно использовать css, а эти теги больше просто засоряют код.

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

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

<p><b><i>Жирный текст написанный курсивом</i></b></p> <!--Верно-->
<p><b><i>Жирный текст написанный курсивом</b></i></p> <!--Не верно-->

Теги находящиеся внутри других тегов формируют порядок вложенности. Так, в рассмотренном примере тег i имеет второй уровень вложенности относительно тега p.

ОБРАТИТЕ ВНИМАНИЕ! Использовать строчные элементы внутри блочних разрешено, в то время как блочные внутри строчных- нет. Хоть браузер и отразит все корректно, если Вы, к примеру, используете тег p внутри тега b. Это будет не верно с точки зрения документации html. Тобишь такой код будет содержать ошибку и Вы это можете спокойно проверить воспользовавшись любым сервисом валидации html кода.

Вопросы для самоконтроля:

Какие теги форматирования текста являются блочными, а какие строчными? В чем между ними разница?
Какие существуют способы выделения текста жирным шрифтом? В чем между ними разница?
Какие существуют способы выделения текста курсивом? В чем между ними разница?
Как правильно переносить строки в html?
Как формируется порядок вложенности тегов?

Оценок: 5 (средняя 4.2 из 5)

21413 просмотров

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

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

К тегам форматирования текста в HTML можно отнести теги изменяющие отображение выделенного фрагмента.

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

— важный фрагмент текста, жирный;
 — акцентирование внимания, курсив;
 — подсвеченный участок текста;
 — жирный шрифт;
 — курсив, наклонный шрифт;
<s> — зачеркнутый текст;
 — текст меньшего размера;
 — верхний индекс;
 — нижний индекс;
<pre> — предварительно отформатированный текст;
<dfn> — термин;
<h2> — <h6> — заголовки;
<q> — короткая внутристрочная цитата;
<blockquote> — цитата;
<cite> — сноска на название материала;
<code> — программный код;
<samp> — результат вывода компьютерной программы;
<kbd> — клавиатурный ввод;
<var> — переменная компьютерной программы.;
<time> — дата и/или время.

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

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

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

<strong>Важный фрагмент текста</strong>

Тег используется для акцентирования внимания, «подчеркивания» фрагмента текста. Браузеры обычно отображают текст внутри тега курсивом. — тег логического выделения.

<em>Акцентированный фрагмент</em>

Тег используется для подсветки фрагмента текста.

<mark>Подсвеченный фрагмент</mark>

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

<b>Текст жирным шрифтом</b>

Тег используется для написания текста курсивом. Используйте тег только если характер выделения не подходит под другой тег форматирования текста по смыслу.

<i>Текст курсивом</i>

Тег <s> используется для указания некорректности, неактуальности выделенного фрагмента. Текст внутри тега <s> выводится перечеркнутым.

<s>Перечеркнутый текст</s>

Тег используется для написания текста шрифтом меньшего размера.

<small>Текст меньшего размера</small>

Тег используется для создания текста нижнего индекса.

<sub>Текст нижнего индекса</sub>

Тег используется для создания текста верхнего индекса.

<sup>Текст верхнего индекса</sup>

Тег <pre> указывает, что текст внутри должен быть выведен в том формате, в котором он был написан в редакторе: с учетом количества пробелов между словами и сохранением позиции строк.

<pre>Предварительно отформатированный текст</pre>

Теги устанавливающие суть содержимого

Теги <h2> — <h6> указывают, что содержимое является заголовком (подзаголовком). <h2> — заголовок наиболее высокого уровня, <h6> — наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.

<h2>Заголовок</h2>

Тег <dfn> указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега <dfn> курсивом.

<dfn>Термин</dfn>

Тег <q> используется для указания на короткий процитированный участок внутри строки текста. Браузеры обычно выводят содержимое тега в кавычках.

<q>Короткая цитата</q>

Тег <blockquote> указывает, что содержимое является цитатой. Содержимое тега выводится в отдельном блоке.

<blockquote>Цитата</blockquote>

Тег <cite> указывает, что содержимое является названием материала. Браузеры обычно отображают текст внутри <cite> курсивом.

<cite>Название материала</cite>

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

<code>Код компьютерной программы</code>

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

<samp>Результат вывода компьютерной программы</samp>

Тег <kbd> указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега <kbd> моноширинным шрифтом.

<kbd>Клавиатурный ввод</kbd>

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

<var>Переменная компьютерной программы</var>

Тег <time> указывает, что содержимое является датой, временем, периодом времени или событием, относящемся к указаному в атрибуте datatime времени.

<time>Дата и/или время</time>

Фразовые теги в HTML. Размечем тексты с помощью фразовых… | by Tatiana Fokina

Как уже сказала выше, форматирование делится на визуальное и логическое. За визуальное форматирование отвечают теги визуального форматирования, за логическое — теги логического форматирования. Последние называют ещё семантическими.

К тегам визуального форматирования относятся:

;
;
  и ;
;
;
 и ;
<ruby>;
;
<s>.

А это список тегов логического форматирования:

<a>;
;
;
<cite>;
<code>;
<abbr>;
<dfn>;
<ins>;
<del>;
<q>;
<kbd>;
<samp>;
<var>;
<time>;
;
<bdi> и <bdo>.

Сейчас расскажу подробнее о каждом фразовом элементе.

span — это контейнер для текста.

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

Со span можно использовать атрибуты class="", title="", lang="" и xml:lang="". Последний — это аналог lang в XHTML-документах.

-- HTML --
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в <span>страшное насекомое</span>.-- CSS --
.scary {
color: tomato;
}

Так отобразится этот текст в браузере:

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

Это исключение — трюк с атрибутом lang="". Если в тексте есть иностранные слова, то можно оборачивать их в span с указанием другого языка. Тогда скринридер прочтёт их с правильным произношением.

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

<html lang="ru">
...
<body>
...
...
<p>Я больше не мёрджу бездумно. Как говорится, <span lang="en"> enough is enough</span>.
</p>

По умолчанию фраза внутри span не будет отличаться от остального текста.

и

br (break) переносит строку с текстом точно в том месте, где его поставили. При этом отдельный абзац не создаётся.

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

Это одиночный тег и его не нужно закрывать.

Я сидел на пустом берегу.<br>Голубая вода Онтарио отражала череду моих мыслей —<br>Мир и войну, и мёртвых, навеки ушедших во тьму, чтобы воцарился мир.

В браузере этот текст выглядит так:

wbr (word break opportunity) ставит потенциальный разрыв строки.

Если у вас слишком длинные слова или URL-адреса, то смело используйте wbr. Он подходит для случаев, когда вы не уверены в месте переноса строки.

wbr тоже одиночный тег.

Сэло не удивился, узнав, что солнечные пятна действуют на его друзей, попавших в хроно<wbr>-синкластический инфундибулум.

Закрепим: тег br переносит строку сразу. С wbr браузер сначала анализирует ширину контейнера, а уже потом ставит перенос.

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

Эйя&shy;фьядла&shy;йёкюдль

Перенос сработает, когда ширина контейнера уменьшится.

<a></a>

a — ссылка.

С а всё просто. Используйте этот тег для ссылок на другие сайты или внутри одной страницы.

Простой пример использования:

<a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D0%BF%D0%B8%D0%B1%D0%B0%D1%80%D0%B0" target="_blank" rel="noopener noreferrer">Статья про капибар</a>

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

Автоматический стиль ссылки в ChromeСтиль ссылки в FirefoxСсылка в Internet Explorer 11Ссылка в Microsoft Edge

Важно, чтобы ссылки точно описывали куда они ведут. Куда вы попадёте, кликнув по «Подробнее» или «Далее»? Нужно прочитать весь текст, чтобы это понять. У пользователей скринридеров тоже возникнут проблемы.

Для тех, кому важно сохранить лаконичность ссылок, Аарон Густафсон предлагает такой выход:

<a href="/speaking-engagements/">
<b>A List of My</b>
Speaking
<b>Engagements</b>
</a>

В примере текст ссылки скрывается на уровне CSS. То есть он будет доступен для пользователей со скринридерами, но не отобразится в браузере из-за свойств display: none; или visibility: hidden;.

При клике по ссылке новая страница открывается в том же самом окне. Этим поведение можно управлять с помощью атрибута target="".

В примере ссылке задано значение _blank. Это значит, что она откроется в новом окне. В этом случае обязательно указывайте rel="noopener noreferrer". Это поможет пользователям избежать фишинговых атак.

Якорные ссылки — это ссылки внутри одного документа.

Расставить такие ссылки просто. Для слова, к которому ведёт якорь, задайте id="". Для якоря укажите путь через атрибут href="#нужный-id". Ссылку для скринридеров можно описать в атрибуте aria-label="". Закрепим на примере:

В следующем <a href="#fat-cat" aria-label="Стрижка котов">параграфе</a> я подробнее расскажу о том, как правильно стричь кошек в теле.<a>Грумминг толстых котов</a>

Тег a — важная часть логической разметки.

и

em (emphasis) — эмфатическое ударение.

Эмфатическое ударение — выделение слова интонацией для усиления эмоциональной выразительности.

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

Эмфатическое ударение может понадобиться при уточнении или исправлении неверного слова, например, когда речь идёт о распространённом заблуждении. Ещё его используют, когда приводится контраргумент, чтобы выделить его значимую часть. Также эмфатическое ударение используется в сарказме. Ещё один случай использования — намёки.

Слово, на котором стоит эмфатическое ударение, может изменить значение всего предложения.

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

-- Пример 1 --
Нет, это <em>он</em> выложил релиз в прод (не я).-- Пример 2 --
Да, мне <em>определённо</em> не хватает для полного счастья системной красной волчанки.-- Пример 3 --
На корабле что-то есть. <em>Нам нужно срочно эвакуироваться!</em>

Текст внутри em выделяется курсивом.

Это тег логического форматирования. Поэтому скринридеры и голосовые помощники произнесут слово «он» с особой интонацией.

i (italic) делает текст наклонным.

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

-- Пример 1 --
<i>Низкоуровневый язык программирования</i> — язык программирования, близкий к программированию непосредственно в машинных кодах используемого реального или виртуального процессора.-- Пример 2 --
Пришлось читать документацию, <i lang="fr">c'est la vie</i>.

Такой текст выделяется курсивом:

Если пишите слова на иностранном языке, то для i можно задать атрибут lang="" или xml:lang="" в XHTML-документах. Это поможет скринридерам и поисковым роботам.

Я работаю простым <i lang="en">cleaning manager</i>.

👉 Запомните, em — семантический тег, а i нет.
Об особенностях использования и различиях em и i подробно написал Факундо Коррадини в статье «You’re using wrong».

и

strong — логическое ударение.

Логическое ударение — выделение слова интонацией для усиления его смысла или повышения значимости.

С помощью strong подчёркивают важность слов и предложений.

Придумайте пароль. Не 1234 или qwerty. <strong>Никому не сообщайте его!</strong>

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

b (bold) делает текст полужирным.

Тег b используют для визуального форматирования. Он не усиливает смысловой вес слов, в отличие от strong.

Используйте b, если нужно выделить названия книг, фильмов, имён, ключевые слова и тому подобное. В статьях с его помощью выделяют лид — первый абзац статьи.

Играю в <b>The Elder Scrolls</b> со времён пылевых бурь и скальных наездников.

В браузере строчка отобразится так:

👉 strong нужен для логического форматирования, а b — для визуального.

mark — контекстное выделение текста.

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

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

Используйте mark, когда нужно выделить какое-то важное для контекста слово, новый элемент в списке, показать текущую дату в календаре и совпадения с поисковыми запросами.

-- Пример 1 --
Изюму из Малаги. Всё думала про Испанию. Перед тем как Руди родился. Такая <mark>фосфоресценция</mark>, голубовато-зеленоватая. Для мозга очень полезно.-- Пример 2 --
Чаще обращайтесь к argumentum ad populum: «<mark>Все мои знакомые говорят</mark>, что пользуются YotaPhone и ездят на ё-мобилях».

Хотя с точки зрения семантики mark более значим, чем span, это всё равно тег визуального форматирования.

mark автоматически заданы стили background-color: yellow; и color: black;.

<s></s>

s зачёркивает текст.

Используйте s, когда нужно зачеркнуть неправильный или устаревший текст. Это может быть старая цена или неактуальное предложение. Олдскульные любители форумов и Хабра используют перечёркивание в шутках, построенных на оговорке.

2+2=<s>5</s> 4

К s применяется свойство text-decoration: line-through;.

Этот тег нужен исключительно для визуального форматирования и не учитывается поисковыми роботами и скринридерами. Чтобы последние объявляли зачёркивание, спецификация рекомендует задавать псевдоклассам ::before и ::after нужное значение свойства content.

Вместо s можно использовать CSS. Задайте элементу text-decoration: line-through;.

-- HTML --
Невероятное предложение! Коробок спичек всего за <span>1000 $</span> 999 $.-- CSS --
.crossout {
text-decoration: line-through;
}

В браузере строка отображается так:

Раньше тексты можно было зачеркнуть с помощью тега strike. Сейчас он исключён из спецификации.

👉 s не подходит, если нужно нужно определить, когда и почему был удалён текст. В этом случае используйте del.

u (underline) подчёркивает текст.

Случаев использования u не так много. Чаще всего его используют для выделения слов с орфографическими ошибками и для подчёркивания имён собственных в китайском языке. Это могут быть географические названия, организации, имена.

Во втором случае в тег взято название страны 德國 — Германии.

-- Случай 1 --
Мышь (кр<u>о</u>дётся).-- Случай 2 --
我來自<u>德國</u>。

К содержимому u применяется свойство text-decoration: underline;.

Этот тег отвечает за визуальное форматирование.

👉 Не используйте u, если подчёркнутый текст можно перепутать со ссылкой.

<ins></ins> и <del></del>

ins (insert) определяет добавленный в документ текст.

Используйте ins когда нужно показать, какой текст был добавлен во время последнего обновления страницы.

С этим тегом можно использовать атрибуты cite="" и datetime="". Вcite пишут адрес документа, который объясняет, почему текст добавлен или отредактирован.
В datetime пишут дату и время редактирования или удаления текста. Формат: год-месяц-деньTчас:минуты:секунды:часовой пояс.

<ins cite="https://ru.wikipedia.org/wiki/Falcon_Heavy" datetime="2018-03-06T01:32:03Z">Апдейт. Falcon Heavy успешно запустили.</ins>

Браузер подчеркнёт этот текст.

del (delete) определяет удалённый или потерявший актуальность текст.

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

Для del доступны те же атрибуты, что и для ins: cite="" и datetime="".

<del>Маск не запустит Falcon Heavy.</del>

В браузере текст отобразится как зачёркнутый.

Когда в документе заменяют часть содержимого, то ins используют вместе с del.

<del>Маск вряд ли запустит Falcon Heavy.</del> 
<ins cite="https://ru.wikipedia.org/wiki/Falcon_Heavy" datetime="2018-03-06T01:32:03Z">Первый испытательный запуск Falcon Heavy был успешно произведён 6 февраля 2018 года.</ins>

Этот код глазами браузера.

ins и del нужны для логического форматирования.

<q></q>

q (quote) — короткая цитата.

Используйте q, когда дословно цитируете кого-то в предложении.

Для q можно задать атрибут cite="", в котором указывается источник цитаты.

Митник прав: <q cite="https://www.livelib.ru/book/1000092721-iskusstvo-obmana">Это естественно — стремиться к абсолютной безопасности, но это желание заставляет многих людей соглашаться с ложным чувством защищённости</q>.

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

Браузеры добавят для такого текста двойные кавычки.

q {
display: inline;
}q:before {
content: open-quote;
}q:after {
content: close-quote;
}

Так браузер отобразит текст внутри q.

Отображение <q></q> в Chrome

Минутка типографики. Браузеры автоматически ставят английские двойные кавычки “…”. Их используют в английском для оформления цитат.

q {
quotes: "\201c" "\201d";
}

Русская типографика отличается от английской. Вместо английских кавычек принято использовать французские — ёлочки. Они выглядят так: «…».

Чтобы заменить стандартные кавычки, задайте для свойства quotes значение “\00ab” “\00bb”;.

q {
quotes: "\00ab" "\00bb";
}

Вуаля.

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

<cite></cite>

cite — источник цитаты.

Оборачивайте в cite цитируемые названия книг, статей, игр, фильмов, сериалов и любые ссылки на другие источники. Исключение — имена авторов. Для имён используйте b.

Аарон Густафсон написал книгу <cite>Adaptive Web Design</cite> в 2011 году. В ней он …

Содержимое тегаcite отображается по умолчанию курсивом.

Тег cite семантический.

<abbr></abbr>

abbr (abbreviation) — аббревиатура или акроним.

Аббревиатура — слово, образованное сокращением слова или словосочетания. Примеры: ГЭС и ФСБ.

Акроним — вид аббревиатуры. Акронимы образуются начальными звуками слов, которые входят в сокращение. Примеры: W3C, A11Y и Бенилюкс.

В abbr можно можно раскрыть аббревиатуру в атрибуте title="".

<abbr title="Hypertext Markup Language">HTML</abbr> — это стандартизированный язык разметки документов в вебе.

Браузер подчеркнёт слово пунктирной линией, а при наведении появится всплывающая подсказка.

В чёрной оптимизации title использовали не по назначению. Из-за этого современные скринридеры игнорируют содержимое атрибута. Поэтому лучше раскрывать аббревиатуру при первом упоминании в самом тексте без title="".

<dfn>Hypertext Markup Language (HTML)</dfn> — это стандартизированный язык разметки документов в вебе.

Тег abbr семантический.

Помните, одна аббревиатура — один abbr. Если сокращение повторяется, то не надо его ещё раз оборачивать в этот тег.

👉 Раньше для акронимов использовали отдельный тег acronym, но он был исключён из последней версии стандарта. Так что пользуйтесь abbr и не ломайте голову над видом аббревиатуры.

<dfn></dfn>

dfn (definition) — термин.

Используйте этот тег для терминов, которые упоминаете впервые.

В dfn можно вкладывать abbr, если это термин-аббревиатура.

<dfn><abbr>HTML</abbr></dfn> — это стандартизированный язык разметки документов в вебе.

Вместе с dfn можно использовать атрибут title="". В нём приводится определение термина.

Во втором примере в dfn вложен abbr. В этом случае аббревиатура раскрывается в атрибуте title="".

-- Пример 1 --
<dfn>Капибара</dfn> — полуводное травоядное млекопитающее из семейства водосвинковых.-- Пример 2 --
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> — это стандартизированный язык разметки документов в вебе.

В браузере текст станет наклонным.

dfn — тег логического форматирования.

<code></code>

code — фрагмент компьютерного кода.

Используйте code для названий элементов языков программирования или целых строк кода.

Тег <code>code</code> используется для того, чтобы показать фрагмент JS-кода.

Отображается как текст, написанный моноширинным шрифтом.

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

<pre>
<code> ul
each val in [1, 2, 3, 4, 5]
li= val
</code>
</pre>

Получим такое форматирование:

Тег code нужен для логического форматирования.

<samp></samp>

samp (sample) — результат вывода компьютерной программы или скрипта.

Тег samp полезен, когда в тексте цитируются системные ошибки и приводятся примеры вывода данных системой.

<p>Поиск выполнен.</p>
<p>
<samp>Обработано объектов: 82.<br>
Найдено подходящих объектов: 2.
</samp>
</p>

Браузеры сделают текст моноширинным.

samp можно комбинировать с pre и code.

<pre>
<code>console.log(2.3 + 2.4)<br></code>
<samp>4.699999999999999</samp>
</pre>

Получим такой текст:

samp — тег логического форматирования.

👉 Тег tt (TeleType) выполняет похожую функцию. Не используйте его. Он устарел и исключён из стандарта.

<kbd></kbd>

kbd (keyboard) — названия клавиш.

Используйте kbd, если пишите названия клавиш и голосовые команды.

Чтобы выйти, нажмите сначала <kbd>Esc</kbd>, потом <kbd>:</kbd>, затем <kbd>q</kbd> и <kbd>Enter</kbd>.

Если нужно написать сочетание из нескольких клавиш, то вложите дочерние kbd в общий контейнер.

Скопируйте, нажав <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>.

Текст внутри kbd написан моноширинным шрифтом.

kbd может содержать тег samp или быть вложенным в него.

В kbd вкладывают samp, если нужно показать входные данные в виде текста, который отображается системой. Простой пример — это названия кнопок или пунктов и подпунктов меню в программах. В примере так указан путь к нужному пункту меню:

Найдите пункт с настройками по пути
<kbd>
<kbd><samp>File</samp></kbd> → 
<kbd><samp>Settings</samp></kbd>
</kbd>

Так отобразит текст браузер.

В samp вкладывают kbd, когда нужно показать как система интерпретировала пользовательский ввод.

<p>
<samp>yarn start:theproject does not exist, did you mean:</samp>
</p>
<blockquote>
<samp>
<kbd>yarn start:the-project</kbd>
</samp>
</blockquote>

Браузер использует для текста всё тот же моноширинный шрифт:

Тег kbd нужен для логического форматирования.

<var></var>

var (variable) — переменная.

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

-- Пример 1 --
У нас есть <var>число 1</var> и <var>число 2</var>.-- Пример 2 --
Она написала <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.

Браузеры выделят var курсивом.

👉 Для сложных математических формул и расчётов используйте специальный язык разметки MathML.

small — дополнительная информация.

Используйте small для небольших сносок и комментариев. Это могут быть предостережения, оговорки, информация о лицензии, авторских правах и тому подобное.

<p><small>© 2013-2018, команда капибар</small></p>

Размер small зависит от основного размера шрифта и гарнитуры. К тегу применяется свойство font-size: smaller;, которое уменьшает шрифт на одну условную единицу.

Можно вкладывать один тег small в другой.

<p>Всем, всем, всем!
</p>
<p>
<small> У нас самая выгодная ставка по ипотеке. 
<small>Предложение действительно, если ваш доход выше 100 веточек в месяц.
</small>
</small>
</p>

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

👉 Раньше small использовался для физического форматирования вместе с big. В последней спецификации он приобрёл семантическое значение, а big был исключён. Вместо big спецификация рекомендует использовать CSS.

и

sup (superscript) — надстрочный текст.

Надстрочным текстом пишут сноски или математические знаки и символы.

-- 1 пример --
В день нужно платить всего 0,666 % <sup>*</sup>-- 2 пример --
a<sup>n</sup> × a<sup>k</sup>= a<sup>n+k</sup>

Надстрочный текст расположен над базовой линией, а его высота в два раза меньше основного. К sup по умолчанию применяются свойства vertical-align: super; и font-size: smaller;.

sub (subscript) — подстрочный текст.

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

H<sub>2</sub>SO<sub>4</sub>

Подстрочный текст меньше в высоту и располагается ниже базовой линии. По умолчанию sub заданы свойства vertical-align: sub; и font-size: smaller;.

👉 Для сложных математических формул используйте язык разметки MathML.

<ruby></ruby>

ruby — верхняя или нижняя текстовая аннотация.

Тег связан с агатом — типографским шрифтом, размер букв в котором равен 5,5 пунктам.

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

Внутрь ruby вкладываются теги rt и rp.
В rt размещается аннотация к тексту.
Тег rp нужен для аннотаций для браузеров, которые не поддерживают ruby. Если браузер поддерживает ruby, то текст не отобразится.

<ruby>  
東 <rt>tō</rt>
京 <rt>kyō</rt>
</ruby>

Браузеры разместят один текст над другим и уменьшат надстрочный шрифт.

Токио!

Можно вкладывать один элемент ruby в другой. В этом примере указана транскрипция слов на хирагане и английском языке.

<ruby>
<ruby>東
<rt>とう</rt>南
<rt>なん</rt>
</ruby>
<rt lang=en>Southeast</rt>
</ruby>の方角

Текст в браузере отобразится так:

«Юго-восточное направление»

Тег ruby нужен для визуального форматирования.

<bdo></bdo> и <bdi></bdi>

bdo (bi-directional override) — изменение направления текста.

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

В bdo обязательно нужно указывать атрибут dir="", который задаёт направление текста:
rtl — справа налево;
ltr — слева направо.

<bdo dir="rtl">קביברה</bdo> в переводе с иврита означает «капибара».

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

bdi (bi-directional isolate) — отмена изменения направления текста.

Используйте bdi для слов, которых не должно касаться изменение направления текста. Это полезно, когда направление текста заранее не известно или есть слова из языка с другим направлением.

В примере в тексте на иврите есть слово на английском, которое нам не нужно разворачивать.

-- HTML --
<div><bdi>C++</bdi> היא שפת תכנות מרובת פרדיגמות המבוססת על שפת התכנות C‏, שפותחה בשנות ה־80.-- CSS --
.content-rtl {
direction: rtl;
}

По умолчанию для bdi задан атрибут dir="auto".

Поведение bdi можно заменить стилями. Примените к span правило unicode-bidi: isolate;. Только помните, что в этом случае браузер не сможет понять семантику, которая передаётся с помощью bdi.

👉 На сентябрь 2018 bdi поддерживается браузерами частично.

<time></time>

time — дата и время в машиночитаемом формате.

Используйте time, если в тексте указаны точные даты и время. Это может быть время отправки комментария или сообщения, расписание, архив, календарь.

Этот тег не стоит использовать, если:

Внутри time можно использовать несколько атрибутов:
datetime="" — дата и время в машиночитаемом формате;
pubdate="" — дата публикации документа;
title="" — дополнительная информация.

Время указывается внутри time или в атрибуте datetime. Во втором примере в datetime указаны число и месяц.

-- Пример 1 --
<time>2 ноября 2018 года</time>.-- Пример 2 --
Акции Tesla упали из-за поведения Илона Маска в прямом эфире в <time datetime="09-07">в эту пятницу</time>.-- Пример 3 --
Мем опубликован <time title="Понедельник, 12-50">7 часов назад</time>.

Браузер отобразит эти строки как обычный текст. Содержимое атрибута title станет всплывающей подсказкой.

Формат времени в datetime="" жёстко определён.

Год: 1985.
Должен состоять из четырёх и более цифр.
Год и неделя: 1984-W38.
W — номер недели.
Год и месяц: 1985-10.
Год, месяц, день: 1985-10-25.
Месяц и день: 10-25.
Часы и минуты: 1:15.
Часы, минуты, секунды: 1:15:39.
Часы, минуты, доли секунд: 1:54:39.929.
Доли нужно округлять до трёх знаков.
Дата и время, разделённые «T» или пробелом: 1985-10-25T1:15. Время можно указывать с секундами и долями секунд: 1985-10-25T1:15:39.
Часовой пояс можно задать несколькими способами: Z или +0000, +00:00, -0800, -08:00.
Двоеточие можно не использовать.
Местная дата и время: 1985-10-25T1:15Z.
Временной интервал: P2T4h28M3S.
P, количество дней, T, количество часов (H), минут (M) и секунд (S). Дни и часы можно не указывать.
Временной интервал можно указать другим способом: 1w 2d 2h 30m 10.501s.
w — недели, d — дни, h — часы, m — минуты, s — секунды.
Можно писать слитно, а буквы могут быть в любом регистре.

В спецификации есть полный список форматов записи времени.

time нужен для логического форматирования и важен для поисковиков. Благодаря этому тегу ссылки в поисковой выдачи размещаются в хронологическом порядке.

Браузеры автоматически преобразовывают дату из григорианского календаря в другую систему исчисления времени. Например, японский браузер покажет <time>16:00</time> как «16:00時». «時» означает «час».

И немного информационного дизайна. В блоге UX-дизайнера Михаила Озорнина есть советы о том, как писать дату и время в интерфейсах.

Фразовые теги — это важная часть HTML-разметки. Эти теги отвечают за визуальное и логическое форматирование. Благодаря этому тексты становятся понятными для пользователей и разных технологий.

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

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

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

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

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

Цветовые коды

HTML — Простое руководство по HTML

И коды цветов HTML (шестнадцатеричные значения), и их названия цветов CSS показаны в таблице ниже.

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

AntiqueWhite

9007 # FAEWhite

F0FFFF

97 F0007

0

Coral FF7F50

0019

DarkCyan

B8860B

Darkorange

chid

DarkSalmon

900io18 DarkSlateGray 900io18 DarkSlateGray 9001

Fhite

0

Gainsboro

# F8F8FF

LightGrey

AquaMarine

MediumPurple

9000Drab 6B8E23

# DA70D

Перу

# 9000reenEBrown

# 9000reenE

900FF16

# Бирюза

9001 8 Фиолетовый

Имя цвета CSS	HTML HEX-код	Поле образца цвета	Образец слова
AliceBlue	# F0F8FF		AliceBlue
AntiqueWhite		AntiqueWhite 9007 # FAE
Аква	# 00FFFF		Аква
Аквамарин	# 7FFFD4		Аквамарин
Лазурный	# F0FFFF		Лазурный
	Лазурный
	Бежевый
Бисквитный	# FFE4C4		Бисквитный
Черный	# 000000		Черный
Бланшированный Миндаль	Бланшированный	#FFEBCD	Бланшированный Синий	# 0000FF		Синий
СинийViolet	# 8A2BE2		СинийViolet
Коричневый	# A52A2A		Коричневый
BurlyWood	BurlyWood	BurlyWood
CadetBlue	# 5F9EA0		CadetBlue
Chartreuse	# 7FFF00		Chartreuse
Шоколад	# D2691E		Coral
CornflowerBlue	# 6495ED		CornflowerBlue
Cornsilk	# FFF8DC		Cornsilk
Crimson
Crimson
Crimson
Голубой	# 00FFFF		Голубой
DarkBlue	# 00008B		DarkBlue
DarkCyan	# 008B8B
DarkCyan		DarkGoldenRod
DarkGray	# A9A9A9		DarkGray
DarkGreen	# 006400		DarkGreen
	DarkKhaki
DarkMagenta	# 8B008B		DarkMagenta
DarkOliveGreen	# 556B2F		DarkOliveGreen
DarkOliveGreen		# FF8C00
# FF8C00	# 9932CC		DarkOrchid
DarkRed	# 8B0000		DarkRed
DarkSalmon	# E9967A		DarkSalmon
900BC
DarkSeaGreen
DarkSlateBlue	# 483D8B		DarkSlateBlue
DarkSlateGray	# 2F4F4F		DarkSlateGray
DarkSlateGray
# 9400D3		DarkViolet
DeepPink	# FF1493		DeepPink
DeepSkyBlue	# 00BFFF		DeepSkyBlue
9	# 696969		DimGray
DodgerBlue	# 1E90FF		DodgerBlue
FireBrick	# B22222		FireBrick		F	F		F		F	Цветочный Цветочно-белый
Лесозеленый	# 228B22		Лесозеленый
Фуксия	# FF00FF		Фуксия
Гейнсборо	Gainsboro	Gainsboro	Gainsboro	Gainsboro	#DCDCDC	#DCDCDC	#DCDCDC	#DCDCDC		GhostWhite
Золото	# FFD700		Золото
GoldenRod	# DAA520		GoldenRod
Серый	#
Зеленый	# 008000		Зеленый
Зеленый Желтый	# ADFF2F		Зеленый Желтый
HoneyDew	# F0FFF0		HoneyDew	Hotink FF69B4		HotPink
IndianRed	# CD5C5C		IndianRed
Индиго	# 4B0082		Indigo
IvoryFF		IvoryFF		IvoryFF
Хаки	# F0E68C		Хаки
Лаванда	# E6E6FA		Лаванда
ЛавандаБлаш	# FFF0F5		Лаванда		Лаванда		Лаванда		LawnGreen
Лимонный шифон	#FFFACD		Лимонный шифон
LightBlue	# ADD8E6		LightBlue
LightCoral		LightCoral	LightCoral	LightCyan	# E0FFFF		LightCyan
LightGoldenRodYellow	# FAFAD2		LightGoldenRodYellow
LightGrey	# D3D3D3		LightGreen
LightPink	# FFB6C1		LightPink
LightSalmon	# FFA07A		LightSalmon
LightSeaGreen	# 2019		LightSeaGreen
LightSkyBlue	# 87CEFA		LightSkyBlue
LightSlateGray	# 778899		LightSlateGray
LightSlateGray
Blue LightSteSte
Blue LightSte LightYellow	# FFFFE0		LightYellow
Лайм	# 00FF00		Лайм
LimeGreen	# 32CD32		LimeGreen
LimeGreen
# Лен	Лен
Пурпурный	# FF00FF		Пурпурный
Бордовый	# 800000		Бордовый
MediumAquaMarine	# 66CDAA	Medium
MediumBlue	# 0000CD		MediumBlue
MediumOrchid	# BA55D3		MediumOrchid
MediumPurple		MediumPurple		# 93707		# 937019 MediumPurple	# 937019 MediumPurple	# 937019 # 3CB371		MediumSeaGreen
MediumSlateBlue	# 7B68EE		MediumSlateBlue
MediumSpringGreen	# 00FA9A	MediumSlate	Green # 00FA9A		MediumSlate	Medium
MediumVioletRed	# C71585		MediumVioletRed
MidnightBlue	# 1		MidnightBlue
MintCream	# F5FFFA		MintCream
MistyRose	# FFE4E1		MistyRose
Мокасины	# FFE4B5		Moccasin	Nava	Nava	Nava	Nava	Nava	Nava	Nava	Nava	Nava
Navy	# 000080		Navy
OldLace	# FDF5E6		OldLace
Olive	# 808000		Olive
	OliveDrab
Orange	# FFA500		Orange
OrangeRed	# FF4500		OrangeRed
Orchid
Orchid	# DA70D
PaleGoldenRod	# EEE8AA		PaleGoldenRod
PaleGreen	# 98FB98		PaleGreen
PaleTurquoise	#AFEEEE 0		Paleioed		PaleVioletRed
PapayaWhip	# FFEFD5		PapayaWhip
PeachPuff	# FFDAB9		PeachPuff
	Peru
Peru	# FFC0CB		Розовый
Слива	# DDA0DD		Слива
PowderBlue	# B0E0E6		PowderBlue 0
# Purple
		Фиолетовый
Красный	# FF0000		Красный
RosyBrown	# BC8F8F		RosyBrown
RoyalBlue	# 4169E1	RoyalBlue	# 4169E1	RoyalBlue	# 4169E1	RoyalBlue	# 4169E1	RoyalBlue SaddleBrown	# 8B4513		SaddleBrown
Лосось	# FA8072		Лосось
SandyBrown	# F4A460		SandyBrown

SeaShell
SeaShell	# FFF5EE		SeaShell
Сиенна	# A0522D		Сиена
Серебро	# C0C0C16	Серебро	# C0C0C0	Серебро	# C0C0C0	Серебро 9	# 87CEEB		SkyBlue
SlateBlue	# 6A5ACD		SlateBlue
SlateGray	# 708090		SlateGray	SlateGray	Snow
SpringGreen	# 00FF7F		SpringGreen
SteelBlue	# 4682B4		SteelBlue
Tan	# D2B48C		Tan	Tan # 008080		Чирок
Чертополох	# D8BFD8		Чертополох
Помидор	# FF6347		Помидор
	бирюза
# EE82EE		Фиолетовый
Пшеница	# F5DEB3		Пшеница
Белая	#FFFFFF		Белая
	Белая
5 FF	WhiteSmoke	WhiteSmoke
Желтый	# FFFF00		Желтый
YellowGreen	# 9ACD32		YellowGreen

Обратите внимание: Хотя основные названия цветов выше поддерживаются большинством браузеры, не все из них на самом деле являются действительными HTML или CSS, как указано W3C.См. Спецификацию CSS2 для получения дополнительной информации.

Шпаргалка по CSS

— Простое руководство по HTML

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

Не уверен, что такое CSS, возможно, сначала посмотрите введение в каскадные таблицы стилей 🙂

Использование стилей

Внешний файл CSS

В заголовке html

Встроенный в HTML

   Красный текст

Цвета и границы	Верх
цвет: красный ;	Цвет элемента — например. `красный \| # FF0000`
цвет фона: белый ;	Цвет фона элемента
background-image: url (image.gif) ;	Цвет фона элемента
цвет рамки: желтый ;	Граница Цвет элемента
Граница: 1px сплошной синий ;	Ширина, стиль и цвет границы определены вместе

Стили текста	Сверху
выравнивание текста: по левому краю;	Горизонтальное выравнивание — `слева \| центр \| справа`
текст-оформление: подчеркивание;	Текстовые украшения — например. `нет \| подчеркивание \| сквозное`
font-family: fontname ;	Font Face (Гарнитура) — например. `Verdana, Arial, Helvetica`
размер шрифта: 16pt;	Размер или высота шрифта — например. `12pt \| 15px`
font-weight: bold;	Толщина шрифта (полужирность) — например. `полужирный \| нормальный \| 200`

Размер и компоновка	Верх
ширина: 400px ;	Ширина элемента HTML — например. `100px \| 50%`
высота: 100% ;	Высота HTML-элемента — например. `20px \| 100%`
маржа: 5px ;	Margin — пространство вокруг элемента или расстояние между двумя элементами
margin-top: 1px ;	Верхняя маржа. Также попробуйте `-bottom: -left: или -right:`
padding: 5px ;	Padding — расстояние между содержимым элемента и его границей
padding-top: 1px ;	Верхняя обивка.Также попробуйте `-bottom: -left: or-right:`

Списки CSS	Top
в виде списка: нет ;	Очистить существующие типы маркеров, заданные тегами списка html

Что такое CSS — Простое руководство по HTML

CSS является сокращением от Cascading Style Sheets и является предпочтительным способом настройки внешнего вида веб-сайта.

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

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

Определение и использование стилей

Существует три основных способа включения таблицы стилей для веб-страницы или сайта:

Установка стиля = "?" атрибут тега, называемый встроенными стилями

Использование тега

Внешний файл CSS

Как и файлы HTML, файлы CSS также представляют собой обычный текст и обычно имеют расширение .css . Пример имени файла CSS style.css можно увидеть ниже.

  body {
  цвет фона: бежевый;
  цвет: # 000080;
}
h2 {
  красный цвет;
}

Затем файл можно включить, используя ссылку <...> в заголовке HTML.

Базовые команды HTML

В этом разделе рассматриваются некоторые основные команды HTML и объясняются
шаги, необходимые для подготовки документа для просмотра через мир
Широкая сеть (www) с помощью Netscape Navigator или Internet Explorer.

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

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

  Мой первый HTML-документ

Закрывающий тег обычно содержит "/" перед
директива, указывающая на прекращение действия.

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

HTML-тег

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

Тег обычно помещается в первую строку
ваш документ. В конце документа вы должны закрыть
тег.

Головной ярлык

Как и заголовок заметки, заголовок HTML-документа
содержит особую информацию, например название. Глава
документ разграничен тегами и
соответственно.

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

 

 Мой первый HTML-документ

Заголовки

Тег заголовка позволяет указать Заголовок документа в
окно вашего браузера. Когда люди создают горячие списки, это название
что они видят в своем списке после добавления вашего документа. В
формат:

  Мой первый HTML-документ

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

Тег тела

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

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

 

 Мой первый HTML-документ

Заголовки

Есть до шести уровней заголовков, которые можно использовать в вашем
документ, от h2 до h6.Заголовок 1 - это самый большой заголовок, и они
становятся все меньше через заголовок 6. Ниже представлены все
шесть заголовков и как они обычно появляются по отношению к одному
Другой.

  Это тег заголовка 1

  Это тег заголовка 2

Это тег заголовка 2

  Это тег заголовка 3

Это тег заголовка 3

  Это тег заголовка 4

Это тег заголовка 4

  Это тег заголовка 5

Это тег заголовка 5

  Это тег заголовка 6

Это тег заголовка 6

Заголовки

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

Пункты

В HTML тег абзаца

следует помещать в конец
каждый абзац «нормального» текста (определение нормального
поскольку с ним еще не связан тег).

вызывает разрыв строки и добавляет пробел в конце
линия

вызывает разрыв строки без завершающего пробела
линия

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

Предварительно отформатированный текст

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

 это

               пример
               предварительно отформатированного
        текстовый тег

А вот как отображается:

 это

               пример
               предварительно отформатированного
        текстовый тег

Полужирный и курсив

Вы можете выделить текст, используя полужирный шрифт и курсив.
теги или упор и сильные теги.

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

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

Физические теги: Это тег жирным шрифтом .; Так выглядит полужирным шрифтом .; Это тег курсив .; Так выглядит курсивом .
Логические теги: Это подчеркнуто
ярлык.; Это сильно подчеркнутый тег .; Это тег выделенный .; Это выделенный тег .

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

Списки

В HTML есть простой способ пронумеровать, ненумеровать и
списки определений.Кроме того, вы можете вкладывать списки в списки.

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

Ненумерованные списки

Ненумерованные списки начинаются с тега
,
за которыми следуют фактические элементы списка, отмеченные значком
тег.Список заканчивается закрывающим тегом
.
Например, вот ненумерованный список из трех пунктов:
 
 элемент списка 1
 элемент списка 2
 элемент списка 3

 
Вот как будет отображаться этот список:
элемент списка 1
элемент списка 2
элемент списка 3

Нумерованные списки

Вот тот же список в формате нумерованного списка:
 
 элемент списка 1
 элемент списка 2
 элемент списка 3

 
Вот как будет отображаться этот список:
элемент списка 1
элемент списка 2
элемент списка 3

Списки определений

Списки определений
позволяют делать отступы без необходимости
необходимость использовать пули.
 
 Это термин
 Это определение
 И еще одно определение
 Другой термин
 Другое определение

 
А вот как это будет отображаться
Это термин
Это определение.
И еще одно определение.
Другой термин
Другое определение

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

Наконец, вот вложенный список в ненумерованный список (мы
мог просто иметь вложенный список внутри пронумерованного
список).
 
 элемент списка 1
 
  вложенный элемент 1
 
 вложенный элемент 2
 
 элемент списка 2
 
  вложенный элемент 1
 
 вложенный элемент 2
 
 элемент списка 3
 
  вложенный элемент 1
 
 вложенный элемент 2
 

 
Вот как будет отображаться этот список:
элемент списка 1
вложенный элемент 1
вложенный элемент 2
элемент списка 2
вложенный элемент 1
вложенный элемент 2
элемент списка 3
вложенный элемент 1
вложенный элемент 2

Цитата

Тег цитаты делает отступ для текста (как слева, так и
справа) внутри тегов.Тег цитаты выглядит так:

...

и отображается так:

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

Центр

Вы можете центрировать текст, изображения и заголовки с помощью центрального тега:

  Это предложение по центру

Это предложение по центру.

Центральный тег автоматически вставляет разрыв строки после
закрывающий центральный тег.

Горизонтальная линейка

Чтобы разделить разделы в документе, вы можете вставить
тег горизонтальной линейки

. Горизонтальная линейка отображается как
следует:

Адреса

Тег

обычно появляется в конце
документ и чаще всего используется для обозначения информации на
связавшись с автором или учреждением, предоставившим это
Информация.Все, что содержится в адресном теге, отображается в
курсив. Тег адреса - еще один пример логического тега, и
хотя в настоящее время он ничего не делает, кроме отображения текста в
курсивом, это может измениться по мере продвижения кода HTML.
Вот пример того, как может выглядеть адрес:
<адрес> Введение в HTML / Пэт Андрогет / [email protected]

И это будет выглядеть так:

Введение в HTML / Пэт Андрогет / Pat_Androget @ ncsu.edu

Комментарии
Можно включать комментарии в исходный HTML-документ.
которые не отображаются при просмотре через браузер. Это самое
полезно для предупреждений и специальных инструкций на будущее
редакторы вашего документа.
Комментарии принимают форму:

Комментарий может даже разрывать строки

Зачеркнутый
Если хотите, есть зачеркнутый ярлык,
отображает текст с зачеркиванием.
~~Зачеркнутый текст~~
отображается как
Это зачеркнутый текст
Специальные символы
Наконец, если вы часто используете символы, составляющие HTML
теги (например, < > и &), или вы используете специальные
символы не в стандарте ascii, вам придется использовать
специальные теги. Вот коды:
& aacute; .... E & acirc; .... E & aelig; .... E &могила; .... E & amp; .... & &кольцо; .... E & atilde; .... E & auml; .... E & ccedil; .... E & eacute; .... E & ecirc; .... E & egrave; .... E & eth; .... E & euml; .... E & gt; ....> & iacute; .... E & icirc; .... E & igrave; .... E & iuml; .... E & lt; .... <& ntilde; .... E & oacute; .... E & ocirc; .... E & ograve; .... E & oslash; .... E & otilde; .... E & ouml; .... E & quot; .... "& szlig; .... & thorn; .... & uacute; .... E & ucirc; .... E & ugrave; .... E & uuml; .... E & yacute; .... & yuml; ....
Вернуться на Домой

Теги форматирования текста
- Простое руководство по HTML
Следующие HTML-теги используются для форматирования текста на вашей веб-странице.Это может оживить внешний вид веб-страницы, однако, слишком большое разнообразие форматирования текста также может выглядеть неприятно.
Заголовок -
Доступно 6 уровней заголовков, от h2 для самого большого и важного заголовка до h6 для самого маленького заголовка.
Полужирный -
Текст между тегами будет полужирным и выделяться на фоне текста вокруг него, как в текстовом редакторе.
Курсив -
Также работает так же, как текстовый процессор, курсив отображает текст под небольшим углом.
подчеркивание -
Опять же, как подчеркивание в текстовом редакторе. Обратите внимание, что HTML-ссылки уже подчеркнуты и не нуждаются в дополнительном теге.
Вычеркнутый -
Проводит линию прямо через центр текста, перечеркивая ее.Часто используется, чтобы показать, что текст устарел и больше не актуален. Также работает с использованием вместо .
Предварительно отформатированный текст -

Любой текст между тегами до , включая пробелы, символы возврата каретки и знаки препинания, будет отображаться в браузере так же, как и в текстовом редакторе (обычно браузеры игнорируют несколько пробелов).
Исходный код -
Текст отображается шрифтом фиксированной ширины, обычно используемым при отображении исходного кода.Я использовал его на этом сайте вместе с таблицами стилей, чтобы показать все теги.
Текст для пишущей машинки -
Текст, похоже, был набран на пишущей машинке шрифтом фиксированной ширины. (*)
Цитата блока -

Определяет длинную цитату, и цитата отображается с очень широким полем в левой части цитаты блока.
Малый -
Вместо того, чтобы устанавливать размер шрифта, вы можете использовать маленький тег , чтобы визуализировать текст немного меньше, чем текст вокруг него.Полезно для отображения мелкого шрифта.
Цвет шрифта - (*)
Измените цвет нескольких слов или фрагмента текста. 6 вопросительных знаков представляют шестнадцатеричный код цвета, см. Этот список цветов и кодов для некоторых образцов. (*)
Размер шрифта -
Заменить? с числом от 1 до 7, чтобы изменить размер шрифта. Один самый маленький и семь самых больших.(*)
Изменение размера шрифта -
Для немедленного изменения размера шрифта по отношению к размеру предшествующего шрифта, этот тег увеличивает или уменьшает размер шрифта на указанное вами число. Например: Немного текста (*)
Изменить начертание шрифта -
Для отображения текста определенным шрифтом используйте имя шрифта, например «Helvetica», «Arial» или «Courier».Имейте в виду, что использование какого-то необычного шрифта с вашего компьютера означает, что человек, просматривающий эту страницу, также должен установить этот шрифт на своем компьютере, иначе он будет выглядеть совершенно иначе. (*)
Центр -
Полезный тег, как говорится, он делает все, что находится между тегами, по центру (в середине страницы). (*)
Акцент -
Используется для выделения текста, который обычно выделяется курсивом, но может отличаться в зависимости от вашего браузера.
Сильный акцент -
Используется для большего выделения текста, который обычно выделяется полужирным шрифтом, но может варьироваться в зависимости от вашего браузера.
(*) Важное примечание:
Теги, отмеченные (*), по-прежнему должны работать, но были заменены каскадными таблицами стилей (CSS), которые теперь являются рекомендуемым способом изменения шрифта, цвета, интервала, границы или выравнивания элементов HTML.
HTML | Форматирование текста - GeeksforGeeks
HTML предоставляет нам возможность форматировать текст так же, как мы это делаем в MS Word или любом другом программном обеспечении для редактирования текста.В этой статье мы рассмотрим несколько таких вариантов.
Выделение текста жирным или сильным : Мы можем сделать текст полужирным с помощью тега . Тег использует как открывающий, так и закрывающий теги. Текст, который необходимо выделить полужирным шрифтом, должен находиться в пределах тегов и .
Мы также можем использовать тег , чтобы сделать текст сильным, с добавлением семантической важности. Он также открывается тегом и заканчивается тегом .
Пример :
HTML

< html >
9143 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 < заголовок > Полужирный шрифт заголовок >
глава >
<
00 00 00 00
 Hello GeeksforGeeks p >

9142 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 > Здравствуйте, GeeksforGeeks b > p >
9 0002

 Hello GeeksforGeeks strong 9143 9143 9143 914 914 914 914 914 914 914 914 914 914 914 914 914
корпус >
html >
Выход :
162000
Выход :
162000
Курсив или выделить : Тег используется для выделения текста курсивом.Он открывается тегом и заканчивается тегом .
Тег используется, чтобы выделить текст с дополнительной семантической важностью. Он открывается тегом и заканчивается тегом .
Пример :
HTML

< html >
9143 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 < заголовок > Курсив заголовок >
глава >
< корпус >
00 9143
00 9143 00 9143 00 9143 00
 Hello GeeksforGeeks p >

9142 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 > Здравствуйте, GeeksforGeeks i > p >

 Hello GeeksforGeeks em 9143 >
корпус >
html >
Вывод :
00
Выход :
00
9162 9169 также возможно выделить текст в HTML с помощью тега .Он имеет открывающий тег и закрывающий тег .
Пример :
HTML

< html >
9143 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 < заголовок > Выделить заголовок >
глава >
<
00 00 00 00
 Hello GeeksforGeeks p >

9142 914 914 914 914 914 914 914 914 914 914 914 914 914 > Привет, GeeksforGeeks mark > p >
90 002
корпус >
html >

2 9169 9189 или Надстрочный индекс: Элемент используется для надстрочного индекса текста, а элемент _{используется для подстрочного индекса текста.У них обоих есть открывающий и закрывающий теги.
Пример :}
HTML

< html >
9143 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 < заголовок > Верхний и нижний индекс заголовок >
заголовок >
< корпус
4 00
4
4 00 00
 Здравствуйте, GeeksforGeeks p >

914 914 914
914 914 914
sup > GeeksforGeeks sup > p > 91 434

 Hello GeeksforGeeks1414 914 914 914 914 914 914 914 914 914 914 914 914 914
корпус >
html >
2000
2000 2
2000 18 Уменьшение размера текста: Элемент используется для уменьшения текста.Текст, который нужно отображать меньшего размера, следует писать внутри тегов и .
Пример :
HTML

< html >
9143 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 < название > Малое название >
глава >
< корпус >
003 00 00 00 9143 00
 Hello GeeksforGeeks p >

9142 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 > Привет, GeeksforGeeks small > p >
9000 2
корпус >
html >
Вывод16 9182 9189
9189 9169 : Элемент используется для зачеркивания текста, помечающего часть как удаленную.Он также имеет открывающую и закрывающую бирки.
Пример :
HTML

< html >
9143 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 < заголовок > Удалить заголовок >
глава >
< корпус >
003 00 00 00 9143 00
 Hello GeeksforGeeks p >

9142 914 914 914 914 914 914 914 914 914 > Привет, GeeksforGeeks del > p >
корпус >
html >
Выход :
7

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

< html >
9143 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 < заголовок > Вставка заголовок >
голова >
< корпус >
00 9143
00 9143 00 9143 00 9143 00
 Hello GeeksforGeeks p >

9142

9142 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 914 > Здравствуйте, GeeksforGeeks ins > p >
9000 2
корпус >
html >

00 3 3 3 9187 9187
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
Вниманию читателей! Не прекращайте учиться сейчас.Освойте все важные концепции HTML с Web Design for Beginners | HTML курс.
Некоторые часто используемые теги HTML
Теги
Используйте
(..) * Весь документ HTML
(...) * Заголовок или пролог HTML-документа
(.. .) * Все остальное содержимое HTML-документа
. . . Название документа
. . .
Заголовок первого уровня, большой размер текста
. . .
Заголовок второго уровня
. . .
Заголовок третьего уровня
.. .
Заголовок четвертого уровня
. . .
Заголовок пятого уровня
. . .
Заголовок шестого уровня мелким шрифтом
. . . (
) * Параграф При нажатии возврата в HTML-файле новый абзац не создается при просмотре файла. Вам нужно использовать этот тег для создания нового абзаца.

Разрыв строки Этот тег покажет пустую строку.
Горизонтальная линия Создает горизонтальную линию на странице.
Комментарий Комментарии, которые вы пишете посередине, не будут отображаться на странице при просмотре.
. . . Ссылка (A = привязка) связывает текущий HTML-файл с другим файлом.
Пример: Вернуться в главное меню
Это отобразит файл, имя которого указано в кавычках.Имя
ссылка, которая представляет собой цветные слова, которые вы видите на самом деле, идет между первыми
> и второй <. Здесь имя ссылки - Вернуться к Главное меню Другой пример: ILTNet Эта ссылка перенесет вас на другую страницу в Интернете. Вы можете посмотреть в Интернете
адрес в кавычках.

Список определений Поместите
в начало,

в конце и
для каждого: определение термина "в списке.Использовать
для каждого «определения» каждого термина. Определение будет
с отступом.

Пункт первый
Элемент 1 Определение
Встроенное изображение Поместите имя изображения (.gif или .jpg) в
цитаты.
. . . Полужирный Делает текст полужирным
.. . Курсив Делает текст курсивом
Размер шрифта Этот тег используется для изменения размера шрифта.
Это лучше, чем использовать тег заголовка, чтобы шрифт отображался
больше.
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя *
Email *
Сайт

Навигация по записям
Previous PostИконки картинки: Иконки «Картинки» — скачивайте бесплатно в PNG, SVG, GIF
Next PostОткрыть файл python: Файлы. Работа с файлами. | Python 3 для начинающих и чайников
Рубрики
Wordpress
Без рубрики
Верстка
Дизайн
Для начинающих
Обучение
Примеры
Разное
Шаблон
2024 © Все права защищены.

Команды для текста html: Правки HTML-документа

HTML-текст

HTML-элементы для текста

1. HTML-элементы для заголовков

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня

Заголовок 6-го уровня

1.1. Элемент <h2>

1.2. Элемент <h3>

1.3. Элемент <h4>

1.4. Элементы <h5>, <h5>, <h6>

2. Элементы для форматирования текста

2.1. Элемент <b>

2.2. Элемент <em>

2.3. Элемент <i>

2.4. Элемент <small>

2.5. Элемент <strong>

2.6. Элемент <sub>

2.7. Элемент <sup>

2.8. Элемент <ins>

2.9. Элемент <del>

2.10. Элемент <mark>

3. Элементы для ввода «компьютерного» текста

3.1. Элемент <code>

3.2. Элемент <kbd>

3.3. Элемент <samp>

3.4. Элемент <var>

3.5. Элемент <pre>

4. Элементы для оформления цитат и определений

4.1. Элемент <abbr>

4.2. Элемент <bdo>

4.3. Элемент <blockquote>

4.4. Элемент <q>

4.5. Элемент <cite>

4.6. Элемент <dfn>

5. Абзацы, средства переноса текста

5.1. Элемент <p>

5.2. Элемент <br>

5.3. Элемент <hr>

Правки HTML-документа

HTML-элементы для редактирования документа

1. Элемент <ins>

2. Элемент <del>

3. Атрибуты, общие для элементов <ins> и <del>

Форматирование текста | htmlbook.ru

HTML: Теги для текста | HTML самоучитель

Форматирование текста

Тег <pre>

Теги для отображения кода

Тег <address>

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

Направление текста

Цитаты

Удаленный и вставленный текст

HTML теги оформления текста | Vaden Pro

Формирование структуры текста (блочные элементы). Теги заголовков и абзацев.

HTML теги для разметки текста (строчные элементы)

Вопросы для самоконтроля:

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

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

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

Теги устанавливающие суть содержимого

Фразовые теги в HTML. Размечем тексты с помощью фразовых… | by Tatiana Fokina

<span></span>

<br> и <wbr>

<a></a>

<em></em> и <i></i>

<strong></strong> и <b></b>

<mark></mark>

<s></s>

<u></u>

<ins></ins> и <del></del>

<q></q>

<cite></cite>

<abbr></abbr>

<dfn></dfn>

<code></code>

<samp></samp>