Создание вертикальных линий в HTML: альтернативы тегу vr

Быстрый ответ

В HTML нет специального тега <vr> для оформления вертикальных линий, однако их можно создать с помощью CSS и тега <div>. Вот пример:

<div style="height: 100px; width: 0; border-left: 1px solid #000;"></div>

Такой код сгенерирует аккуратную вертикальную черную линию. Чтобы линия соответствовала вашим требованиям, изменяйте параметры height и border-left.

Использование CSS вместо несуществующего тега vr

Почему в HTML нет тега <vr>

Проще говоря, HTML фокусируется на структурировании содержимого, а не на оформлении страницы, в связи с чем не предусматривает наличие тега <vr>. За визуализацию и оформление отвечает CSS, но не HTML.

Подробнее об этом расскажет наш спикер на видео

Создание вертикального разделителя при помощи HTML и CSS

Несмотря на отсутствие тега <vr>, мы всегда можем обратиться к CSS! Элементы div или span могут быть стилизованы так, чтобы заменить <vr>. Для создания приятного на вид вертикального разделителя используйте CSS-рамки и свойство display.

Инновационные способы создания вертикальных линий

Творческие разработчики, подобные Nixinova, находят альтернативные решения для создания вертикальных линий, используя передовые технологии CSS, вроде flexbox и grid. Stack Overflow предлагает множество креативных решений. Однако при этом важно учитывать совместимость с браузерами при использовании CSS.

Обеспечение доступности сайта при использовании вертикальных линий

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

Визуализация

Без <vr> ситуация выглядит так:

| Содержимое | Пусто | Содержимое |

Но нам нужен ВЕРТИКАЛЬНЫЙ разделитель!

Приветствуем собственный Вертикальный Разделитель:

.divider { border-left: 1px solid black; height: 100%; }

| Содержимое 🌼 | `<div class="divider"></div>` | Содержимое 🌸 |

В результате контент на HTML-странице становится более структурированным благодаря нашему CSS-разделителю.

Создание и оптимизация вертикальной линии с использованием CSS

Использование классов для стилизации

Применение класса делает наш вертикальный разделитель легким для модификации:

.vertical-rule {
    border-left: 2px solid #ccc;
    height: auto; /* автоадаптация высоты к контейнеру */
    margin-left: 20px;
    margin-right: 20px;
}

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

Трансформация тега HR

Как ни странно, всем известный тег <hr> можно трансформировать в вертикальное правило, применив несколько настроек CSS:

.hr-vertical {
    width: 1px;
    height: 50vh;
    display: inline-block;
    border: none;
    background-color: black;
}

Кто бы мог думать, что <hr> способен выйти за рамки своего горизонтального предназначения!

Адаптивность — залог успеха

CSS-медиазапросы помогут вашему вертикальному правилу адаптироваться к любым параметрам адаптивного дизайна:

@media (max-width: 600px) {
    .divider {
        height: 50px; /* корректировка для маленьких экранов */
    }
}

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

Полезные материалы

1. <hr>: The Thematic Break (Horizontal Rule) element – HTML: HyperText Markup Language | MDN — подробное руководство по тегу <hr> от Mozilla Developer Network.
2. HTML hr tag — справочник по тегу <hr> с простыми и наглядными примерами от W3Schools.
3. Dataset of Tweets with Geolocation Data – Stack Overflow — несмотря на не совсем понятное название, в этой теме на Stack Overflow можно найти новые идеи для создания вертикальных линий в HTML.
4. Simple Styles for <hr>'s` — советы по стилизации горизонтальных и вертикальных линий от CSS Tricks.
5. Alignment, font styles, and horizontal rules in HTML documents — спецификация W3C, где подробно описан тег <hr>.
6. hr · WebPlatform Docs — руководство по стилизации тега <hr> от WebPlatform Docs.