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

Последнее обновление: 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>
Блоки div в html5

Параграфы

Параграфы создаются с помощью тегов <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>
Параграфы в html5

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

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

Элемент pre

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

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

Элемент span

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

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

При этом стоит отметить, что сам по себе span ничего не делает. Так, во втором параграфе span никак не повлиял на внутренне текстовое содержимое. А в первом параграфе элемент span содержит атрибут стиля: style="color:red;", который устанавливает для вложенного текста красный цвет.

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

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

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850