Текстовый контент ч.1

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

<h1>-<h6>
— (с англ. heading — заголовок, заглавие) это заголовок, и этого тега целых шесть уровней, в зависимости от важности указанной в нём информации. <h1> это самый важный и главный заголовок на странице, именно поэтому он может быть только в единственном числе. Хотя технически вы можете написать в разметке два <h1>, такой документ не пройдёт валидацию (о ней мы поговорим позже), это серьёзно повредит SEO, а также введёт в заблуждение пользователей с речевыми браузерами.

Все прочие уровни заголовков менее важные, а значит могут использоваться несколько раз в документе (теги <h2>-<h6>). Однако здесь есть определённые рекомендации: не переходите к заголовку уровня 3, не указав прежде заголовок уровня 2. То есть следующая запись была бы не совсем правильной с точки зрения доступности пользователям:

                

                <h1>Синицы - птицы из отряда синицекрылых</h1>
<h3>Основные места обитания синиц</h3>
<h4>Чем питаются синицы в зимнее время года</h4>

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

Если вы скопируете в свой html документ код из примера выше, то обратите внимание, что заголовки имеют разный размер шрифта. Это не случайность, а браузерные настройки. Самому главному заголовку браузер определяет наибольший шрифт, заголовку уровня 2 — меньше, и т.д. Не ориентируйтесь на эти размеры шрифта и не придавайте им никакого значения, потому что все размеры шрифтов вы будете указывать в CSS. Определяйте уровень заголовка, который вам нужен, по его смыслу и важности для контента на странице.

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

<p>
— (с англ. paragraph — параграф, абзац) это обыкновеный текстовый параграф. В него мы будем помещать большую часть текстовой информации на странице, и не обязательно это должны быть абзацы новости\статьи. Это могут быть подписи к фотографии, описание продукта, его характеристик, биография пользователя и т.д. Подобно <div>, это основной рабочий инструмент в вёрстке. Всё, что мы не можем поместить в соответствующий семантический тег, мы помещаем в простой <p>.

                

                <p>
   Но тут поднялся со своего стула маклер Гретьенс; на речь ему потребовалось немало времени, а когда она была наконец произнесена, он поднял бокал за фирму «Иоганн Будденброк», за ее дальнейший рост и процветание во славу родного города.
</p>
<p>
   Тут Иоганн Будденброк, как глава семьи и старший представитель торгового дома, принес гостям благодарность на добром слове и послал Томаса за третьей бутылкой мальвазии, ибо расчет, что и двух будет достаточно, на сей раз не оправдался.
</p>

Теперь вам нужно вспомнить то, о чём мы говорили в начале обучения: браузер игнорирует пробелы больше одного, переносы текста и прочие элементы форматирования. Если вы введёте текст и разделите его при помощи клавиши enter, это не сработает. Чтобы создать два абзаца текста, необходимо каждый из них поместить в <p> как в примере выше, или хотя бы разделить тегом переноса строки <br>:

                

                <p>
   Заново пережив в душе это происшествие, консул взял перо и написал под своим последним «аминь»: «Вечно буду возносить хвалу тебе, господи!»
    <br>
   В другой раз, когда он еще совсем молодым человеком приехал в Берген, господь спас его от погибели в море.
</p>

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

Одна особенность тега, о которой следует сказать уже сейчас, даже если вы ещё не знакомы с CSS. В параграфы нельзя вкладывать блочные теги, такие как div, blockquote, section и пр., а также другие параграфы <p>. В случае, если вы попытаетесь это сделать, браузер самостоятельно закроет параграф перед любым из этих тегов. Скорее всего это «поломает» вашу вёрстку.

<blockquote> и <q>
— (с англ. quote — цитата, block quote — блок с цитатой) оба этих тега служат для определения цитаты, однако ключевое различие состоит в том, что <blockquote> это блочный тег, а <q> строчный. Это прямо относится к CSS, но к HTML имеет мало отношения, поэтому вы поймёте позже, как это работает. Пока что важно запомнить следующее: при помощи <blockquote> мы выделяем большие цитаты, стоящие отдельно от прочего текста на странице:

                

                <blockquote>
    "Я покорил всю Грецию, у меня самое лучшее в мире войско. Сдавайтесь, потому что если я захвачу Спарту силой, если я сломаю её ворота, если я пробью таранами её стены, то беспощадно уничтожу всё население и сравняю город с землёй!"
</blockquote>

Этот тег заключает в себе не обязательно конкретно выражение цитаты. Он служит рамкой-контейнером для неё, определяющим её начало и конец. Внутри же цитату можно редактировать другими тегами. Также в атрибуте cite вы можете указать URL источника цитаты, однако этот атрибут является машиночитаемым и не будет отображён на странице:

                

                <blockquote cite="https://ilibrary.ru/text/11/p.164/index.html">
    <p>Фатализм в истории неизбежен для объяснения неразумных явлений (то есть тех, разумность которых мы не понимаем). Чем более мы стараемся разумно объяснить эти явления в истории, тем они становятся для нас неразумнее и непонятнее.</p>
    <p>Каждый человек живет для себя, пользуется свободой для достижения своих личных целей и чувствует всем существом своим, что он может сейчас сделать или не сделать такое-то действие; но как скоро он сделает его, так действие это, совершенное в известный момент времени, становится невозвратимым и делается достоянием истории, в которой оно имеет не свободное, а предопределенное значение.</p>
</blockquote>

Кроме того, что теги <blockquote> и <q> являются соответственно блочным и строчным, что важно для CSS, они также имеют собственные предопределённые браузером стили. Многие теги имеют подобные стили, и мы далее не будем каждый раз останавливаться на этом. Если вы добавили какой-то тег и его внешний вид отличается от обычного текста <p>, то не пугайтесь. В будущем вы будете переопределять все эти стили, чтобы получить такой вид тегов, какой нам нужен по дизайну.

Этот тег заключает в себе не обязательно конкретно выражение цитаты. Он служит рамкой-контейнером для неё, определяющим её начало и конец. Внутри же цитату можно редактировать другими тегами. Также в атрибуте cite вы можете указать URL источника цитаты, однако этот атрибут является машиночитаемым и не будет отображён на странице:

Тег <q> отличается от <blockquote> лишь тем, что при помощи него выделяются небольшие цитаты прямо в тексте, в остальном всё вышесказанное справедливо и по отношению к нему:

                

                <p>
    Как утверждает сайт BabyFrontent: <q cite="https://babyfrontent.ru/">"IT - одна из самых быстрорастущих отраслей, а значит и самых перспективных"</q>
</p>

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

                

                <button>
   Привет, я <span style="color:deeppink">кнопка!</span>
</button>

Когда нам нужен контейнер, который никак не выглядит, то <span> незаменим. У него нет ни стилей, ни дополнительного функционала. Мы можем присвоить ему класс или идентификатор, выделить при помощи него что-то, или в него добавлять какую-то информацию при помощи JavaScript:

                

                <p>Количество пользователей онлайн: <span id="users-online-output"></span>

Здесь у нас внутри <span> нет вообще ничего. Но у него есть идентификатор, при помощи которого мы будем находить элемент и добавлять в него данные — число пользователей. Так у нас в интерфейсе будет всегда обновляться только одно значение внутри контейнера <span>, всё остальное будет нетронутым.

Мы уже говорили о принципе разделения HTML, CSS и JavaScript. <span> при таком подходе вновь приходит нам на помощь: если нам нужен зачёркнутый текст, то мы можем воспользоваться тегом <strike>, что неправильно, потому что html-разметка в таком случае будет влиять на внешний вид, а ещё мы можем создать <span class=’strike’> и при помощи CSS прописать зачёркнутый стиль написания. Второй вариант и будет правильным. Я бы посоветовал всегда все текстовые акценты в тексте указывать при помощи <span> с особенным классом, будь то подчёркнутый, надчёркнутый, жирный, курсив и любой другой форматированный текст. Поверьте, это удобнее, чем использование отдельных тегов, и избавит вас в будущем от некоторых проблем.

<em>
— (с англ. emphasis — акцент, особое внимание) служит для акцентирования текста. Если у вас в тексте есть какое-то слово или словосочетание, на котором вы хотите сделать акцент, то используйте этот тег.

                

                <p>
    HTML — стандартизированный язык разметки документов для просмотра
    веб-страниц <em>в браузере</em>. Веб-браузеры получают HTML документ
    от сервера по протоколам HTTP/HTTPS или открывают с локального диска,
    далее интерпретируют код в интерфейс, который будет отображаться на экране
    монитора.
</p>

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

                

                <p>
    HTML — стандартизированный язык разметки документов для просмотра
    веб-страниц <em class="accent-red-bg">в браузере</em>. Веб-браузеры
    получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают
    с локального диска, далее интерпретируют код в интерфейс, который будет
    отображаться на экране монитора.
</p>

Данный класс accent-red может подразумевать стилизацию акцентированного текста красным фоном. Именно в таком виде <em> + собственный класс следует создавать акценты в тексте, если они вам нужны.

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

Если при помощи <em> мы просто делаем акцент на какой-либо части предложения\текста, то при помощи <strong> мы указываем пользователю, что выделенный текст очень важен.

                

                <p>
    Для выполнения входа в систему введите свой логин и пароль, а также укажите
    адрес хоста, к которому хотите подключиться. Обратите внимание, что
    <strong class="significant-text">пользователям даётся только 3 попытки</strong>
    для установления соединения.
</p>

Подобно <em>, мы не должны останавливаться на выделении части текста только при помощи тега <strong>, а должны использовать тег <strong> + собственный класс. Это нам позволит использовать данные стили в дальнейшем для других тегов, например ссылок.

                

                <a href="/news/new-linux-mint" class="significant-text">
     Анонс нового дистрибутива Linux Mint
</a>

Об этом принципе разделения HTML и CSS мы уже упоминали. Мы при таком подходе получаем набор классов, которые стилизуют любые теги нужным нам образом. Разметку HTML нам менять не нужно. Всё, что нам необходимо — добавить или убрать класс. Это просто сделать и в коде, и при помощи JavaScript во время работы сайта.

<sup>,<sub>
— (с англ. superscript — надстрочный, subscript — подстрочный индекс) служат для создания надтекста\подтекста, т.е. степеней в математических уравнениях, индексов в химических формулах и пр.

                

                <p>
   Попробуйте решить следующее уравнение:<br>
   a<sup>2</sup>+b<sup>3</sup>-c<sup>2</sup>=(x+y*4)<sup>2</sup>
</p>
<p>
   Угадайте, что за вещество скрывается за формулой:<br>
   С<sub>20</sub>H<sub>14</sub>O<sub>4</sub>
</p>

Браузеры отображают эти теги по умолчанию с CSS-свойствами vertical-align: super и vertical-align: sub, которые отвечают за положение базовой оси текста. Вы можете использовать их как есть, а можете также добавить класс и описать дополнительные стили.

Важно понимать, что эти теги стоит использовать только в определённых случаях и только для текстового редактирования! Не следует вставлять таким образом знаки Copyright ©, зарегистрированной торговой марки ®, иконки и прочие изображения, являющиеся скорее элементами дизайна, чем текстовым содержимым.

Используйте <sup> для:
-степеней в математических формулах (пример выше)
-написания текста в верхнем регистре, это может понадобиться в некоторых языках:
Robert a présenté son rapport à M^lle Bernard.
English: 5^th

Используйте <sub> для:
-химических индексов (пример выше)
-математических индексов
x₁ … x_n

<abbr>
— (с англ. abbreviation — сокращение, аббревиатура) в этот элемент помещается аббревиатура, описание которой, как правило, указано в атрибуте title.

                

                <p>
    Начните изучать веб-разработку с уроков по
    <abbr title="HyperText Markup Language">HTML</abbr>, это основы,
    необходимые каждому.
</p>

Указывать аббревиатуры только в этом теге необязательно. Более того, этот тег совершенно ни на что не влияет, т.к. его содержимое отдельно не индексируется. Тем не менее, с точки зрения семантики, мы должны использовать этот тег вместо например <span class="abbr">. Это позволит сделать код более удобным для восприятия разработчиком.

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

<bdo>,<bdi>
— (с англ. bidirectional text override — переопределение двунаправленного текста, bidirectional isolate element — элемент с двунаправленным изолированным текстом) эти теги необходимы в случаях, когда мы имеем дело с языками, пишущимися справа налево. Но не в тех случаях, когда у нас целый параграф пишется таким образом, а когда только цитата\предложение\часть текста в параграфе пишется справа налево, а другая часть — привычным нам образом:

                

                <p>Предложение на иврите. Направление письма нам известно, поэтому мы используем тег
     bdo: <bdo dir="rtl">אה, אני אוהב להיות ליד חוף הים</bdo></p>

Как указано в примере, тег <bdo> мы используем, когда заранее знаем нужное нам направление письма и можем при помощи атрибута dir="rtl" точно указать это в нашей вёрстке.

Однако так бывает не всегда. Мы говорили в самых первых уроках, что сайты бывают динамическими — они имеют всего один шаблон для одного раздела статей и при запросе пользователя вставляют в этот шаблон информацию из базы данных. Информация там может быть самой различной, в том числе одновременно на английском и арабском языке. Мы не знаем заранее, какая будет информация, поэтому должны предоставить браузеру самому определять, как обрабатывать её. В подобном случае нам необходим тег <bdi>. Например, в таблице победителей соревнований могут быть как европейские, так и арабские имена. Они каждый раз вставляются динамически при помощи серверных языков программирования, но мы учитываем это и используем <bdi>, который сам решит, как отобразить содержимое:

                

                <bdi class="name">الرجل القوي إيان </bdi>: 4th place

Оба тега поддерживают глобальные атрибуты, а также атрибут dir.

dir
dir — от англ. «direction» (направление). Определяет направление письма в тексте для элемента. Может принимать значения:
ltr
— расшифровывается как left to right (слева направо). Это значение установлено по умолчанию. Это обычное направление письма для большинства языков в мире.
rtl
— расшифровывается как right to left (справа налево). Это значение необходимо для языков, пишущихся справа налево, например арабского, еврейского письма, а также некоторых китайских диалектов.
auto
— позволяет браузеру самостоятельно определить направление письма, анализируя символы внутри тега. По умолчанию для <bdi> как раз задан auto, поэтому он такой умный. В следующем примере мы описываем целый абзац справа налево:

                

                <p dir="rtl">هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>

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

Хотя подобного же поведения можно достичь при помощи обыкновенного <span> и соответствующих стилей CSS, мы не должны полагаться на стили, поскольку они могут быть проигнорированы браузерами в случае определения направления текста. Также не используйте <span dir="rtl"> и пр., поскольку это, хотя и будет работать идентично тегам <bdi>,<bdo>, всё-таки ухудшает семантику и восприятие кода.

<br>
— (с англ. line break — разрыв строки) один из самых важных тегов в редактировании текста, хотя довольно простой. Это тег переноса строки. Как мы помним, браузер игнорирует переносы строки в коде HTML, однако этот тег он не может игнорировать. Поэтому мы можем создать фактически несколько абзацев в пределах одного тега <p>:

                

                <p>
    Все персидское войско в Элладу ушло.<br>
    А мы, старики, на страже стоим<br>
    Дворцов золотых, домов дорогих<br>
    Родимого края. Сам царь велел,<br>
    Сын Дария, Ксеркс,<br>
    Старейшим, испытанным слугам своим<br>
    Беречь эту землю свято.
</p>

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

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

Важно кое-что ещё. Не используйте <br> для создания вертикальных отступов снизу. Пример:

                

                <p>Это обыкновенное предложение, под которым нам необходимо создать отступ.</p>
<br>
<br>
<p>А это ещё одно предложение...</p>

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

<cite>
— (с англ. cite — ссылаться, цитировать) это контейнер для названия или для ссылки, которая соотносится с описываемым художественным произведением, песней, ТВ шоу, веб-страницей, документом и пр. Этот тег и его содержимое соотносятся с текущим абзацем\их родителем. Пример использования:

                

                <p>Подробная информация о системе описана в стандарте <cite>PSR-4</cite>.</p>

<p>
  Вы можете прослушать весь альбом на нашем
  <cite>
    <a href="https://www.ironmaiden.com/">официальном сайте</a>
  </cite>.
</p>

Наличие или отсутствие этого тега не влияет ни на СЕО, ни на работу сайта или ссылки. Он был введён в HTML 3.2 в далёком 1997, когда ещё представление о работе интернета и HTML было совсем другим, сильно отличным от современного. Вы можете игнорировать в работе этот тег.