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

Существует несколько способов выделить текст на странице. Сделать это можно с помощью стилей, а можно с помощью тегов. Нас (пока) интересует второй вариант.

< b> < /b> — устанавливает жирное начертание шрифта.

< i> < /i> - устанавливает курсивное начертание шрифта.

< u> < /u> - добавляет подчеркивание к тексту.

< em> < /em> — предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

< strike> < /strike> — перечёркивает текст. Данный тег исключён из HTML5 вместо него рекомендуется использовать < s> < /s>

< tt> < /tt> - отображает текст моноширинным текстом. Исключён из HTML5.

< sup> < /sup> — отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

< sub> < /sub> — отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

< strong> < /strong> — предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

< small> < /small> — уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Тег < small> уменьшает текст на одну условную единицу. Допускается применение вложенных тегов < small>, при этом размер шрифта будет меньше на 1 с каждым вложенным уровнем, но не может быть меньше, чем 1.

< big> < /big> — увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега < big> увеличивает текст на одну условную единицу. Допускается применение вложенных тегов < big>, при этом размер шрифта будет больше с каждым уровнем.

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

< blockquote> < /blockquote> — предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.

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

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

< h1>..< h6> < /h6>..< /h1> - HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег < h1> представляет собой наиболее важный заголовок первого уровня, а тег < h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги < h1>, …, < h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align, который определяет выравнивание заголовка, может принимать значения left — выравнивание заголовка по левому краю, center — выравнивание по центру, right - выравнивание по правому краю, justify - выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

< font> < /font> — представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color — устанавливает цвет текста, face — определяет гарнитуру шрифта, size — задает размер шрифта в условных единицах.

< cite> < /cite> - помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера < cite> курсивом.

< abbr> < /abbr> — указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа. По умолчанию, текст заключенный в контейнере < abbr> подчеркивается пунктирной линией.

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

< b> < i> Это жирный курсив< /i> < /b>

Заключение

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

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

Дополнительный материал:

Sublime text

https://www.sublimetext.com/

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

https://validator.w3.org

Справочник по HTML

https://htmlbook.ru/

Литература

Стандарт HTML 4

https://www.w3.org/TR/1999/REC-html401-19991224/

Влад Мержевич

https://htmlbook.ru/books