Перечёркивание текста по диагонали

Несколько примеров как зачеркнуть текст по диагонали с помощью псевдоэлементов CSS :before и :after .

Сверху вниз

1000 ₽

del < font-size: 40px; position: relative; color: #000; text-decoration: none; >del:before

Снизу вверх

1000 ₽

del < font-size: 40px; position: relative; color: #000; text-decoration: none; >del:before

Крестом

1000 ₽

del < font-size: 40px; position: relative; color: #000; text-decoration: none; >del:before < content: ""; border-bottom: 3px solid red; position: absolute; width: 100%; height: 50%; transform: rotate(-12deg); left: 0; >del:after

21.08.2019, обновлено 30.12.2019
Предыдущая запись Перечёркнутый текст
Следующая запись Размеры Iframe

Другие публикации

Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код.

Текст с градиентом

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

Блоки со стрелками (часть 1)

Добавить стрелки к блоку можно с помощью псевдо-элемента :before.

Как скрыть лишний текст в блоке

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

Пример парсинга html-страницы на phpQuery

phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют.

Как сделать несколько фонов в background

В CSS3 появилась возможность указать в свойстве background несколько изображений (Multiple Backgrounds), при этом они.

Как подчеркнуть текст в css

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами ):

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

Подчеркнуть текст — CSS

Как мы уже говорили в статье Зачеркнутый текст, декорации текста задаются при помощи свойства text-decoration. Подчеркнутый текст задается параметром underline:

Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:

Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.

Способы подчеркивания в CSS

Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “Crafting link underlines” на Medium. Разработчики Medium не пытаются сделать что-то безумное, они просто хотят создать красивую линию под текстом.

Правильное подчеркивание текста в увеличении

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

Что не так с привычным text-decoration: underline ? Если речь идет об идеальном сценарии, подчеркивание должно делать следующее:

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

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

Подходы

Так что это за различные способы, которыми мы можем реализовать подчеркивание в вебе?

Вот те, которые я рассматриваю:

text-decoration ;
border-bottom ;
box-shadow ;
background-image ;
фильтры SVG;
Underline.js (canvas);
text-decoration-* .

Разберем эти способы один за другим и поговорим о плюсах и минусах каждого из них.

text-decoration

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

Самая большая проблема с text-decoration это отсутствие настроек. Вы ограничены цветом и размером шрифта текста и у вас нет кроссбраузерного способа изменить это. Мы еще поговорим об этом подробнее.

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

не пропускает нижние выносные элементы во всех остальных браузерах;
не позволяет изменять цвет, толщину или стиль линии.

border-bottom

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

Вот так border-bottom выглядит у строчных элементов.

Главный недостаток — это расстояние линии подчеркивания от текста, она целиком ниже выносных элементов. Вы можете исправить это, задав элементам свойство inline-block и уменьшив line-height , но тогда вы потеряете возможность оборачивать текст. Хорошо для отдельных строчек, но больше нигде непригодно.

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

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

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

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

box-shadow

box-shadow рисует подстрочную линию за счет двух внутренних теней: одна создает прямоугольник, а вторая скрывает его часть. Это значит, что вам нужен однотонный фон для того, чтобы это работало.

Вы можете использовать тот же трюк с text-shadow для заполнения пропусков между подчеркиванием и выносными элементами. Но если цвет подчеркивания отличается от цвета текста — или он просто достаточно тонкий, линия не будет сталкиваться с выносными элементами так, как при использовании text-decoration .

может позиционироваться ниже базовой линии;
может пропускать выносные элементы за счет text-shadow ;
позволяет изменять цвет и толщину линии;
работает с многострочным текстом.

не позволяет изменять стиль подчеркивания;
работает не на любом фоне.

background-image

Метод с background-image наиболее близок к нашим желанием и обладает минимумом недостатков. Идея состоит в использовании linear-gradient и background-position для создания изображения, повторяющегося под строчками текста.

Для работы этого подхода необходимо, чтобы текст был в стандартном режиме display: inline; .

Следующий вариант обходится без linear-gradient , для эффектов вы можете добавить свое фоновое изображение.

может позиционироваться ниже базовой линии;
может пропускать выносные элементы за счет text-shadow ;
допускает изменение цвета, толщины и стиля линии;
работает с кастомными изображениями;
обертывает несколько строчек текста;
работает на любом фоне, если не применять text-shadow .

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

Фильтры SVG

Я достаточно много поиграл с этим способом. Вы можете создать строчный фильтр SVG, который рисует линию и затем расширяет текст для маскировки части линии, которую мы хотим сделать прозрачной. Затем вы можете задать фильтру id и ссылаться на него в CSS примерно так filter: url(‘#svg-underline’) .

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

Вот как это выглядит в Chrome и Firefox:

Подчеркивание текста при помощи фильтров SVG

Поддержка в IE, Edge и Safari проблематична. Сложно тестировать поддержку фильтра SVG в CSS. Вы можете использовать директиву @supports с filter , но это проверит лишь работу ссылки на фильтр, но не работу самого фильтра. Мои попытки завершились муторным определением возможностей браузера, это ощутимый недостаток метода.

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

не работает с многострочным текстом;
не работает в IE, Edge и Safari, но вы можете использовать text-decoration в качестве запасного варианта, в Safari он смотриться достойно.

Underline.js (Canvas)

Underline.js завораживает. Я считаю впечатляющим то, что сделала Вентин Жанг за счет владения JavaScript и внимания к деталям. Если вы не видели техническое демо Underline.js, бросайте читать и уделите ему минуту времени. Есть также ее девятиминутный доклад о том, как это работает, но я опишу кратко: подчеркивание рисуется с помощью элементов . Это новый подход, который работает на удивление хорошо.

Несмотря броское название, Underline.js это всего лишь техническое демо. Это значит, что вы не можете просто взять и подключить это в свой проект без изменения кода.

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

Новые свойства text-decoration

Вы помните, что я обещал подробнее поговорить о text-decoration . Время пришло.

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

text-decoration-color
text-decoration-skip
text-decoration-style

Но слишком сильно не радуйтесь… Поддержка в браузерах — как всегда. Такие дела.

text-decoration-color

Свойство text-decoration-color позволяет вам изменять цвет подчеркивания отдельно от цвета текста. Поддержка этого свойства лучше, чем можно было ожидать — оно работает в Firefox и с префиксом в Safari. Вот в чем загвоздка: если у вас есть выносные элементы, Safari поместит подчеркивание поверх текста.

text-decoration-skip

Свойство text-decoration-skip включает пропуск выносных элементов в подчеркиваемом тексте.

подчеркивание с text-decoration-skip в Safari

Это свойство нестандартное и работает сейчас только в Safari, с префиксом -webkit- . Safari по умолчанию активирует это свойство, поэтому выносные элементы всегда не перечеркиваются.

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

text-decoration-style

Свойство text-decoration-style предлагает такие же возможности оформления, что и у свойства border-style , добавляя кроме этого стиль wavy .

Вот список доступных значений:

Сейчас свойство text-decoration-style работает только в Firefox, вот скриншот из него:

образец работы text-decoration-style

Чего не хватает

Серия свойств text-decoration-* намного более интуитивна в использовании, чем остальные свойства CSS для оформления подчеркивания. Но если взглянуть внимательнее, то для удовлетворения наших запросов не хватает способов задать толщину или позицию линии.

После небольшого исследования, я нашел еще пару свойств:

text-underline-width
text-underline-position

Судя по всему, они относятся к ранним черновикам CSS, но их так и не реализовали в браузерах из-за отсутствия интереса.

Выводы

Так какой же способ подчеркивания лучший?

Для небольшого текста я рекомендую использовать text-decoration с оптимистичным добавлением text-decoration-skip . Это выглядит немного безвкусно в большинстве браузеров, но подчеркивание в браузерах было таким всегда и люди просто не обратят внимания. Плюс всегда есть шанс, что при наличии у вас терпения, это подчеркивание когда-нибудь будет выглядеть хорошо без необходимости для вас что-то менять, так как это сделают в браузерах.

Для основного текста имеет смысл использовать background-image . Этот подход работает, выглядит замечательно и для него есть миксины Sass. Вы, в принципе, можете пропустить text-shadow , если подчеркивание тонкое или отличается цветом от текста.

Для отдельных строк текста используйте border-bottom вместе с любыми дополнительными свойствами.

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

В будущем, когда поддержка в браузерах станет лучше, единственным ответом будет набор свойств text-decoration-* .

Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck, в которой рассматриваются те же вопросы.

Изучаем подчеркивание текста CSS

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

Располагаться ниже базовой линии строки;
Не соприкасаться непосредственно с частями букв, выступающими ниже базовой линии;
Должна быть возможность изменять цвет, толщину и стиль линии подчеркивания;
Подчеркивание должно продолжаться после переноса текста;
Подчеркивание должно работать на любом фоне.

Все это довольно очевидно. Но, насколько я знаю, не существует способа добиться всего этого с помощью CSS .

Подходы

Способы, с помощью которых можно подчеркнуть текст в интернете:

text-decoration ;
border-bottom ;
box-shadow ;
background-image ;
Фильтры SVG ;
Underline.js (canvas) ;
text-decoration-* .

Давайте рассмотрим их один за другим и поговорим об их плюсах и минусах.

text-decoration

text-decoration CSS — это самый простой способ подчеркивания в CSS. Применяется всего одно свойство и на этом все. Для небольших размеров шрифта это может выглядеть довольно прилично, но увеличьте размер и та же линия начинает выглядеть неуклюже.

Самая большая проблема применения text-decoration — отсутствие настраиваемости. Свойство соответствует любому размеру шрифта или цвету текста, к которому оно применено, и не существует кроссбраузерного способа изменить заданный стиль.

Его просто применять;
Располагается ниже базовой линии;
По умолчанию добавляет отступы от частей букв, выступающих ниже базовой линии ( в Safari и iOS );
Переносится по строкам;
Подходит для любого фона;

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

border-bottom

border-bottom — отличается простотой использования и настраиваемостью. Свойство позволяет довольно просто изменять цвет, толщину и стиль линии подчеркивания текста CSS .

Результат применения border-bottom к строчным элементам:

Обратите внимание, что линия подчеркивания размещается под частями букв, выступающими ниже базовой линии. Это можно изменить, задав для элемента свойство inline-block и уменьшив значение line-height . Но в этом случае вы теряете возможность переносить текст. Подходит для однострочного текста.

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

Чтобы задать одно подчеркивание, нужно применить четыре свойства стилей. Это больше, чем для text-decoration .

С помощью text-shadow можно задать отступы от частей букв, выступающих ниже базовой линии;
Можно изменить цвет, толщину и стиль линии CSS подчеркивания;
Можно задать переходы и анимацию для цвета и толщины линии подчеркивания;
Переносится по умолчанию, если это не inline-block ;
Работает на любом фоне, если не используется text-shadow .

Размещается далеко от текста, это положение трудно изменить;
Нужно использовать много дополнительных свойств;
Странное выделение текста при использовании свойства text-shadow .

box-shadow

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

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

Нижнее подчеркивание CSS может быть размещено ниже базовой линии;
С помощью text-shadow можно задать отступы ниже базовой линии;
Можно изменить цвет и толщину линии подчеркивания;
Подчеркивание переносится построчно.

Невозможно изменить стиль;
Не работает для любого фона.

background-image

background-image дает результат, подходящий под все перечисленные критерии. При этом используются linear-gradient и background-position, чтобы создать изображение, которое повторяется по горизонтали вдоль строк текста. При этом для текста должно быть задано display: inline;.

Вместо linear-gradient можно добавить собственное изображение с какими-нибудь эффектами.

Подчеркивание ссылки CSS может быть размещено ниже базовой линии;
С помощью text-shadow можно задать отступы ниже базовой линии;
Можно изменять цвет, толщину и стиль подчеркивания;
Работает с пользовательскими изображениями;
Подчеркивание переносится построчно;
Работает на любом фоне, если не используется text-shadow .

Размер изображения может изменяться по-разному в зависимости от разрешения, браузера и масштаба просмотра.

Фильтры SVG

Можно создать SVG элемент filter , который рисует линию, а затем расширяет текст, чтобы скрыть прозрачные части линии. После этого нужно задать для фильтра идентификатор и сослаться на него в CSS :

Преимущество этого подхода заключается в том, что фильтр добавляет прозрачность, не используя text-shadow . Можно задать промежутки линии CSS подчеркивания выступающими ниже базовой на любом фоне. Но этот метод не применим для однострочного текста, в этом его основной недостаток.

Вот как это выглядит в Chrome и Firefox :

Фильтры SVG

Поддержка браузерами IE , Edge , и Safari является проблематичной. Проверить наличие поддержки SVG-фильтра в CSS трудно.

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

Подчеркивание не переносится на несколько строк;
Не работает в IE , Edge или Safari , но можно создать резервный вариант с помощью text-decoration . В Safari оно будет выглядеть хорошо в любом случае.

Underline.js (canvas)

Underline.js рисует CSS подчеркивание с помощью элементов . Это новый подход, который работает на удивление хорошо.

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

Мы приводим данный метод для демонстрации возможностей при создании красивых, интерактивных подчеркиваний.

Свойства text-decoration-*

Это свойство прекрасно работает само по себе, но можно добавить несколько экспериментальных свойств для настройки внешнего вида:

text-decoration-color ;
text-decoration-skip ;
text-decoration-style .

Только не радуйтесь раньше времени. Помните о проблеме поддержки браузерами.

TEXT-DECORATION-COLOR

Позволяет изменить цвет CSS подчеркивания пунктиром отдельно от цвета текста. Данное свойство хорошо поддерживается браузерами. Оно работает в Firefox и с помощью префикса в Safari . Но если не обрабатывать разрывы ниже базовой линии текста, то Safari поместит подчеркивание поверх текста.

Подчеркнутый текст html (CSS)

Рассмотрим все способы как можно сделать подчеркнутый текст через html и CSS. Всего существует три варианта:

Через html тег и
Через свойство CSS text-decoration
Через свойство CSS border-bottom

Подчеркнутый текст через html тег и

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

Название пришло от английского слова «underline». Html тег считается более новым.

Преобразуется на странице в

Обычный текст. Подчеркнутый текст через тег u

Подчеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration , которое отвечает за форматирование текста html для создания подчеркивания.

Синтаксис CSS text-decoration

none — текст без оформления
underline — нижнее подчеркивание
overline — верхнее подчеркивание
line-through — зачеркивание текста
blink — мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение underline

Преобразуется на странице в

Можно также задавать стиль линии и цвет. Более подробно про эту возможность читайте в статье: CSS text-decoration

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Преобразуется на странице в

Текст со свойством border-bottom (красное подчеркивание)
Текст со свойством border-bottom (пунктирное подчеркивание)

Похожие публикации:

Как подключить датчик газа в arduino
Как подключить семисегментный индикатор к arduino
Как поднять изображение вверх css
Как полностью удалить node js ubuntu

Как сделать подчеркнутый текст в css

После этого оборачиваем данный текст в тег для «подчеркивания ния текста html» :

Результат подчеркивания текста html с помощью тега

Какой мы здесь видим результат и какой вывод можем сделать!?

Что текст прекрасно подчеркивается с помощью тега!

Подчеркнутый текст через css.

Как вы знаете есть «3 способа css» — не будем использовать все, возьмем лишь один:

Html подчеркнуть текст – Подчеркнутый текст силами HTML и CSS

Подчеркнуть текст — CSS

Смотрите также:

text-decoration | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

Описание

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

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

Объектная модель

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

Жирный или подчеркнутый текст в CSS и HTML

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

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

Навигация по статье:

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

Как сделать подчеркнутый текст CSS-стилями

Подчеркнутый текст CSS

Так же это CSS-свойство имеет и другие интересные значения:

blink — позволяет сделать слово или предложение мерцающим,
line-through — перечёркивает слово или предложение,
overline — позволяет провести линию над словом.

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

Подчеркнутый текст HTML-тегами

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

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

Как сделать жирный текст CSS-стилями

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

Итак, свойство font-weight может принимать фиксированные значения:

bold – жирный
bolder – еще жирнее
normal – начальный вид
lighter – делает буквы тоньше, по сравнению с normal

Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

Жирный

Еще жирнее

Совсем не жирный текст CSS

Очень жирный текст CSS

Совсем не жирный текст CSS

Очень жирный текст CSS

Совсем не жирный текст CSS

Очень жирный текст CSS

Жирный текст HTML-тегами

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

Делаем жирный текст с помощью html-тегов .

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

А на сегодня у меня все! Успешного вам форматирования текста! До встречи в следующих статьях!

С уважением Юлия Гусарь

Нижнее подчёркивание html или все хитрости оформления текста

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

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

А давай-ка вот этим подчеркнем!

В языке html существуют специальный парный тег для подчеркивания текста: слово.

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

Для подчеркивания текстового контента в основном используются такие свойства: border и text-decoration.

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

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

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

Теперь обсудим свойство языка css text-decoration. Данный элемент отвечает за дополнительные украшения текста.

К ним относятся:

мигание (blink)
линия над текстом (overline)
зачеркнутые объекты (line-through)
наследование стилизации (inherit)
отмена всех дополнительных декораций (none)
необходимое нам подчеркивание (underline)

Настало время практики

Теперь я хочу, чтоб вы закрепили полученные знания и практически опробовали приведенный мной пример программного кода. Для тех, кто знаком с данной темой, это также будет полезно. Как мы все знаем: «Повторение – мать учения!».

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

Подчеркивание

Озаглавим текст подчеркнутым названием

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

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

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

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

С уважением, Роман Чуешов

Прочитано: 484 раз

Подчеркивание в html: способы.

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

Подчеркивание в HTML

Итак, как же сделать подчеркивание? Подчеркивание текста в html оформляется при помощи тега . Он используется во всех спецификациях html и xhtml, но только при условии переходного , так как должна быть указана версия разметки для браузера. В этом случае документ успешно проходит валидацию. Указывать элемент надо стандартно, то есть в самом верху страницы.

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

Слово «текст» при этом будет подчеркнутым.

Подчеркнуть можно и отдельную букву в слове:

Заголовок номер два
Наш текст в абзаце

Подчеркивание в CSS

Декорирование текста при помощи css — удобный и практичный способ. Самые простые способы такого выделения: использование text-decoration или border-bottom.

Чтобы подчеркнуть текст с text-decoration, свойство необходимо добавить к нужному классу.

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

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

нужный-класс

Затем текст украшается при помощи следующего свойства:

Так выходит декорирование с пунктирной линией. Чтобы сделать ее сплошной, вместо «dashed» применяется «solid». Тем, кому нравится украшать текст подчеркиванием точками, можно попробовать применить «dotted».

Стили рамок прописываются в одну строку. Кроме типа подчеркивания, нужно еще указать толщину подчеркивания и цвет. Чтобы определиться с размером, можно поэкспериментировать, но обычно достаточно 1 или 2 пикселей. Цвет текста тоже можно сделать в цвет подчеркивания:

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

Третий заголовок
Наш текст в абзаце

Вот и все, это основы подчеркивания в html.

Как добавить подчеркивание к заголовку?

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

Линия под текстом на всю ширину блока

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom, его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

Расстояние от линии до текста можно регулировать свойством padding-bottom, добавляя его к селектору h2. Результат данного примера показан на рис. 1.

Рис. 1. Линия под заголовком

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline, опять же, добавляя его к селектору h2 (пример 2).

Пример 2. Линия на ширину текста

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

Рис. 2. Подчеркивание заголовка

В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

text-decoration — подчёркнутый и зачёркнутый текст

Поддержка браузерами

Описание

CSS свойство text-decoration позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).

Свойство text-decoration может принимать одно значение или больше. Чтобы задать сразу несколько значений, их следует разделить пробелами.

Самый часто используемый декор для текста — это подчёркивание. Подчёркнутый текст задаётся значением underline :

Если вам, наоборот, нужно убрать подчёркивание, например убрать подчеркивание ссылки, заданное по умолчанию, то нужно воспользоваться значением none :

Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:

К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством text-decoration , будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).

Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: (подчёркнутый текст) и (зачёркнутый текст).

html нижнее подчеркивание текста

Название пришло от английского слова «underline». Html тег считается более новым.

Преобразуется на странице в

Обычный текст. Подчеркнутый текст через тег u

Подчеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration , которое отвечает за форматирование текста html для создания подчеркивания.

Синтаксис CSS text-decoration

none — текст без оформления
underline — нижнее подчеркивание
overline — верхнее подчеркивание
line-through — зачеркивание текста
blink — мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение underline

Преобразуется на странице в

Можно также задавать стиль линии и цвет. Более подробно про эту возможность читайте в статье: CSS text-decoration

Подчеркнутый текст через свойство CSS border-bottom

Преобразуется на странице в

Текст со свойством border-bottom (красное подчеркивание)
Текст со свойством border-bottom (пунктирное подчеркивание)

Подчеркивание для блочных элементов вроде тега

Линия под текстом на всю ширину блока

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom , его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

Расстояние от линии до текста можно регулировать свойством padding-bottom , добавляя его к селектору H1 . Результат данного примера показан на рис. 1.

Рис. 1. Линия под заголовком

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline , опять же, добавляя его к селектору H1 (пример 2).

Пример 2. Линия на ширину текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 2. Подчеркивание заголовка

Существует несколько способов реализовать подчеркивание в CSS. Форматирование текста в CSS реализуется с помощью свойства text-decoration. Оно позволяет реализовать подчеркнутый текст в CSS. Для этого необходимо установить значение underline. Если текст родительского элемента уже подчеркнут, можно также использовать значение inherit.
Например, этот код сначала убирает подчеркивание (с помощю значения none) ссылки, а потом – добавляет, если посетитель сайта наводит на нее мышью.

Плюсы стандартного метода следующие:

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

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

Другие способы подчеркивания в CSS

Стандартный метод хорош, но лишь для ограниченного количества возможностей. Так, с помощью этого метода невозможно изменять стиль линии. Также такое подчеркивание плохо выглядит на большом размере шрифта. Кроме этого, он не пропускает нижние выносные элементы почти в любом браузере (исключение – Safari для Mac и iOS).

border-bottom

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

Результат интерпретации браузером этого кода.

Недостаток способа – подчеркивание осуществляется слишком низко по сравнению с текстом, поэтому линия (или пунктир) появляются уже под выносными элементами. Чтобы исправить это, можно использовать свойство text-shadow, использовав цвет фона в качестве цвета тени. Но выделение будет очень уродливым.
Также верстальщик имеет возможность применять переходы и анимации к подстрочной линии. Например, можно реализовать изменение цвета в течение какого-то времени. Если не использовать для пропуска выносных элементов свойство text-shadow, свойство может работать на любом фоне.

box-shadow

Это свойство использует две внутренние тени: первая рисует прямоугольник, а вторая прячет его часть. Метод может использоваться только на однотонном фоне. К этому свойству также можно добавить text-shadow для пропуска выносных элементов. Плюсы метода:

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

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

background-image

Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки.
Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline;
Выглядит это так.

Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками. Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться.
Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.

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

Как сделать подчеркнутый текст в html?

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

Мама мыла Раму.

Слово «мыла» при этом будет подчеркнутым.

Если подчеркивание нужно применить к множеству элементов, расставлять теги каждый раз, конечно, будет неудобно. Можно объединить их одним классом и задать в CSS этому классу свойство text-decoration: underline

Эффект будет тот же.

В HTML тег для отображения подчёркнутого шрифта — из самых простых. Обозначается он «U», что означает underline (подчёркивание). Закрывающий тег обязателен. В разметке страницы это выглядит как-то так:

текст, который будет подчёркнутым

Если вы работаете с CSS, можно использовать конструкцию text-decoration: underline.

В выделенном указании стилей (в заголовке страницы или отдельном файле) это может выглядеть следующим образом:

Тут при наведении курсора на ссылку (тег «A») ссылка подчеркнётся.

При указании стиля непосредственно для элемента это выглядит так:

подчёркну тый заголовок

Похожие публикации:

Как задать расстояние между словами в css
Как изменить расстояние между буквами в css
Как уменьшить масштаб картинки в css
Как установить css в sublime text 3

Подчеркнутый текст в html: Тег — подчёркнутый текст

могу ли я указать стиль подчеркнутого текста в html?

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

html css
Поделиться Источник netimen 14 октября 2009 в 21:57

3 ответа

Стиль HTML по умолчанию для элементов управления в библиотеке Qt Это вопрос о библиотеке Qt, а не о веб-дизайне. Для QLabel и других элементов управления я могу установить текст HTML, например

Some Text

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

? Следующий вопрос: Могу…
Могу ли я получить положение элементов в NSAttributedString? Я использую NSAttributeString, чтобы получить что-то вроде выше(включая обычный текст ,подчеркнутый текст и изображения) , и теперь я хочу сделать : если пользователь нажал на подчеркнутую текстовую область , я сделаю некоторые специальные действия (откройте веб или sth). Теперь я могу получить…

Ознакомьтесь с этим учебником по пользовательским подчеркиваниям из списка отдельно

Вы также можете попробовать что-то вроде этого.

.double_underline

Поделиться Ólafur Waage 14 октября 2009 в 21:58

Да, вы можете поместить строку выше или ниже текста:

text-underline-position: above;

Однако здесь нет двойного подчеркивания.

14 октября 2009 в 22:06

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

Поделиться RMorrisey 14 октября 2009 в 22:14

Html. ActionLink стиль текста Я хочу, чтобы стиль только часть текста внутри моего ActionLink, мне нужно знак плюс, чтобы быть жирным шрифтом. В чистом html я могу сделать это таким образом. +Invite User Если попробовать его с ActionLink,…
Какой тег следует / можно использовать для подчеркнутого текста? Прежде всего, я понимаю, что стиль в HTML должен обрабатываться CSS, и я не хочу это менять. Мне просто нужен твердый тег, который я могу использовать для подчеркивания, тег, предназначенный для подчеркнутого текста, или тот, который имеет смысл использовать как таковой. Тогда я могу стиль его с…

This is a line of text on my web page

Это отображается как:. ..

Можно ли явно установить высоту строки подчеркнутого текста, используя «text-decoration: underline;» в CSS?

Можно ли явно установить высоту строки текста, подчеркнутого с помощью text-decoration: underline; в CSS? IE и FireFox представляют текст с font-weight: bold; и text-decoration: underline; ,…

Как я могу получить стиль выделенного текста в JTextPane?

Я пытаюсь создать простой редактор WYSIWYG, который позволит пользователям выбирать текст и bold/underline/italicise его. В настоящее время пользователь может выбрать текст, щелкнуть его правой…

Стиль HTML по умолчанию для элементов управления в библиотеке Qt

Это вопрос о библиотеке Qt, а не о веб-дизайне. Для QLabel и других элементов управления я могу установить текст HTML, например

Some Text

. вопрос: где определяется стиль по умолчанию…

Могу ли я получить положение элементов в NSAttributedString?

Я использую NSAttributeString, чтобы получить что-то вроде выше(включая обычный текст ,подчеркнутый текст и изображения) , и теперь я хочу сделать : если пользователь нажал на подчеркнутую текстовую. ..

Html.ActionLink стиль текста

Я хочу, чтобы стиль только часть текста внутри моего ActionLink, мне нужно знак плюс, чтобы быть жирным шрифтом. В чистом html я могу сделать это таким образом.
Какой тег следует / можно использовать для подчеркнутого текста?

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

Как изменить стиль произвольной части текста html

Я хочу изменить стиль на части текста на произвольной позиции с произвольной длиной. Например, у меня есть это в моем html

Как сохранить стиль исходного текста при вставке в JTextPane?

Используя Java Swing, я создаю простое .файл rtf редактор, используя RTFEditorKit(). Я использую JTextPane.

Я добавил код для жирного, курсивного и подчеркнутого текста. Мой проблемный сценарий: У…

Java-добавление и удаление подчеркнутого текста в JButton при наведении курсора мыши

Я использую следующий код для успешного наведения эффекта подчеркнутого текста, когда пользователь наводит указатель мыши на JButton. Это работает так, как задумано. При нажатии кнопки JButton…

Основы редактирования текста в HTML — Изучение веб-разработки

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

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

Упорядоченный контент делает чтение более легким и приятным.

В HTML каждый абзац заключен в элемент

, подобно:

Я параграф, да, это я.

Каждый заголовок заключен в элемент заголовка :

Я заголовок истории.

Имеется шесть элементов заголовка: ,

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

представляет под-подзаголовки и так далее.

Создание иерархической структуры

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

Сокрушительная скука Крис Миллс Глава 1: Темная ночь Это была темная ночь. Где-то кричала сова. Дождь обрушился на . Глава 2: Вечное молчание Наш главный герой ничего не мог, когда шёпот из тёмной фигуры . Призрак говорит

Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!»

Всё это действительно зависит от вас — что именно будут представлять собой элементы, пока существует иерархия. Вам просто нужно иметь в виду несколько хороших правил при создании таких структур.

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

Зачем нам необходима структура?

Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своем локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).

Однако, когда вы откроете документ в своем браузере, вы увидите, что текст выглядит как один большой кусок!

Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац. Более того:

Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки (мы обычно тратим очень мало времени на веб-странице). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения SEO (Search Engine Optimization — поисковая оптимизация).
Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
Чтобы стилизовать контент с помощью CSS или сделать его интересным с помощью JavaScript, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.

Поэтому нужно дать структурную разметку нашему контенту.

Активное изучение: создание структуры для нашего контента

Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».

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

Playable code

Почему мы нуждаемся в семантике?

Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметoв; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зеленый свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

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

Это заголовок верхнего уровня

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

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

Это заголовок верхнего уровня?

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

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

Неупорядоченные

Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмем, к примеру, список покупок:

молоко яйца хлеб хумус

unordered list

Активное изучение: разметка неупорядоченного списка

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

Playable code

Упорядоченные

Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмем в качестве примера маршрут следования:

Доедьте до конца дороги Поверните направо Едьте прямо через первые два перекрестка с круговым движением Поверните налево на третьем перекрестке Школа справа от вас, 300 метров вверх по дороге

Доедьте до конца дороги
Поверните направо
Едьте прямо через первые два перекрестка с круговым движением
Поверните налево на третьем перекрестке
Школа справа от вас, в 300 метрах вверх по дороге

Активное изучение: разметка упорядоченного списка

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

Playable code

Активное изучение: разметка собственной страницы рецептов

Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла text-start.html и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.

Playable code

Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.

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

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


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

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


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

Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.

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

Акцент

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

Я рад, что ты не опоздал.

Я рад, что ты не опоздал.

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

В таких случаях в HTML используется элемент (выделение). Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном. Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив. Для выделения курсивом вы можете использовать элемент и CSS, или, возможно, элемент (смотрите ниже).

Я рад, что ты не опоздал.

Важное значение

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

Эта жидкость очень токсична.

Я рассчитываю на вас. Не опаздывай!

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

Эта жидкость очень токсична.
 Я рассчитываю на тебя. Не опаздывай!

При желании вы можете вложить важные и акцентированные слова друг в друга:

Эта жидкость очень токсична — если ты выпьешь её, то можешьумереть.

Активное изучение: Давайте будем важны!

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

Playable code

Курсив, жирный шрифт, подчеркивание…

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

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

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

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

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

Колибри обыкновенный (архилоус обыкновенный) — наиболее часто встречающийся вид колибри в северо-восточной Америке.
Случился прилив иностранных слов, таких как vatrushka, nasi goreng и soupe à l'oignon.
Когда-нибудь я узнаю, как гаварить без ошибок.

  Отрежьте два ломтика хлеба.
  Добавьте кусочек помидора и лист латука между ломтями хлеба.

Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как создавать гиперссылки, возможно, самый важный элемент в Интернете.

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

Выводим текст

Текст задаётся с помощью тега text. Основные атрибуты — x и y. Нужно не забывать указывать базовую линию для текста, за которую отвечает атрибут y. Если её не указать, то по умолчанию она окажется в точке с координатой 0, и текст станет невидимым, так как он рисуется над базовой линией. Значение атрибута должно быть больше размера шрифта. Размер viewBox также должно быть по крайней мере равен размеру атрибута. Атрибут font-sizeзадаёт размер шрифта в пикселях относительно viewBox. Текст при этом адаптируется к размерам страницы. Также доступны и другие атрибуты.

Текст из SVG можно выделять и копировать. Текст, помещаемый в SVG-документ, индексируется поисковыми системами.

Этот кот в SVG

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

Как и в HTML, лишние пробелы игнорируются.

Чтобы сдвинуть текст по горизонтали, можно использовать атрибут x в text. Если атрибут не указан, то используется значение по умолчанию 0.

Атрибуты

direction — Направление текста. В некоторых языках (например, в арабском) принято писать текст справа налево. Для задания написания справа налево необходимо дополнительно включать атрибут unicode-bidi. Возможные значения: rtl | ltr (по умолчанию)
dominant-baseline — Выравнивание текста относительно горизонтальной линии. Возможные значения: auto (по умолчанию) | hanging | mathematical
fill — Цвет текста. Поддерживаются именованные значения, а также RGB-код в десятичной и шестнадцатеричной формах. Значение по умолчанию — black
font-family — Шрифт текста. Все шрифты, доступные на компьютере. При отсутствии заданного шрифта будет использован подобный (например, при отсутствии шрифта Arial будет использован Arial Bold). Значение по умолчанию — Arial
font-size — Размер шрифта. Значение по умолчанию 12 пт.
font-size-adjust — Значение по умолчанию — none
font-stretch — Сжатие и растяжение текста. Возможные значения: normal (по умолчанию) | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
font-style — Начертание текста. Возможные значения: normal (по умолчанию) | italic | oblique
font-weight — Вес шрифта. От 100 до 900 — Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal — то же, что «400». bold — то же, что «700». bolder — Определяет вес шрифта, более темный, чем наследуемый. Если такого веса нет, результатом будет более «темное» числовое значение (а шрифт не изменяется), если только наследуемое значение не «900», в этом случае результат будет также «900». lighter — Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более «светлое» числовое значение (а шрифт не изменяется), если только наследуемое значение не «100», в этом случае результат будет также «100». Возможные значения: normal (по умолчанию) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
glyph-orientation-horizontal — Горизонтальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (и значения со знаком минус). По умолчанию — auto или 0
glyph-orientation-vertical — Вертикальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (И значения со знаком минус). По умолчанию — auto или 0
kerning — Интервал между буквами. Возможные значения: auto (по умолчанию) | число
letter-spacing — Интервал между буквами. Возможные значения: normal | число
text-anchor — Выравнивание текста относительно начала строки. Возможные значения: start (по умолчанию), middle, end
text-decoration — Подчеркивание, надчеркивание, перечеркивание текста. Возможные значения: none (по умолчанию) | underline | overline | line-through
unicode-bidi — Для работы атрибута direction со значением ltr необходимо наличие в коде свойства unicode-bidi со значением embed или override. Возможные значения: normal (по умолчанию) | embed | bidi-override
word-spacing — Интервал между словами. Возможные значения: normal (по умолчанию) | число
writing-mode — Устанавливает расположение текстового фрагмента как единого целого относительно исходной точки. Возможные значения, например, слева направо — сверху вниз ( left to right top to bottom ) не изменяют порядок самих букв в словах. Возможные значения: lr-tb (по умолчанию) | rl-tb | tb-rl | lr | rl | tb
x — Абсцисса верхней левой точки текстового блока. Значение по умолчанию: 0
y — Ордината верхней левой точки текстового блока. Значение по умолчанию: 0

Стилизация

Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style, text-decoration, text-transform и т.д.

Подчеркнутый кот средствами SVG
Частичная стилизация через

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

  w3.org/2000/svg" viewBox="0 0 500 20">  Жирный кот, наклонный кот и подчеркнутый кот.

Жирный кот, наклонный кот и подчеркнутый кот.

Цвет

Цвет текста задаётся через свойство fill.

Цветной кот

Режим вывода текста

Японская письменность использует режим сверху вниз. Этот режим можно включить через атрибут writing-mode со значением tb (top-to-bottom). Я не знаю японских иероглифов, поэтому вставлю русские символы.

Неко — японский кот

Добавление текста в заголовок страницы

Можно сделать красивый заголовок на странице, используя CSS:

 header < width: 80%; margin: 0 auto; >svg text < font-family: sans-serif; text-transform: uppercase; font-weight: 900; font-size: 90px; fill: blue; >  w3.org/2000/svg" viewBox="0 0 285 80"> Hawaii

SVG будет автоматически подстраиваться под размеры контейнера.

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

SVG-текст можно сделать ссылкой.

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

Обводка текста

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

Обведи кота вокруг пальца

Присвоим атрибуту fill значение none, чтобы оставить только обводку.

Обведи кота вокруг пальца

При желании можно вынести код в стили.

Градиент

Текст можно сделать градиентным. Задаём цвета градиента при помощи linearGradient и присваиваем ему идентификатор. Связываем идентификатор с свойством fill.

Градиентный кот

Текст вдоль кривой линии

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

Для начала нужно создать траекторию path в элементе defs. Элементу path добавляем атрибут id, чтобы связать текст в элементе textPath через xlink:href:

Кот вдоль кривой

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

Вернуться в раздел SVG

Форматирование текста в HTML | SEO-портал

Автор: Нотан Ройамов

Форматирование (оформление) текста на сайте способствует улучшению его восприятия пользователями и учитывается поисковыми роботами при оценке релевантности.

Что такое форматирование текста?

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

Значение форматирования текста в SEO

Оформление контента веб-страниц осуществляется с помощью семантических HTML-тегов, помогающих поисковым роботам правильно понимать значение элементов контента:

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

Яндекс.Помощь

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

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

Яндекс.Помощь

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

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

Пример форматирования текста

Форматирование в HTML — это процесс оформления элементов контента посредством HTML-тегов с применением CSS-правил или без него.

На изображениях ниже представлен одинаковый фрагмент контента:

без форматирования (сплошной текст),
с HTML-форматированием (только разметка),
с HTML-форматированием и CSS-оформлением.

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

Как оформлять текст?

В процессе форматирования текста изменяется его HTML-код за счет применения тегов (элементов разметки) к его содержанию.

Форматирование может осуществляться вручную в HTML-коде файла или с помощью функционала текстовых редакторов:

Форматирование в HTML-редакторе обеспечивает более качественный и чистый код, позволяющий поисковым роботам максимально правильно понимать семантику контента.

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

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

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

Блочные элементы форматирования

Тег	Значение
h2	Заголовок 1-го уровня
h3-h6	Подзаголовки
p	Абзац
ul	Маркированный список
ol	Нумерованный список
table	Таблица
blockquote	Цитата
main*	Основной контент
article*	Автономная часть контента
section*	Раздел контента или его части
figure*	Элемент контента
header*	Верхний колонтитул
footer*	Нижний колонтитул
nav*	Элементы навигации
* — теги, появившиеся в спецификации HTML5.

Строчные элементы форматирования

Тег	Значение и отображение
a	Гиперссылка
q	Цитата
i	Курсивное начертание
em	Курсивное начертание
b	Полужирное начертание
strong	Полужирное начертание
s	~~Перечеркнутый текст~~
del	Перечеркнутый текст
ins	Подчеркнутый текст
abbr	Аббревиатура
dfn
br	Перенос строки
time*	Время
mark*	Выделенный текст
* — теги, появившиеся в спецификации HTML5.

Выводы и заключение

Качественное оформление SEO-текста способствуют:

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

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

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

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

;
;
и ;
;
;
и ;
;
;
.

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

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

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

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

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

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

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

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

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

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

.

.
.

Я больше не мёрджу бездумно. Как говорится, enough is enough.

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

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

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

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

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

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

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

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

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

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

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

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

Эйяфьядлайёкюдль

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

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

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

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

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

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

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

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

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

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

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

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

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

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

и

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я работаю простым cleaning manager.

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

и

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2+2=5 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

и

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

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

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

Апдейт. Falcon Heavy успешно запустили.

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

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

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

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

Маск не запустит Falcon Heavy.

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

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

Маск вряд ли запустит Falcon Heavy. 
Первый испытательный запуск Falcon Heavy был успешно произведён 6 февраля 2018 года.

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

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

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

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

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

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

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

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

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

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

Отображение в Chrome

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

q quotes: "\201c" "\201d";
>

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

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

q quotes: "\00ab" "\00bb";
>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-- Пример 1 --
Капибара — полуводное травоядное млекопитающее из семейства водосвинковых.-- Пример 2 --
HTML — это стандартизированный язык разметки документов в вебе.

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

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

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

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

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

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

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


 ul
each val in [1, 2, 3, 4, 5]
li= val

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

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

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

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

Поиск выполнен.

Обработано объектов: 82. Найдено подходящих объектов: 2.

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

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


console.log(2.3 + 2.4) 
4.699999999999999

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

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

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

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

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

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

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

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

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

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

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

Найдите пункт с настройками по пути

File → 
Settings

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

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

yarn start:theproject does not exist, did you mean:

yarn start:the-project

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

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

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

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

-- Пример 1 --
У нас есть число 1 и число 2.-- Пример 2 --
Она написала E = mc².

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

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

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

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

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

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

Всем, всем, всем!

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

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

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

и

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

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

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

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

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

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

H₂SO₄

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

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

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

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

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

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

 
東 tō
京 kyō

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

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


東
とう南
なん

Southeast
の方角

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

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

и

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

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

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

קביברה в переводе с иврита означает «капибара».

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

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

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

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

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

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

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

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

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

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

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

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

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

-- Пример 1 --
2 ноября 2018 года.-- Пример 2 --
Акции Tesla упали из-за поведения Илона Маска в прямом эфире в в эту пятницу.  -- Пример 3 --
Мем опубликован 7 часов назад.

Браузер отобразит эти строки как обычный текст. Содержимое атрибута 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 нужен для логического форматирования и важен для поисковиков. Благодаря этому тегу ссылки в поисковой выдачи размещаются в хронологическом порядке.

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

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

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

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

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

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

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

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

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

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

Виды шрифтов

Если вы хотите выделить тот или иной участок текста, воспользуйтесь тегом или :

текст

За курсив отвечают теги и :

Подчеркнутый шрифт гарантирует тег :

Что касается надстрочного и подстрочного индекса, то здесь вам помогут теги и :

Читать:

Сколько остается бензина в баке когда загорается лампочка на ваз 2107

Перечёркивание текста по диагонали

Сверху вниз

Снизу вверх

Крестом

Комментарии

Другие публикации

Как подчеркнуть текст в css

Подчеркнуть текст — CSS

Способы подчеркивания в CSS

Подходы

text-decoration

border-bottom

box-shadow

background-image

Фильтры SVG

Underline.js (Canvas)

Новые свойства text-decoration

text-decoration-color

text-decoration-skip

text-decoration-style

Чего не хватает

Выводы

Изучаем подчеркивание текста CSS

Подходы

text-decoration

border-bottom

box-shadow

background-image

Фильтры SVG

Underline.js (canvas)

Свойства text-decoration-*

TEXT-DECORATION-COLOR

Подчеркнутый текст html (CSS)

Подчеркнутый текст через свойство CSS text-decoration

Подчеркнутый текст через свойство CSS border-bottom

Как сделать подчеркнутый текст в css

Подчеркнутый текст через css.

Html подчеркнуть текст – Подчеркнутый текст силами HTML и CSS

Подчеркнуть текст — CSS

Смотрите также:

text-decoration | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Жирный или подчеркнутый текст в CSS и HTML

Навигация по статье:

Как сделать подчеркнутый текст CSS-стилями

Подчеркнутый текст HTML-тегами

Как сделать жирный текст CSS-стилями

Жирный текст HTML-тегами

Нижнее подчёркивание html или все хитрости оформления текста

А давай-ка вот этим подчеркнем!

Настало время практики

Озаглавим текст подчеркнутым названием

Подчеркивание в html: способы.

Подчеркивание в HTML

Заголовок номер два

Рекомендации

Подчеркивание в CSS

Третий заголовок

Как добавить подчеркивание к заголовку?

Линия под текстом на всю ширину блока

Подчеркивание текста

text-decoration — подчёркнутый и зачёркнутый текст

Поддержка браузерами

Описание

html нижнее подчеркивание текста

Подчеркнутый текст через свойство CSS text-decoration

Подчеркнутый текст через свойство CSS border-bottom

Линия под текстом на всю ширину блока

Подчеркивание текста

Другие способы подчеркивания в CSS

border-bottom

box-shadow

background-image

Как сделать подчеркнутый текст в html?

подчёркну тый заголовок