| Справочник HTML
Элемент <u> (от англ. «underline» ‒ «подчёркивание») содержит в себе текст, который должен стилистически отличаться от обычного текста, например, слова с орфографическими ошибками или текст на другом языке. В некоторых случаях подчеркивание имеет смысловое значение, например, подчеркивание собственных имён в китайском языке, или указание неправильно написанного слова при проверке орфографии.
Примечание: Подчеркнутый текст легко спутать со ссылкой, и поэтому в целом следует избегать его использования, за исключением некоторых случаев.
Внимание: Этот тег был устаревшим в HTML 4 и XHTML 1, но затем вновь введен в HTML5 с другой семантикой. Если вы хотите подчеркнуть текст несемантическим образом, используйте соответствующие стили CSS.
Синтаксис
<u>Текст</u>Закрывающий тег
Обязателен.
Атрибуты
Для этого элемента доступны глобальные атрибуты
Стилизация по умолчанию
Большинство браузеров отобразит элемент <u> со следующими значениями CSS по умолчанию:
u {
text-decoration: underline;
}Различия между HTML 4.01 и HTML5
В HTML 4.01 тег <u> считается устаревшим (определяет подчеркнутый текст).
В спецификацию HTML5 он был опять добавлен, но теперь тег <u> предназначен для определения текста, который должен стилистически отличаться от обычного текста, например, для определения слов с ошибками или собственные имена на китайском языке.
Пример использования:
Пример HTML:
Попробуй сам<u>Специальный репортаж </u>: Телеканал «Звезда»<br>
<span>Специальный репортаж</span>: Телеканал «Звезда»
Спецификации
Поддержка браузерами
| Элемент | ||||||
| <u> | 3+ | 1+ | 4+ | 1+ | 1+ | 1+ |
| Элемент | ||||
| <u> | 1+ | 1+ | 6+ | 1+ |
Попробуйте сами — Примеры
Как сделать текст жирным и привлечь к нему внимание:
Важный и жирный текст
Как сделать акцент на фрагменте текста:
Акцент и курсив
Как отобразить текст в нижнем или верхнем индексе:
Форматирование текста
Учебник HTML
HTML уроки: HTML Форматирование
HTML Элементы
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Android | iOS | |
| 3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <strike> отображает текст как перечеркнутый. Этот тег аналогичен тегу <s>, который имеет сокращенную форму записи подобно тегам <b>, <i> и <u>. В любом случае, теги <strike> и <s> осуждаются спецификацией HTML, взамен них рекомендуется использовать стили.
Синтаксис
<strike>Текст</strike>Закрывающий тег
Обязателен.
Атрибуты
Нет.
Аналог CSS
text-decoration
Валидация
Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 использование <strike> запрещено.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Тег STRIKE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p><b>Список должников</b></p>
<p><strike>Чебурашка</strike><br>
<strike>Крокодил Гена</strike><br>
Шапокляк</p>
</body>
</html>Результат примера показан на рис. 1.
Рис. 1. Вид текста, оформленного с помощью тега <strike>
Как сделать зачеркнутый текст в html
Приветствую вас, дорогой читатель, случайно или умышленно зашедший на мой блог!
В данной статье я покажу несколько способов как сделать в html зачёркнутый текст.
Навигация по статье:
Выглядеть он будет вот так: зачеркнутый текст в html
Для чего это может понадобится?
- Такой текст можно использовать для задания акционных цен, когда старая зачёркнута, а новая нет.
- Для общения на форумах и в сосетях. Я не очень понимаю зачем, но люди часто используют этот приём =)
- Для размещения текстов на сайте.
Для создания такого зачёркнутого текста можно воспользоваться одним из специальных тегов.
Использование тегов stike и s для зачёркивания текста
Тег strike
Используется он аналогично любым другим строчным (инлайновым) тегам. То есть вы просто ставите этот тег в начале и в конце слова или фразы, которую нужно зачеркнуть.
Сам код для зачёркнутого текста будет выглядеть так:
<strike>html тег для зачеркнутого текста</strike><strike>html тег для зачеркнутого текста</strike> |
Вот что получится в итоге:
html тег для зачеркнутого текста
Тег s
Тот же тег stike, но в сокращённом виде.
html код зачеркнутого текста будет выглядеть так:
<s>html тег для зачеркнутого текста</s>
<s>html тег для зачеркнутого текста</s> |
Результат этого кода выглядит так:
html тег для зачеркнутого текста
В последней спецификации HTML данные теги не рекомендованы к использованию, так как они относятся к классу форматирования текста, а не к классу разметки страницы.
Конечно, в их использовании нет ничего критичного. Просто всё оформление текста лучше задавать через CSS. Данные теги считаются уже устаревшими так как сейчас для создания подчёркнутого текста стараются использовать не их, а стилизацию через CSS или тег del.
Использование html тега del для зачёркнутого текса
Вообще данный тег изначально был предназначен для пометки удалённого текста в новой версии документа.
Если честно, то я ещё не сталкивалась с необходимостью помечать какой-то текст как удалённый, поэтому на практике его чаще всего используют просто для зачёркивания текста.
Для того чтобы сделать зачёркнутый текст при помощи html можно воспользоваться следующим кодом:
<del>html тег для зачеркнутого текста</del>
<del>html тег для зачеркнутого текста</del> |
Результат его использования будет выглядеть так:
html тег для зачеркнутого текста
Как видите полученный результат ничем не отличается от того что мы получили при использовании тегов strike и s.
Как сделать зачеркнутый текст на css?
Самым оптимальным вариантом для создание зачёркнутого текста на html странице будет использование CSS. Правда этот способ немного дольше и длиннее, поэтому его применение не всегда оправдано.
Для создания зачёркнутого текста в CSS существует специальное CSS свойство text-decoration со значением line-through
Для того чтобы сделать зачёркнутый текст нужно его заключить в тег span или любой другой и присвоить этому тегу определённый класс, а затем в CSS для этого класса указать свойство text-decoration:line-through;
html код зачёркнутого текста будет выглядеть так:
<span class=”strike-text”>html тег для зачеркнутого текста</span>
<span class=”strike-text”>html тег для зачеркнутого текста</span> |
А вот CSS код:
.strike-text { text-decoration:line-through; }
.strike-text { text-decoration:line-through; } |
Также можно задать это CSS свойство в самом теге при помощи атрибута style:
<span style=”text-decoration:line-through;”>html тег для зачеркнутого текста</span>
<span style=”text-decoration:line-through;”>html тег для зачеркнутого текста</span> |
Правда этот вариант тоже не всегда приветствуется. Но в любом случае выбирать вам!
Для создания зачёркнутого текста у нас есть аж целых 5 способов! Так что выбирайте любой из них и смело используйте у себя на сайте.
На этом у меня всё. Подписывайтесь на обновления блога и заходите на мой канал YouTube. Там много полезных видео уроков.
С уважением Юлия Гусарь
Изучаем курсивный, жирный, подчеркнутый и зачеркнутый текст
Время чтения: 3 мин.
Здравствуй, уважаемый читатель.
Это восьмой урок изучения html, в котором мы поговорим о изменении вида текста. Из данного урока вы узнаете как сделать шрифт жирным, курсивным и подчеркнутым. Этот урок небольшой и очень легкий, но и нужный.
Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения
Урок 5. Ссылки. Часть 1
Урок 5. Ссылки. Часть 2
Урок 6. Атрибуты
Урок 7. Таблицы
Теория и практика
При написании текста зачастую появляется необходимость выделить текст. Сделать его жирным или курсивом, чтобы на его обратили внимание. Сразу перейдем к примерам:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html>
<head>
<title>Главная</title>
</head>
<body>
<p>Меню</p>
<ul>
<li><a href="example.html" title="Главная">Главная</a></li>
<li><a href="banan.html" title="Польза банана">Банан</a></li>
<li><a href="apple.html" title="Польза яблока">Яблоко</a></li>
<li><a href="persik.html" title="Польза персика">Персик</a></li>
</ul>
<p>Nullam <strong>eget aliquet</strong> sapien, <b>vitae vulputate</b> diam. <ins>Vivamus at arcu</ins> urna. Sed eget <em>neque et</em> sapien <i>auctor</i> adipiscing. <del>Aenean tincidunt</del> metus at facilisis imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</body>
</html> |
Как это выглядит в браузере:
Сейчас о каждом теге по порядку:
1. За выделение жирным шрифтом отвечают теги <b></b> и <strong></strong>. Дело в том что тег <b></b> является устаревшим, а вместо него рекомендуется использовать тег <strong></strong>.
2. Чтобы выделить текст курсивом отвечают теги <i></i> и <em></em>. Но тег <i></i> также устарел как и тег <b>, поэтому вместо него используйте тег <em></em>.
3. Чтобы подчеркнуть текст, его необходимо взять в тег <ins></ins>.
4. Чтобы зачеркнуть текст, его необходимо взять в тег <del></del>.
Итак. Еще раз посмотрим, но только в виде таблицы:
Также данные теги можно комбинировать Но важно чтобы тег открывался и закрывался правильно. Далее в примере написано правильно! Нельзя допускать такого: <em><strong>eget aliquet</em></strong>. То есть тег сначала должен открываться, потом закрываться. А если хотите еще в один тег взять — необходимо брать все теги внутри в эту конструкцию. Например:
<em><strong>eget aliquet</strong></em> |
Как это будет выглядеть в браузере:
Сегодня мы рассмотрели как можно выделить текст на странице. Всё очень просто. Пробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить где и как их применить.