Тег div в html для чего нужен: : Элемент разделения контента — HTML

Leave a Comment / Html / By /

Содержание

Семантическое руководство по 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. Возникает соблазн убрать лишнюю HTML-разметку и сосредоточиться на CSS и JavaScript.

Несмотря на то, что полное построение страницы с использованием тегов 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>

Во втором примере вы можете увидеть элемент <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/

Секции для контента в HTML5 — div или section или article? – front-end.su

Данный материал является вольным переводом статьи:
Ire Aderinokun SECTIONING CONTENT IN HTML5 — DIV OR SECTION OR ARTICLE?

HTML5 стал важной ступенькой для концепции семантического кода. Он отстаивает идею, что документ должен быть структурирован и используемые вами теги должны передавать смысл.

Помимо прочего, теги

<section> и <article> были введены чтобы сделать области с контентом более значимыми, чем просто <div>. Но в каком случае мы должны использовать эти новые элементы и когда обычный <div> предпочтительнее?

##Обзор элементов

###DIV

Элемент <div> является элементом общего назначения. Но это не имеет особого смысла. Его цель заключается в группировке контента, который семантически не связан между собой. По сути, это совершенно бессмысленно для скрин ридеров, поэтому пользоваться данным методом нужно с осторожностью.

Мы настоятельно рекомендуем обращаться к элементу div только в крайнем случае, когда больше никакие другие элементы не подходят.

Рекомендация W3C

Элемент <div> в основном используется для группировки контента и и позиционирования при помощи CSS. Например, как контейнер для других элементов.

<div>
<section>
<h2>Modal Title</h2>
<p>Text goes here</p>
</section>
</div>

###SECTION

Элемент <section> является немного более конкретным, чем элемент <div>. Он применяется к общему разделу контента, который может быть сгруппирован семантически.

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

Рекомендация W3C

Поскольку содержимое тега <section> имеет смысл только когда сгруппировано вместе, оно должно иметь «тему». «Тема» должна быть определена путем включения заголовка в содержимое, часто сразу после открывающего тега.

<section>
<h2>Subscribe to the Newsletter</h2>
<form> <!-- ... --> </form>
</section>

##ARTICLE

Тег <article> является даже более конкретным, чем тег <section>. Он так же применяется к семантически связанному разделу контента и должен иметь заголовок. Тем не менее его содержимое должно быть самодостаточным. Это означает что будучи изолированным от остальной части страницы оно по прежнему должно иметь смысл.

Цель тега <article> в маркировке контента, например, в разметке блога.

<article>
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ..</p>
<p>Quae similitudo in genere etiam humano apparet. Est, ut dicis, inquam...</p>
</article>

##DIV или SECTION или ARTICLE?

###Так какой из тегов когда нужно использовать?

Если содержимое не является семантически связанным, стоит использовать <div>. Если семантически связанное содержимое может быть автономным, то используйте тег <article>. В противном случае используйте <section>.

##Комбинирование элементов

Попытаемся объединить различные элементы вместе.

Article в article

Элементы article можно вкладывать друг в друга. И хотя они по прежнему являются самодостаточными, предполагается, что содержимое внутреннего <article> связано с внешним.

<article>
<h2>Article Title</h2>
<p>John Smith</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<article>
<h3>Another Article</h3>
<p>Jane Doe</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

###Article в section

Мы можем так же несколько тегов <article> разместить внутри <section>. Хорошим примером будет являться страница блога, на которой отображаются последние сообщения. Контейнером для всех последних постов будет тег <section>, в то время как каждый отдельный отрывок записи может быть размечен тегом <article>.

<section>
<h2>Latest Blog Posts</h2>
<article>
<h3>Blog Post Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<article>
<h3>Blog Post Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
</section>

###Section в article

Каждый индивидуальный тег <article> может содержать в себе раздел section. Например, данный пост мог бы быть размечен следующим образом

<article>
<h2>Sectioning Content in HTML5 - div or section or article?</h2>
<section>
<h3>Overview of the Elements</h3>
<section>
<h4>div</h4>
<p>The div element is the most general purpose element.</p>
</section>
<section>
<h4>section</h4>
<p>The section element is slightly more specific that a div</p>
</section>
<section>
<h4>article</h4>
<p>The article element is even more specific than a section</p>
</section>
</section>
<section>
<h3>div or section or article?</h3>
<!-- ... -->
</section>
<section>
<h3>Combining the Elements</h3>
<!-- ... -->
</section>
</article>

Структура HTML5 — div, section и article :: Хранитель заметок

В формате разметки HTML5 появились новые элементы, которые служат заменой для обычных блочных элементов с атрибутами class и id, например <div> или <div>.

Рассмотрим три элемента, которые легко можно спутать друг с другом:

  • div — «базовый контейнер», который мы все знаем и любим. Это обычный блочный элемент без какого-либо семантического значения.
  • section — «документ или раздел приложения». Обычно содержит верхний (header) и нижний (footer) колонтитулы. Это несколько схожих по смыслу статей, подраздел одной большой статьи, главная часть страницы (например, раздел новостей) или страница интерфейса с закладками.
  • article — «независимая часть документа или сайта». Эта часть должна иметь смысл вне зависимости от остального содержания. Например, это может быть статья в блоге или форуме, комментарий. Так же как и section внутри этого тега могут размещать верхний и нижний колонтитулы.

Описание на whatwg.org

Разница между div, section и article

В HTML4 div использовался как базовый элемент разметки. Он не имел особого семантического значения. Так же не было особых требований на его содержимое и взаимоотношение между ним внутри блока.

Элемент section

Новый элемент section очень похож на div , т.к. используется как контейнер, но он уже имеет особое семантическое значение — объекты, которые располагаются внутри него, объединены общим смыслом.

Так же этот элемент служит для разбивки текста на разделы.

Элемент article

Новый элемент article — это специальный вид section , который обозначает независимую и самодостаточную часть страницы. На его месте можно использовать section, но article добавляет больше семантического значения.

Что выбрать?

Если проводить аналогию с HTML4, то можно сравнить эти теги с p и blockquote. Оба тега — блочные элементы, но blockquote, как разновидность p, имеет значение «блок цитируемого текста». То же самое и с section и article: тег section обозначает близкий по смыслу текст, а тег article обозначает осмысленную часть этого текста.

Смущающим обстоятельством является то, что section может быть использована для различных частей страницы (главная колонка, раздел новостей и т.п. на одной странице) и содержать article, а так же для дробления большого article (т.е. использоваться внутри article).

Чтобы определиться, какой из элементов выбрать, можно использовать алгоритм:

  1. Будет ли содержимое иметь осмысленное значение само по себе, например, при публикации в RSS-потоке? Если да, то выбираем article
  2. Если части содержимого объединены общим значением, то выбираем section
  3. Наконец, если нет никакого семантического значения, то выбираем div

Элемент section , за редким исключением, не должен использоваться, если у него нет заголовка. Если при автоматическом построении содержания документа будут встречаться не именованные разделы, то, вероятно, разметка сделана не верно. Однако наличие не именованных элементов nav и aside может быть вполне типичным явлением.

Итак, элемент section не стоит использовать если:

  1. требуется блочный элемент для декорирования. Это функция элемента div
  2. в этом месте для разметки содержимого больше по смыслу подходят элементы article, aside или nav
  3. у раздела нет естественного заголовка

Элементы section и article используются аналогично div в HTML4. Они не должны встречаться внутри p, blockquote или address.

Пример использования

<header>
    <h2>Название сайта</h2>
    <nav>
        <ul>
            <li><a href="page1.html">Страница 1</a></li>
            <li><a href="page2.html">Страница 2</a></li>
            <li><a href="page3.html">Страница 3</a></li>
        </ul>
    </nav>
</header>
<section>
    <h3>Свежие статьи</h3>
    <article>
        <h3>Заголовок статьи 1</h3>
        <p>Текст статьи</p>
    </article>
    <article>
        <h3>Заголовок статьи 2</h3>
        <p>Текст статьи</p>
        <aside>Дополнительная информация, относящаяся к статье 2</aside>
    </article>
</section>
<aside>
    <section>
        <h4>Blogroll</h4>
    </section>
    <section>
        <h4>Реклама</h4>
    </section>
</aside>
<footer>
    <p>Копирайты</p>
</footer>

По мотивам http://oli. jp/2009/html5-structure1/

HTML-тег

Тег HTML

представляет общий раздел в документе HTML. Тег
позволяет группировать разделы HTML-элементов вместе и форматировать их с помощью CSS.

Элемент

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

Элемент

принимает «текущее содержимое», которое относится к большинству элементов, которые могут появляться внутри тела документа.

следует использовать только в крайнем случае, когда нет другого подходящего HTML-элемента для использования. HTML5 представил ряд новых элементов, которые можно (и нужно) использовать вместо
. К ним относятся
,