Div html5: : базовый блочный элемент — HTML

Leave a Comment / Html / By /

HTML5 | Элементы группировки

Последнее обновление: 08.04.2016

Ряд элементов предназначен для группировки контента на веб-странице.

Элемент div

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Документ HTML5</title>
	</head>
	<body>
		<div>Заголовок документа HTML5</div>
		<div>Текст документа HTML5</div>
	</body>
</html>

Параграфы

Параграфы создаются с помощью тегов <p> и </p>, которые заключают некоторое содержимое. Каждый новый параграф располагается на новой строке. Применим параграфы:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Документ HTML5</title>
	</head>
	<body>
		<div>Заголовок документа HTML5</div>
		<div>
			<p>Первый параграф</p>
			<p>Второй параграф</p>
		</div>
	</body>
</html>

Если в рамках одного параграфа нам надо перенести текст на другую строку, то мы можем воспользоваться элементом <br>:

<p>Первая строка. <br/>Вторая строка.</p>

Элемент pre

Элемент pre выводит предварительно отформатированный текст так, как он определен:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Документ HTML5</title>
    </head>
    <body>
        <pre>
			Первая строка
			Вторая строка
			Третья строка
		</pre>
    </body>
</html>

Элемент span

Элемент span обтекает некоторый текст по всей его длине и служит преимущественно для стилизации заключенного в него текстового содержимого. В отличие от блоков div или параграфов

span не переносит содержимое на следующую строку:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Документ HTML5</title>
	</head>
	<body>
		<div>Заголовок документа HTML5</div>
		<div>
			<p><span>Первый</span> параграф</p>
			<p><span>Второй</span> параграф</p>
		</div>
	</body>
</html>

При этом стоит отметить, что сам по себе span ничего не делает. Так, во втором параграфе span никак не повлиял на внутренне текстовое содержимое. А в первом параграфе элемент

span содержит атрибут стиля: style="color:red;", который устанавливает для вложенного текста красный цвет фона.

При этом стоит отметить, что элементы div и p являются блочными, элемент div может содержать любые другие элементы, а элемент p — только строчные элементы. В отличие от них элемент span является строчным, то есть как бы встраивает свое содержимое во внешний контейнер — тот же div или параграф. Но при этом не следует помещать блочные элементы в строчный элемент span.

НазадСодержаниеВперед

Секции для контента в 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>

Тег HTML 5

Тег HTML

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

Разница между тегом

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

HTML 4 против HTML 5

В документах HTML 4.01 тег

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

Спецификация HTML 5 ввела ряд новых элементов, которые можно (и нужно) использовать вместо элемента

. Примеры этих новых элементов включают
,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *