10 альтернатив использованию div
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Поднимите руку те, чей обычный HTML-макет выглядит так:
Многие из нас по умолчанию используют элемент , потому что это самый быстрый способ построить HTML-каркас. Слишком силен соблазн по-быстрому разобраться с разметкой и приступить к самому интересному: CSS или JavaScript.
Но хотя создание всего макета на сплошных кажется простым решением, оно может создать проблемы в дальнейшем.
Проблемы, связанные со злоупотреблением div
Само по себе использование элемента не является проблемой. Это такой же элемент, как и любые другие, он служит своим целям и нет причин его избегать.
Но когда используется для создания практически всех блоков на странице, это неизбежно породит проблемы и для вас самого, и для коллег, которые могут присоединиться к проекту.
Читаемость
Если вам случалось читать чужой код (или даже свой — через несколько месяцев после написания), вы знаете, насколько трудно бывает в нем разобраться, если он наводнен сплошными .
Расшифровка такого макета может занять больше времени, чем следовало бы, а это убивает продуктивность. Ведь даже найти закрывающий
для отдельного блока бывает непросто.
Доступность
Чтобы сайт был доступным, нужно обращать внимание не только на цвета, контраст и подписи. Согласно данным Всемирной организации здравоохранения, проблемы со зрением имеют 285 миллионов людей: 29 миллионов слепы, а еще 246 миллионов плохо видят.
И это еще одна причина писать HTML так, чтобы он был как можно более доступным. А это означает, что код должен быть семантическим.
Скринридерам, чтобы точно прочитать веб-страницу, нужен контекст. Названия элементов и ничего не говорят этим программам. А вот семантические и им проще распознать.
Последовательность и предсказуемость
При командной работе над проектом важно, чтобы все знали, чего ожидать от кода. Благодаря предсказуемости и последовательности в нем даже багов будет меньше.
Если вы примете за стандарт написание семантического HTML, любой человек, присоединившийся к проекту, сможет куда быстрее разобраться в макете.
Кроме того, когда придет пора применять CSS, вам будет куда проще находить специфичные элементы.
SEO
При использовании семантической разметки поисковики расценивают ее как важные ключевые слова, что влияет на ранжирование страницы. (MDN Web Docs)
Что такое семантический HTML?
«Семантический элемент четко описывает свою суть как браузеру, так и разработчику».
Представьте, что вы указываете рукой на что-то в небе и говорите: «Смотри: какой-то объект!». А вот если вы говорите: «Смотри: самолет!» — это похоже на использование семантического HTML.
Называя объекты реального мира более конкретно, мы облегчаем общение с людьми. Аналогично, использование семантического HTML облегчает чтение кода.
Фактически, использование семантического HTML предписано как часть стандарта HTML5:
«Авторам настоятельно рекомендуется рассматривать элемент как элемент последней надежды, когда никакой другой элемент не подходит. Использование более подходящих случаю элементов вместо повышает доступность для читателей и облегчает поддержку кода в будущем для самих авторов».
Рассмотрим пример. Что легче просканировать? Вот это:
"Get your facts first, then you can distort them as you please." – Mark Twain
"Get your facts first, then you can distort them as you please." – Mark Twain
Во втором примере вы видите элемент , и вам сразу ясно, что этот текст нужно отобразить в формате цитаты.
Использование альтернативных вариантов вместо может потребовать дополнительной умственной работы. Но эта толика внимания к планированию семантического HTML в конечном итоге окупится с лихвой.
Альтернативы div в HTML
Давайте обозначим наиболее употребимые альтернативы div. Скорее всего, вы уже встречали эти элементы раньше. Здесь мы опишем, для чего они предназначены и как ими пользоваться.
Элемент
Nav — сокращение от navigation. Соответственно, используется этот элемент для набора ссылок навигации.
Как уже говорилось, это также позволяет скринридерам определить, нужно ли отображать этот тип контента сразу. Элемент лучше всего использовать для основного блока ссылок навигации в документе.
Элемент
The Godfather of All Content
The Wedding
Why did you go to the police? Why didn't you come to me first? Vito, how do you like my little angel? Isn't she beautiful? Only don't tell me you're innocent. Because it insults my intelligence and makes me very angry. I see you took the name of the town. What was your father's name? The hotel, the casino. The Corleone Family wants to buy you out.
Название этого элемента тоже говорит само за себя (англ. main — «главный», «основной»). Этот элемент оборачивает блоки кода, образующие основной контент страницы или документа. располагается между открывающим и закрывающим тегами .
Элемент
The Best Sandwich Ever
The best sandwich is a mutton, lettuce and tomato, where the mutton is nice and lean. It's so perky, I love that.
— отличный пример использования альтернативы div для разделения контента.
В приведенном примере мы разделяем вступление и первый абзац на две секции. Найти и стилизовать эти секции в CSS будет куда проще, чем отлавливать нужный класс .
Элемент
Элемент , в отличие от , вы можете использовать многократно по всему документу.
Например, можно использовать один для размещения лого, а другой — для описания заголовка отдельной части контента, например, статьи.
Элемент
, как и , можно использовать где угодно в документе.
Обычно в помещают копирайт и информацию об авторе. Но вы также можете использовать элемент как концовку внутри элемента .
Менее распространенные альтернативы div
Есть еще несколько элементов, которые встречаются реже описанных выше, так что вы могли их и не видеть. Но они тоже могут пригодиться и сделать ваш код более читабельным.
Элемент
My favorite TV show of all time is The Muppet Show. It's sweet, funny and brilliant.
В театре и кино «aside» — театральный термин, означающий монологи или реплики, направленные в публику (считается, что присутствующие на сцене их не слышат). Эти реплики стоят особняком от основного диалога на сцене. В русской терминологии это называется репликами апарт (пришло из французского).
Элемент именно так и используется. С его помощью можно сделать примечание, имеющее отношение к контенту, но стоящее отдельно.
Также можно использовать в боковой панели.
Элемент
You can use this for a piece of code such as: const muppetFrog = 'Kermit', which looks different from the other text.
Когда мы хотим визуально отделить код, вставленный в текст, от собственно текста, пригодится элемент . При рендеринге в браузере содержимое элемента будет выглядеть примерно так:
Элемент
Muppets
Kermit is the Muppet leader.
Fozzy is a stand-up bear.
Don't mess with Miss Piggy.
Еще один элемент, используемый для разделения контента на виды в рамках одного макета.
В элементе должен находиться самодостаточный контент, отделяемый от основного. Использование этого элемента облегчает стилизацию при помощи CSS и позволяет явно выделить часть контента на странице.
Элемент
«Blockquote» в переводе с английского — цитата. И элемент используется именно для выделения цитат на фоне остального текста.
Элемент
This is a sentence about the best Muppet ever, which happens to be Pepe the King Prawn.
Элемент — отличный способ выделить блок текста. Он совершенно понятен, когда вы натыкаетесь на него в документе. Выглядит это так:
Итоги
Старайтесь использовать в своем коде альтернативы div, и вы увидите, насколько проще станет его читать.
Семантика полезна для читаемости, SEO и доступности. Написание семантического HTML — хорошая привычка, которую нужно приобрести как можно раньше.
Мы разобрали всего лишь десяток элементов, но вообще семантических элементов, которые можно использовать в HTML-разметке, куда больше. Будет не лишним с ними познакомиться!
Источник https://techrocks.ru/2021/11/18/10-div-alternatives/
