html
Основы

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

HTML
Основы

Обновлено

12.09.2023

Просмотров

310

Время прочтения

30 мин.

Сложность

<dfn>
— (с англ. definition — опредление) этот тег является контейнером для термина\понятия\аббревиатуры, определение которой мы даём в родительском абзаце <p>, в тегах <dt>,<dd> или в <section>.

                
<p><dfn>Программист</dfn> — специалист, занимающийся программированием, то есть созданием компьютерных программ.</p>

В случае, если в <dfn> помещается аббревиатура, значение атрибута title служит определяемым понятием:

                
<p> <dfn title="Институт вычислительной математики и информационных технологий"> ИВМиИТ </dfn> - один из ведущих российских образовательных и исследовательских центров в области вычислительной и прикладной математики, а также фундаментальной информатики и информационных технологий. </p>

Данный тег, как и вышеописанный <cite>, является старожилом, появившимся ещё в 1997 году. Работа его была довольно ясно описана, однако на практике так вышло, что он ни на что не влияет — ни на СЕО, ни на функционал сайта. Поэтому вы также можете игнорировать его в своей работе.

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

                
<p>Самый простой вариант моторного летательного аппарата – <mark>моноплан с тянущим моторным винтом</mark>. Схема достаточно старая, но проверенная временем. Единственный недостаток монопланов в том, что в аварийных условиях покинуть кабину довольно затруднительно, мешает монокрыло.</p>

Как правило, если в дизайне нашего сайта предусмотрено подобное выделение текста, оно отличается от того, что нам предлагает браузер. По этой причине мы захотим изменить стиль тега <mark>, прописав для него свои правила. Тем не менее, сам тег мы можем продолжать использовать по его назначению — для визуального выделения части текста. Такого же эффекта можно достичь при помощи простого <span class="marked"> с прописанными нужными нам стилями. Какой из этих способов выделения использовать — решать только вам.

<ruby>,<rp>,<rt>
— эти теги необходимы для создания надстрочного\подстрочного текста, когда он необходим для описания транскрипции написания звуков. Чаще всего это используется в восточных языках. Понять проще всего будет на примере:

                
<p> <ruby><rp>(</rp><rt>Kan</rt><rp>)</rp><rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> </p> <p> <ruby> Текст может быть на любом языке <rp>(</rp><rt>примечание к тексту</rt><rp>)</rp> </ruby> </p>

Как мы видим, то, что мы помещаем в <ruby>, обрабатывается особенным образом. Скобки, которые находятся в <rp>, не отображаются, а отображается надстрочный текст из тегов <rt>. Это не ошибка, а правильная работа браузера. Надстрочный текст мы помещаем в тег <rt>, а на случай, если браузер не понимает этот тег, предусматриваем добавление скобок в <rp>. Хотя тег <ruby> задумывался для добавления строки к восточно-азиатским иероглифам, он может использоваться с любыми языками.

Не стоит путать назначение данного тега с другими — <sup> и <sub>, которые нужны для создания суффиксов, степеней и пр.

<time>
— (с англ. time — время, дата) этот тег нужен для того, чтобы передавать дату в машиночитаемом формате. Например, у нас есть простой абзац, где мы указываем какую-либо дату. Но формат, в котором мы описывам дату для человека, отличается от формата, что может воспринимать компьютер:

                
<p> Концерт любимой всеми рок-группы назначен на первый день весны. </p>

Всем людям известно, что первый день весны это 1 марта. Однако не все компьютеры способны воспринимать даты таким образом. Поэтому нам необходим тег-обёртка <time>, он в своём атрибуте datetime будет хранить машиночитаемую дату:

                
<p> Концерт любимой всеми рок-группы назначен на <time datetime="1.03.2022">первый день весны</time>. </p>

Формат даты «1.03.2022» компьютер в состоянии прочитать и понять. В веб-разработке и в HTML это применяется главным образом для того, чтобы при помощи JavaScript и других языков программирования считывать дату с веб-страниц. Какой формат даты может прочитать компьютер? Таких форматов довольно много, и запоминать их вам не нужно. В JavaScript есть специальные функции, при помощи которых вы сможете определить, правильно ли компьютер считывает дату. Однако речь об этом пойдёт в будущем в уроках по JavaScript, пока что эта информация вам не нужна.

<wbr>
— (с англ. word break — разрыв слова) указывает на место возможного переноса слова в случае, если оно полностью не помещается в контейнер, предназначенный для тега. Дело в том, что HTML и браузер по умолчанию не переносят слова по слогам, а стараются выравнивать абзацы так, чтобы слова только полностью переносились на новую строку. Однако это не всегда удаётся. Например, в русском языке есть довольно длинные химические определения, и на относительно узких мобильных экранах они могут не поместиться, если размер шрифта будет большим. Поскольку браузер самостоятельно не может решить, в каком месте разбить данное слово, он оставляет его целым во всю длину и создаёт горизонтальную прокрутку на странице. Пример и результат его отображения ниже:

                
<p> дихлордифенилтрихлорметилметан </p>

На скриншоте <body> для наглядности выделен красной рамкой. Как видите, при размере шрифта 32px слово не помещается в ширине экрана и поэтому на веб-странице появляется горизонтальная полоса прокрутки (горизонтальный скролл). Запомните: горизонтального скролла на сайте быть не должно, скорее всего это ошибка верстальщика\разработчика и какой-то элемент на сайте просто не помещается в ширину <body>! Бывают, конечно, сайты, выполненные в горизонтальном дизайне, когда сайт прокручивается не вниз, а вправо, однако это исключение.

Чтобы исправить подобное нежелательное поведение, мы должны добавить в наше слово тег <wbr> в местах, где можно выполнить перенос:

                
<p> дихлор<wbr>дифенил<wbr>трихлор<wbr>метилметан </p>

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

Добавляйте <wbr> во все длинные слова, предупреждайте саму возможность появления ошибки! Подобно <br>, тег не имеет визуального представления, как ширина, высота, цвет фона и пр.

<del>,<ins>
— (с англ. deleted — удалённый, inserted — вставленный) теги , определяющие удалённый\добавленный контент. Если вы, к примеру, отредактировали опубликованную ранее статью, то можете поместить потерявшие актуальность фрагменты в <del>, а новые в <ins>.

                
<p> Старое предложение <del>немного</del> <ins>значительно</ins> лучше нового. </p>

Браузеры могут по-разному отображать данные теги. Google Chrome отображает <del> зачёркнутым, а <ins> подчёркнутым. Эту стилизацию вы можете, разумеется, переопределить на своё усмотрение. Довольно распространённым способом показывать изменения является отображение устаревших фрагментов текста на красном фоне, а добавленных на зелёном. Скриншот ниже взят со страницы тега <del> в MDN:

Теги <del> и <ins> фактически не влиют ни на что на странице, а также не влияют на SEO. Они созданы для того, чтобы немного разнообразить семантику страницы, т.е. чтобы мы вместо <span class="deleted"> и <span class="inserted"> могли использовать отдельные теги.

Также в работе учтите, что эти теги как правило не объявляются скринридерами (речевыми браузерами). Это определённо создаст многословность при использовании сайта слабовидящими людьми. Поэтому, если вы заботитесь о доступности вашего сайта, вероятно, вам следует избегать этих тегов. Если всё же вы станете их использовать, то обязательно прежде загляните в справочник!

<pre>
— (с англ. preformatted — неформатированный) тег, содержащий контент, не подлежащий стандартному форматированию. Мы помним, что браузер удаляет из HTML излишние пробелы, переносы строк и т.п. Так вот, всё, что вы поместите в тег <pre>, отобразится на странице почти так же, как вы видите в коде. Исключением будет тип шрифта — в браузере вы увидите всё в моноширинном шрифте. Моноширинный шрифт — тип шрифтов, у которых все символы по ширине одинаковы, самым известным из таких шрифтов является Courier. Рассмотрим пример:

                
<pre> Добрый день, я текст обыкновенный. Не поддающийся форматированию. </pre>

В браузере вы увидите текст, сохранивший изначальное количество отступов слева, переносов строки, пробелов, а также отображающийся моноширинным (monospace) шрифтом, установленным в вашей системе:

Что важно понимать: <pre> для HTML это такой же тег, как и обыкновенный <span>. Внутри <pre> только текст не будет отформатирован. Теги, находящиеся внутри <pre>, по-прежнему останутся тегами и будут обработаны обычным образом!

                
<pre> <span>Небольшое вступление:</span> Добрый день, я текст обыкновенный. Не поддающийся форматированию. </pre>

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

Тег <pre> из-за удобства его явного форматирования используется для демонстрации на веб-сайтах примеров исходного кода, причём не обязательно веб языков вроде HTML,CSS или JavaScript. Как правило, помимо тега <pre>, в коде ещё присутствует специальный семантический тег <code>. Поскольку, как уже было сказано, браузер воспринимает символы < и > как начало и конец тегов, мы не можем использовать их для отображения в <pre> примера кода с тегами. Однако есть решение и этой задачи. В HTML для отображения подобных зарезервированных символов предусмотрены специальные наборы, или спецсимволы. По запросу «спецсимволы HTML» в любом поисковике вы найдёте достаточно информации с примерами. Мы же не будем приводить перечень этих символов, ведь их на самом деле очень много, а расскажем только о тех двух, что нас интересуют в данный момент — символах открытия и закрытия тегов: &lt; и &gt; Все спецсимволы HTML начинаются со знака амперсанда и заканчиваются точкой с запятой, поэтому вы их ни с чем не спутаете. Итак, чтобы отобразить какой-либо код на своём сайте, мы должны создать примерно следующую разметку:

                
<pre><code> &lt;p&gt; Чебурашка вышел на улицу, грустно взглянул на затянутое серыми тучами небо и, слегка поёжившись, побрёл в сторону &lt;span&gt;крокодильего&lt;/span&gt; пруда. &lt;/p&gt; </code></pre>

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

Тег <pre> можно стилизовать, например изменить ему цвет фона, создать рамку, внутренний отступ, а также можно стилизовать другие теги внутри него. В результате можно получить практически любой стиль отображения кода. Ниже приведён скриншот стилизованного тега <pre> с сайта learn.javascript.ru, самого популярного русскоязычного ресурса по JavaScript:

<details>,<summary>
— (с англ. details — подробности, summary — в общем, итог) создаёт виджет (небольшой функциональный, обособленный блок на сайте, например часы, календарь, уведомление и пр.) с информацией, которая появляется при переключении виджета в «открытое» состояние. Заголовок виджета создаётся при помощи тега <summary>, всё прочее, что не будет внесено в <summary>, будет являться скрытой информацией виджета.

                
<p>Добрый день, к сожалению, вам отказано в поступлении в наш ВУЗ.</p> <details> <summary>Подробнее</summary> Вы набрали недостаточное количество баллов. Пожалуйста, пересдайте вступительные экзамены. </details>

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

<details> это новый тег, появившийся только в HTML5. Хотя он был введён для того, чтобы сделать работу разработчиков удобнее, он не получил широкого распространения главным образом потому, что у него есть пара ключевых недостатков: его раскрытие не может анимировано, треугольник рядом с заголовком не может быть стилизован при помощи CSS. В наши дни веб должен быть уже не просто понятным и удобным, как раньше. Он должен быть красивым и эффективным. На каждую мелочь опытные разработчики обращают внимание, и они не могут себе позволить, чтобы какой-то треугольник смотрелся не так, как им нужно по дизайну. Поэтому преимущества <details> нивелируются его недостатками. Место тега <details> в веб-разработке занял обыкновенный JavaScript-аккордеон (раскрывающийся вниз по клику блок). Аккордеоны очень просты для создания, лишены вышеназванных недостатков и могут принимать практически любые вид и форму. Однако это темы будущих уроков по JavaScript.

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

                
<p>В языке программирования существует метод массивов <code>push()</code>, который позволяет добавлять в конец массива один или несколько элементов. Метод возвращает новую длину массива.</p>

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

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

Если вам необходимо создать блок кода с подсвеченным синтаксисом, чтобы он легко и удобно воспринимался человеком, вы можете воспользоваться JavaScript-библиотеками, например prism.js, или онлайн сервисом подсветки синтаксиса, например на ресурсе pinetools.com. Эти инструменты позволят вам выбрать понравившуюся цветовую схему и без усилий создать красивые блоки кода. Ниже небольшая шпаргалка по пользованию pinetools.com:

<kbd>,<samp>,<var>
— (с англ. keyboard — клавиатура, sample output — пример вывода информации, variable — переменная ) эти теги семантические, они необходимы исключительно для удобства разработчика, чтобы мы не использовали везде один только <span>. Так, <kbd> служит для указания клавиш на клавиатуре\другом устройстве ввода. <samp> необходим для того, чтобы отобразить в нём результат работы компьютерной программы (показать статус выполнения, описание ошибки и т.д.). В <var> помещаются математические и иные вычислительные выражения.

                
<p>Сочетание клавиш <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> в браузере Chrome откроет панель разработчика,<br> которой вы будете пользоваться ежедневно в своей работе.</p> <p><samp>Fatal error: Area code is already set</samp></p> <p>Простой пример уравнения может быть таким: <var>x</var> = <var>y</var> + 2 </p>

Как видим, браузер отобразил <kbd> и <samp> при помощи моноширинного шрифта, а <var> курсивом. Многие браузеры поступят аналогичным способом, однако какие-то могут выделять эти теги по-своему. Стандарта здесь нет. Для дополнительной стилизации вы должны описать собственные правила CSS для этих тегов.

Домашнее задание к уроку

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

Необходимо очков: