Почему некоторые разработчики ругают вёрстку на «div»
В вёрстке есть очень удобный HTML-тег — <div>. Этот блок не имеет оформления сам по себе, но с его помощью которого можно оформлять и структурировать веб-страницы.
Встречается мнение, что вёрстка на блоках <div> устарела. Рассказываем, в чём причина и когда это действительно так.
Зачем нужен <div>
Изначальная задача этого тега — собрать в кучу разные другие теги, чтобы получилось что-то единое, с чем можно работать как с одним объектом. Этот тег появился в стандарте HTML3 в 1995 году, и на тот момент это было мощным решением: верстальщики получили возможность применять стили сразу к группе тегов.
Ещё этим тегом решилась другая проблема — табличная вёрстка. Раньше люди верстали всё на таблицах, потому что по-другому реализовать нарисованный дизайн просто не получалось. Всё рассовывалось по ячейкам таблиц, таблицы вкладывались друг в друга, и поддерживать такое было сложно.
Олды здесь: как сверстать веб-страницу на таблицах
С появлением <div> все перешли на блочную вёрстку, которая работает так:
- Верстальщик создаёт блок на странице и наполняет его содержимым.
- В стилях он прописывает, как этот блок выглядит и как ведёт себя по отношению к другим — например отталкивает, отступает, заставляет перенестись на новую строку и т. д.
- Блоки можно вкладывать друг в друга сколько угодно раз, причём для каждого блока-контейнера можно задавать свои стили и поведение.
В итоге получилось то же самое, что с табличной вёрсткой, но уже на блоках. Главный плюс в том, что блоки гораздо более автономны, чем ячейки таблицы, поэтому такой подход сейчас считается основным для вёрстки.
Пример вёрстки на <div>
Часто код оборачивают в блоки для того, чтобы браузер или настройки стилей сами разместили элементы по своим местам. Вот как это выглядит на примере нашего проекта про портфолио фотографа — там мы оборачиваем в <div> каждый элемент, чтобы они автоматически разместились по сетке:
<div>Михаил Максимов</div> <div><a href="mailto:[email protected]">[email protected]</a></div> <div><a href="https://t.
me/thecodemedia">Телеграм</a></div>А вот пример пустых блоков, которые потом наполнятся жизнью в скрипте — взяли из проекта с игрой Quatro:
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="UTF-8"> <title>Игра Quarto</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- подключаем нормализатор стилей, чтобы игра везде выглядела одинаково --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <!-- подключаем свой файл со стилями --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- блок с доской --> <section><div></div></section> <!-- блок для оповещения, которое появится в конце игры --> <div></div> <!-- основной скрипт игры --> <script src="script.js"></script> </body> </html>В пустых блоках появились фигуры и поле — на странице этого нет, но мы добавили их через скрипт
В чём проблема
Многие ругают вёрстку на <div> из-за подобного кода:<div>
<div>
<div>
<div>
<div>
<p>
Привет, это журнал «Код»!
</p>
</div>
</div>
</div>
</div>
</div>Технически в этом нет ничего плохого, но с ходу разобраться в таком сложно.
Вторая проблема связана с семантикой — в HTML5 появилось много новых тегов, которые работают так же, как <div>, но упрощают понимание структуры. Также новые теги помогают слабовидящим пользоваться сайтом с помощью скринридеров — специальных программ, которые озвучивают всё, что есть на странице. Чтобы им было проще, используют не <div>, а другие теги.
Пример неадаптированного кода:
<div>
<h2>Привет, это журнал «Код»</h2>
<div>
<a href="#">Это как</a>
<a href="#">Это баг</a>
<a href="#">Что как</a>
</div>
</div>
<div>
<div>
<div>
<h2>Что такое HTML</h2>
</div>
<div>
<p>
HTML — основа всего, что происходит внутри вашего браузера. Если вы знаете HTML, то можете сами создавать сайты, красиво оформлять статьи и документы в интернете и даже устроиться на работу веб-разработчиком. Давайте копнём.
</p>
</div>
</div>
</div>
<div>
<div>
<h3>Напишите нам</h3>
<div>
<a href="[email protected]">[email protected]</a>
</div>
</div>
</div>
Если вы знаете HTML, то можете сами создавать сайты, красиво оформлять статьи и документы в интернете и даже устроиться на работу веб-разработчиком. Давайте копнём.
</p>
</div>
</div>
</div>
<div>
<div>
<h3>Напишите нам</h3>
<div>
<a href="А вот адаптированная версия с учётом семантики. Внешне всё будет выглядеть точно так же, но поисковым роботам и специальным программам для чтения с экрана будет гораздо проще понять, что на странице к чему относится:
<header>
<h2>Привет, это журнал «Код»</h2>
<nav>
<a href="#">Это как</a>
<a href="#">Это баг</a>
<a href="#">Что как</a>
</nav>
</header>
<main>
<article>
<header>
<h2>Что такое HTML</h2>
</header>
<section>
<p>
HTML — основа всего, что происходит внутри вашего браузера. Если вы знаете HTML, то можете сами создавать сайты, красиво оформлять статьи и документы в интернете и даже устроиться на работу веб-разработчиком. Давайте копнём.
</p>
</section>
</article>
</main>
<footer>
<section>
<h3>Напишите нам</h3>
<address property="email">
<a href="[email protected]">[email protected]</a>
</address>
</section>
</footer> 
Если вы знаете HTML, то можете сами создавать сайты, красиво оформлять статьи и документы в интернете и даже устроиться на работу веб-разработчиком. Давайте копнём.
</p>
</section>
</article>
</main>
<footer>
<section>
<h3>Напишите нам</h3>
<address property="email">
<a href="И всё-таки, как правильно?
Если вам нужно быстро собрать прототип страницы, чтобы убедиться в том, что всё работает, — верстайте как угодно, это всё черновой проект, который потом переделывать во что-то нормальное. Но помните, что нет ничего более постоянного, чем временное, — если черновой проект работает, вы его, скорее всего, так и понесёте миру.
Если вы делаете сайт со сложной вёрсткой, где всё удобнее заверстать дивами, — делайте. Главное, чтобы вы сами не запутались в блоках, а браузер в любом случае покажет всё правильно.
А вот если у вас есть SEO-задача по продвижению сайта или вы делаете сайт, которым будет удобно пользоваться слабовидящим людям, тогда лучше использовать семантику и теги HTML5 вместо стандартных <div> в каждом разделе.
Что такое SEO
Что дальше
В следующий раз поговорим о скринридерах — как они помогают слабовидящим пользоваться сайтами и как новые теги на это влияют. Подпишитесь, чтобы не пропустить новые статьи.
Текст:
Михаил Полянин
Редактор:
Максим Ильяхов
Художник:
Алексей Сухов
Корректор:
Ирина Михеева
Вёрстка:
Кирилл Климентьев
Соцсети:
Виталий Вебер
Семантическое руководство по HTML — 10 альтернатив использования div
Как выглядит Ваш HTML-макет, наверное как-то так:
<body> <div> <div> <ul> <li><a href="/">Главная</a></li> <li><a href="/">О нас</a></li> <li><a href="/">Контакты</a></li> </ul> </div> </div> <div> <div>Это сайт, состоящий из одних div-ов</div> </div> <div></div> </body>
Большинство из нас используют элемент <div> по умолчанию, потому что это самый быстрый способ создания макета HTML.
Несмотря на то, что полное построение страницы с использованием тегов div может облегчить работу. Это также может привести к проблемам в будущем.
Проблемы с использованием только тегов div
Использование div само по себе не является проблемой! Он выполняет свою функцию и нет причин не использовать его.
Но использование только div-ов в вашем проекте может вызвать недопонимание, как минимум у других участников проекта.
Проблемы с читаемостью
Если вы когда-либо смотрели на чужой или даже на свой собственный код через несколько месяцев после его написания, может быть сложно читать, если он заполнен исключительно элементами <div>.
Расшифровка макета может занять гораздо больше времени, чем необходимо, что уменьшит вашу производительность. Просто попытка выяснить, где находится закрывающий тег </div> для определенного блока кода, может быть утомительной.
Проблемы доступности
Соблюдение строгих правил — это не только цвет, контраст и субтитры. По оценкам Всемирной организации здравоохранения who.int, 285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов — слепые и 246 миллионов — слабовидящие.
Это еще одна причина, по которой важно, чтобы ваш HTML-код был как можно более доступным. А это значит, что вы должны писать семантический код.
Программам чтения с экрана обязательно нужен контекст, чтобы правильно читать веб-страницу вслух. Для программы чтения с экрана такие элементы, как <div> и <span>, ничего не значат. Семантические блоки, такие как <form> и <button>, легче анализировать.
Проблемы согласованности
Когда вы знаете, чего ожидать от работы над проектом в команде, вы станете намного эффективнее. Кроме того, в вашем коде будет меньше ошибок. Установка стандарта для использования семантического HTML имеет смысл, потому что любому, кто возьмется за проект, будет легче понять макет.
Кроме того, когда вы начнете применять или настраивать CSS для HTML-документа, вы обнаружите, что гораздо быстрее и проще находить определенные элементы, когда в макете использовался семантический HTML.
Проблемы SEO
При использовании семантической разметки поисковые системы будут рассматривать ее содержимое как важные ключевые слова, влияющие на поисковый рейтинг страницы. Веб-документы MDN
Что такое семантический HTML?
Наиболее четкое определение семантического HTML, которое я нашел, гласит:
Семантический элемент четко описывает его значение как для браузера, так и для разработчика.
Использование семантического HTML похоже на разницу между указанием на объект в небе и словами: «Смотри, объект!» или «Смотри, самолет!»
Подобно тому, как описание объектов реального мира упрощает повседневное общение, семантический HTML упрощает чтение кода.
Фактически, использование семантического HTML отмечено как часть стандарта HTML5:
Авторам настоятельно рекомендуется рассматривать элемент div как крайний случай, когда никакой другой элемент не подходит.
divулучшает доступность для читателей и упрощает сопровождение для авторов.
Использование более подходящих элементов вместо элемента Например, что проще сканировать:
<div> "Get your facts first, then you can distort them as you please." – Mark Twain </div>
или
<blockquote> "Get your facts first, then you can distort them as you please." – Mark Twain </blockquote>
Во втором примере вы можете увидеть элемент
Использование альтернатив div может потребовать больше размышлений, но это дополнительное планирование с семантическим HTML того стоит.
Альтернативы <div> в HTML
Поговорим о некоторых наиболее распространенных альтернативах div. Скорее всего, вы уже видели эти элементы раньше, но здесь мы подробно расскажем, для чего они нужны и как их использовать.
Элемент <nav>
<nav> <ul> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Contact</a></li> </ul> </nav>
Элемент nav — это именно то, на что он похож. Этот элемент используется для обозначения набора навигационных ссылок.
Как упоминалось ранее, это также позволяет программам чтения с экрана решать, отображать ли этот тип контента изначально или нет. Элемент nav лучше всего использовать для основного блока навигационных ссылок в документе.
Элемент <main>
<main> <h2>Заголовок 1</h2> <h3>Заголовок 2</h3> <p> Стоит отметить, что принцип восприятия стабилизирует департамент маркетинга и продаж, не считаясь с затратами. Медийный канал нетривиален.
Перераспределение бюджета, не меняя концепции, изложенной выше, подсознательно
притягивает культурный традиционный канал. Как предсказывают футурологи рейтинг программирует ролевой диктат
потребителя.
</p>
</main>Подобно <nav>, элемент <main> используется так, как он звучит (снова работает семантика). Этот элемент обертывает блоки кода, которые определяют основное содержимое страницы или документа. Основной элемент будет находиться между открывающим и закрывающим тегами <body>
Элемент <section>
<section> <h2>Лучший бутерброд на свете</h2> <p>Лучший бутерброд - баранина, салат и помидор, а баранина вкусная и нежирная. Это так задорно, мне это нравится. </p> </section>
Элемент <section> — отличный пример использования альтернативы div для разделения содержимого.
В приведенном выше примере мы разделяем введение и вводный абзац на два раздела. Поиск и стилизация этих разделов в нашем CSS-документе будет намного быстрее, чем поиск класса <div>.
Элемент <header>
<header> <img src="/"> </header>
Элемент <header> отличается от элемента <head> тем, что вы можете использовать его несколько раз в документе.
Например, вы можете использовать один набор элементов <header> для размещения логотипа, а другой набор для описания заголовка для определенной части контента, например статьи (подробнее об этом позже).
Элемент <footer>
<footer> <p>© 2021 Все права защищены. Не воровать.</p> <p>Связаться: <a href="mailto:[email protected]">Email Jiffy!</a></p> </footer>
Как и в случае с элементом <header>, вы можете использовать элементы <footer> в любом месте вашего HTML-документа.
Типичное использование <footer> — для информации об авторских правах или авторе. Вы также можете использовать элемент нижнего колонтитула в качестве закрытия внутри элемента <section>.
Менее распространенные альтернативы <div>
Есть также некоторые элементы, которые вы, возможно, не видели раньше или видели очень редко. Но они действительно пригодятся, и их изучение поможет сделать ваш код более читабельным.
Элемент <aside>
<p>Мое любимое телешоу всех времен - Маппет-шоу. Это мило, весело и блестяще.</p> <aside> <h4>Маппет-шоу</h4> <p>Маппет-шоу было создано Джимом Хенсоном и транслировалось с 1976 по 1981 год.</p> </aside>
В кино или театре aside известен как драматический прием, в котором персонаж обращается к аудитории отдельно от основного диалога.
Именно так мы можем использовать элемент <aside> в нашем HTML.
Мы делаем обозначения, относящиеся к содержанию, но которые мы хотим сохранить отдельно. Мы также можем использовать его на боковой панели.
Элемент <code>
<p>Вы можете использовать это для такого фрагмента кода, как: <code>const muppetFrog = 'Kermit'</code>, который отличается от остального текста. </p>
В тех случаях, когда мы хотим отличить фрагмент кода от обычного текста, элемент <code> очень удобен.
Элемент <article>
<article> <h2>Куклы</h2> <article> <p>Кермит - лидер кукол.</p> </article> <article> <p>Фоззи - стоячий медведь.</p> </article> <article> <p>Не связывайся с мисс Пигги.</p> </article>
Элемент <article> — это еще один элемент, который используется для различения типов контента в макете.
<article> должен быть автономным содержанием, отдельным от основного содержания. Использование этого элемента также упрощает стилизацию с помощью CSS, делая содержимое статьи явно отличным от другого содержимого на странице.
Элемент <blockquote>
Элемент <blockquote> — еще один простой элемент, используемый так же, как он звучит: для отделения цитаты от другого текста, как было показано ранее.
Элемент <mark>
<p>Это предложение о лучшем Маппете, который когда-либо был <mark>Королевская креветка Пепе</mark>.</p>
Элемент <mark> — это не только идеальный способ выделить блок текста, но и легко понять, когда вы встретите его в документе.
Попробуйте использовать эти альтернативы div в своем собственном коде и посмотрите, насколько их легче читать.
Заключение
Это только десять примеров альтернатив div.
Есть довольно много других семантических элементов, которые мы можем использовать в нашем HTML.
Вам не нужно использовать их все в одном документе, и вам не нужно беспокоиться о запоминании более 100 существующих элементов. У MDN есть удобная справочная страница, к которой вы можете обратиться, когда вам это нужно: справочник по элементам HTML.
Написание семантического HTML — это хорошая привычка, которую нужно освоить как можно раньше. Это хорошо для читабельности, SEO и не забывайте о миллионах людей с ослабленным зрением, которые оценят ваш продуманный код.
Оригинал: https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/
css — тег внутренней ссылки ()
Задавать вопрос
спросил
Изменено 2 года, 6 месяцев назад
Просмотрено 122к раз
Я хочу сделать div кликабельным, но внутри этого CSS Могу ли я сделать как и правильно ли использовать div внутри 3 Начиная с HTML5 можно обернуть Элемент a может охватывать целые абзацы, списки, таблицы и т. д., даже целые разделы, если внутри нет интерактивного содержимого (например, кнопок или других ссылок). Просто убедитесь, что вы не поместили 3 Нет, ссылка, назначенная содержащему И это не правильный путь. Вы можете заставить Пример [Демо] CSS HTML 2 Это классический случай divitis — вам не нужен div, чтобы на него можно было кликнуть, просто дайте Тег 1 Вложение ‘a’ невозможно.
Однако, если вы очень хотите сохранить структуру и заставить ее работать так, как вы хотите,
затем переопределите тег привязки, щелкнув в javascript /jquery . , чтобы вы могли иметь 2 прослушивателя событий для двоих и соответственно управлять ими. 2 Думаю, вам следует сделать наоборот.
Определите свои 1 Я бы просто отформатировал два разных a-тега с помощью nataliepjlin 1 Привет! Я хотел бы сделать избранные карточки на главной странице моего веб-сайта (файлы HTML-файл 988×324 34,2 КБ осмотр вида 2262×858 155 КБ nfriedli 2 натальепжлин 3 @nfriedli все еще пусто
4 июля 2022 г., 13:42 4 Я только посмотрел ваши скрины, которых недостаточно для отладки. Размещать изображение, чтобы дать только фрагмент, который непригоден для использования, как есть, бессмысленно. Извините, но у меня нет желания загружать репозиторий GitHub с полным общедоступным каталогом только для того, чтобы помочь вам. от 5 Параметр «card_link» добавляется только к «feature1», а не к «feature2». 1 Нравится 4 июля 2022 г.
.box{
плыть налево;
ширина: 100 пикселей;
высота: 100 пикселей;
}
.плюс{
плыть налево;
ширина: 30 пикселей;
высота: 30 пикселей;
}
a href ? элементов вокруг в свой (или ).
, будет назначена всем элементам внутри него. вести себя как a.divlink {
дисплей:блок;
ширина: 500 пикселей;
высота: 500 пикселей;
плыть налево;
}
пометить класс. Затем отредактируйте CSS класса для отображения: блока и определите высоту и ширину, как упоминалось во многих других ответах.
отлично работает сам по себе, поэтому вам не нужен дополнительный уровень разметки на странице. Div s и укажите a href в каждом Div , указывая на разные ссылки a { display: block; высота: 15 пикселей; ширина: 40 пикселей; } . Таким образом, вам даже не нужны div-теги… Div block href не работает — поддержка
index.md и layouts/index.html ) кликабельными (и перенаправлять на ссылки), поэтому я завернул <а> . Однако ссылка, похоже, не работает. Есть ли решение этой проблемы? Заранее спасибо!
Так же вот мой репозиторий, а ниже скриншоты.
{{ .Params.card_link }}
