HTML - Работа с текстом

Содержание:

  1. Работа с текстом
  2. Заголовки и абзацы
  3. Форматирование текста
  4. Списки
  5. HTML-сущности или спецсимволы

  1. Работа с текстом

    Текст (от лат. textus — ткань; сплетение, сочетание) — зафиксированная на каком-либо материальном носителе человеческая мысль; в общем плане связная и полная последовательность символов.

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

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

    Важно упомянуть, что в HTML элементы делятся на две основные категории: блочные (block-level) и строчные (inline) элементы. Эти категории определяют, как элементы взаимодействуют друг с другом и как они отображаются на веб-странице.

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

    Давайте вместе рассмотрим какие HTML-элементы и теги могут помочь нам в работе с текстовыми данными.

  2. Заголовки и абзацы

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

    Что же такое заголовки и как их использовать?

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

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

    Кроме того, поисковые системы (например такие как google, yahoo!) обращают внимание на заголовки для понимания тематики страницы.

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

    В HTML заголовки представлены парными тегами <h1> по <h6>. С английского обозначение “h” расшифровывается как heading и в свою очередь переводится как заголовок. Эти теги используются для создания текстовых заголовков различных уровней на веб-странице. Заголовки в HTML являются блочными элементами. Давайте рассмотрим каждый уровень заголовка более подробно:

    • <h1> - заголовок 1-го уровня. Используется для основного заголовка страницы. Это самый крупный и важный заголовок на странице.Рекомендуется использовать только один <h1> на странице для поддержания семантической структуры. Обычно размещается в самой первой секции нашей страницы.
    • <h2> - заголовок 2-го уровня. Используется для подзаголовков, которые относятся к основному заголовку <h1>. И может используется несколько раз на веб-странице. Он отображается чуть меньшим размером по сравнению с <h1>.
    • <h3> - заголовок 3-го уровня. Используется для подзаголовков уровня <h2>. Продолжает иерархию заголовков, предоставляя дополнительные уровни структуры.
    • <h4> - заголовок 4-го уровня. Используется для более специфических разделов или подразделов страницы. Поддерживает глубину структуры.
    • <h5> - заголовок 5-го уровня. Продолжает иерархию заголовков, предоставляя дополнительные уровни структуры.
    • <h6> - заголовок 6-го уровня. Самый мелкий заголовок. Используется для дополнительных уровней детализации.

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

    А какую роль в HTML играют абзацы?

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

    Чтобы разделить текст на абзацы в HTML используется парный тег <p>. Обозначение “p” с английского расшифровывается как paragraph и переводится как параграф или абзац. Как и заголовки <h1> до <h6> абзацы <p> являются блочным элементом.

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

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

    Давайте рассмотрим основные теги HTML для форматирования текста:

    • <strong> и <b> используется для выделения текста жирным шрифтом. Хотя при использовании эти два тега отображают текст одинаково, однако они имеют различия в своем семантическом значении.

      Тег <strong> имеет семантическое значение. Это означает, что текст, помещенный в данный тег, считается важным с точки зрения весомости или силы. И может быть применен для выделения ключевых слов, которые имеют важное значение для смысла текста.

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

    • <em> и <i> определяют текст выделенный курсивом. Как и в случае с тегами <strong> и <b>, теги <em> и <i> отображают текст одинаково, но отличаются в своем семантическом значении.

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

      А тег <i> не имеет семантического значения и используется просто для того, чтобы выделить текст курсивом и не предоставляет дополнительного смысла или важности тексту.

    • <del> и <s> используются для обозначения текста, который был удален или зачеркнут. Как и в предыдущих случаях данные теги отображают текст одинаково, но имеют отличия в своем семантическом значении.

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

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

    • <ins> и <u> используются для подчеркивания текста, однако у них есть различия в семантическом значении и предназначении.

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

      Тег же <u> просто подчеркивает текст без дополнительного семантического значения. Ранее использовался для обозначения подчеркнутого текста, но не обязательно предоставляет информацию о его изменении или добавлении. Однако, в стандарте HTML5, использование тега <u> не рекомендуется для стилизации текста. Вместо этого, рекомендуется использовать CSS свойство text-decoration для подчеркивания текста.

    • <mark> и <span> предоставляют возможности для применения стилей и выделения текста, но у них есть различия в семантике и назначении.

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

      Тег <span> представляет собой контейнер-обертку без семантического значения. Обернув отдельные слова и фразы в данный тег вы не увидите никаких изменений в его стилизации. Его прямое назначение заключается в том, чтобы применять к этим элементам CSS-стили, не добавляя им специфического значения для выделения текста в отличии от тега <mark>.

    • <sup> и <sub> определяют верхний и нижний индексы:

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

      Тег <sub> используется для нижних индексов (например, в химических формулах).

    • <br> используется для вставки переноса строки в текст.

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

    • <hr> используется для создания горизонтальной линии, разделяющей контент.

  4. Списки

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

    Давайте рассмотрим их:

    • Неупорядоченные (маркированные) списки помогут вам создавать перечни элементов без явного порядка, использовать маркеры для их выделения. Они создаются с использованием тега <ul>, а элементы списка - с помощью тега <li>.
    • Упорядоченные (нумерованные) списки пригодятся, когда порядок элементов важен. Они создаются с использованием тега <ol>, а элементы списка - с помощью тега <li>.
    • Список описания помогут структурировать информацию с использованием пар терминов и их определений, например, это похоже, как это осуществляется в словарях или энциклопедиях. Они создается с использованием тегов <dl> (description list) - оболочка списка, <dt> (description term) - термин и <dd> (description definition) - определение.

  5. HTML-сущности или спецсимволы

    HTML-сущности — это специальные коды, которые используются в HTML для представления определенных символов или знаков, которые могут иметь особое значение в HTML разметке. В основном, это касается символов, которые могут быть определены браузером как часть самой разметки, и чтобы предотвратить это, используются такие специальные коды. Такие специальные коды начинаются с символа амперсанд (&) и заканчиваются точкой с запятой (;).

    Например, к таким спецсимволам относятся символ "меньше" < (&lt;), символ "больше" > (&gt;), амперсанд & (&amp;) или знак копирайт © (&copy;).

    Полный список таких символов можно найти по ссылке: https://html.spec.whatwg.org/multipage/named-characters.html