Чёрточка в HTML может выполнять несколько функций: выделение удалённого текста, акцент на гиперссылке или визуальное разграничение контента. Для удаления текста применяется тег <del>, который не только перечёркивает слово визуально, но и семантически указывает на его устаревание или отмену.
Чтобы подчеркнуть ссылку, стандартное поведение большинства браузеров уже предусматривает подчеркивание с помощью стилей. Однако, для ручного добавления черты через HTML, допустимо использовать тег <u>. Он визуально подчёркивает текст, но не передаёт семантического смысла действия.
Если требуется провести горизонтальную линию для отделения частей страницы, используется элемент <hr>. Он вставляется отдельно и создаёт неперечёркивающую линию, растянутую на всю доступную ширину контейнера.
Важно: использовать теги следует осознанно. Например, <del> предназначен для отражения изменений в содержимом, а не для обычного оформления, в то время как <u> лучше избегать для ссылок, чтобы не спутать пользователя.
Как вставить горизонтальную черту между блоками с помощью тега <hr>
Тег <hr> применяется для создания простой горизонтальной линии, которая отделяет содержимое на странице. Этот элемент не требует закрывающего тега и автоматически отображает сплошную полосу по всей доступной ширине контейнера.
Чтобы вставить черту между двумя блоками, разместите <hr> прямо между ними в HTML-разметке. Например:
<div>Первый блок</div>
<hr>
<div>Второй блок</div>
По умолчанию браузеры отображают линию серого цвета толщиной 1 пиксель. Чтобы изменить внешний вид черты, можно использовать атрибуты size (толщина), width (длина), color (цвет, поддерживается не во всех браузерах) или оформить её через CSS.
Для минималистичной настройки без CSS достаточно прописать атрибуты прямо в теге, например: <hr size=»2″ width=»80%» color=»#000000″>.
При необходимости вставить несколько горизонтальных линий подряд рекомендуется избегать их накопления без промежуточного контента, чтобы не ухудшить восприятие структуры страницы.
Как подчеркнуть текст с помощью тега <u> в HTML
Тег <u> предназначен для подчеркивания текста и применяется непосредственно к нужному фрагменту. Его синтаксис прост: <u>подчеркиваемый текст</u>. Браузер автоматически отобразит текст с нижней линией.
Тег <u> подходит для выделения отдельных слов, фраз или ссылок, когда необходимо визуально отделить элемент без применения дополнительных стилей. Однако стоит учитывать, что <u> визуально напоминает ссылки, поэтому использовать его нужно аккуратно, чтобы не запутать пользователя.
Для более тонкой настройки подчеркивания рекомендуется использовать сочетание <u> с атрибутами глобальных стилей через CSS. Например, можно изменить цвет подчеркивания с помощью свойства text-decoration-color или задать стиль линии через text-decoration-style.
Если требуется подчеркнуть часть текста в ссылке <a>, тег <u> можно вложить внутрь неё: <a href=»#»><u>Текст ссылки</u></a>. Это обеспечит стабильное отображение подчеркивания независимо от настроек браузера.
Тег <u> поддерживается всеми современными браузерами и не требует дополнительной совместимости, что делает его удобным для быстрого решения задачи подчеркивания без подключения внешних файлов стилей.
Как создать зачёркнутый текст с помощью тега <del> или <s>
Для отображения зачёркнутого текста в HTML применяются два тега: <del> и <s>. Каждый из них решает разные задачи и используется в определённых случаях.
- <del> – отмечает текст, который был удалён в результате изменения содержания. Семантически важен для отслеживания правок.
- <s> – визуально перечёркивает текст без указания на его изменение. Используется для обозначения устаревшей или недействительной информации.
Примеры использования:
<del>Старое название продукта</del>– правильный способ отметить изменённое название.<s>9999₽</s>– актуально для показа старой цены рядом с новой.
Ключевые моменты:
- Тег
<del>может дополнительно содержать атрибутыdatetimeиciteдля указания даты изменения и ссылки на источник правки. - Тег
<s>не несёт смысловой нагрузки для поисковых систем и используется исключительно для оформления. - Избегайте применения этих тегов только ради визуального эффекта. Для декоративного перечёркивания используйте CSS свойство
text-decoration: line-through;.
Как добавить линию под ссылкой с помощью CSS-свойства text-decoration
Чтобы провести линию под ссылкой, применяется свойство text-decoration со значением underline. Оно автоматически добавляет подчёркивание всему тексту внутри элемента <a>.
Базовый пример:
a {
text-decoration: underline;
}
Если нужно убрать стандартное подчёркивание и затем добавить своё, например, только при наведении, используется следующее:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Для изменения толщины или стиля линии рекомендуется использовать дополнительные свойства: text-decoration-thickness и text-decoration-style. Например:
a {
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-style: wavy;
}
Цвет подчёркивания можно задать отдельно через text-decoration-color:
a {
text-decoration: underline;
text-decoration-color: #ff6600;
}
Если требуется подчёркивание только под частью текста внутри ссылки, вместо text-decoration следует использовать внутренний тег, например, <span> с нужным стилем.
Как убрать стандартное подчёркивание у ссылки и задать своё
Чтобы убрать стандартное подчёркивание у ссылки, достаточно использовать свойство CSS text-decoration: none;. Пример: a { text-decoration: none; }.
Для создания собственного подчёркивания применяют псевдоэлемент ::after или ::before в сочетании с content: ''; и border-bottom. Пример:
a {
text-decoration: none;
position: relative;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: currentColor;
}Такой подход позволяет контролировать толщину, цвет и стиль линии независимо от текста. При необходимости можно изменить положение линии, например, добавив отступ через bottom: -2px; или увеличив толщину с помощью height: 2px;.
Если нужно сделать подчёркивание только при наведении, добавляют псевдоэлемент к селектору a:hover::after.
Как нарисовать вертикальную линию рядом с текстом с помощью CSS
Чтобы разместить вертикальную линию рядом с текстом, удобно использовать псевдоэлемент ::before или ::after. Пример для левой стороны текста:
p::before {
content: "";
display: inline-block;
width: 2px;
height: 1em;
background-color: #000;
margin-right: 8px;
vertical-align: middle;
}
Параметр width определяет толщину линии, height можно задать в относительных единицах, например, em, чтобы линия адаптировалась к размеру шрифта. Отступ настраивается через margin-right.
Если нужна линия справа от текста, используйте ::after и меняйте margin-right на margin-left.
Альтернативный способ – применение border-left или border-right для блока:
p {
border-left: 2px solid #000;
padding-left: 8px;
}
Здесь линия становится частью рамки элемента. padding-left нужен, чтобы текст не прилипал к границе.
Если текст должен быть выровнен по центру относительно линии, используйте display: flex:
div {
display: flex;
align-items: center;
}
div::before {
content: "";
width: 2px;
height: 100%;
background-color: #000;
margin-right: 8px;
}
Этот способ удобен для создания сложных макетов с несколькими элементами рядом.
Загрузка...
