html.okpython.net
HTML и CSS для начинающих

HTML :: Элементы «span» и «div»

Элементы «span» и «div»

Данные элементы представляют собою обобщенные, универсальные контейнеры, первый из которых отображается браузером как строчный элемент, а второй – как блочный. Другого логического смысла они не имеют. Оба элемента формируются парными тегами, соответственно, <span> (от англ. span – охватывать) и <div> (от англ. division – раздел).

Использование элемента «span»

Элемент «span» в основном применяется для выделения небольших фрагментов текста, рисунков или даже отдельных символов и букв, для которых применение тегов с каким-то логическим смыслом нецелесообразно. Например, если нам нужно выделить слово зеленым цветом, но оно не имеет особой смысловой нагрузки и важности, то нецелесообразно применять для этого, скажем, элемент «strong», который подразумевает важность своего содержимого и, кроме того, отображает свое содержимое полужирным шрифтом. А вот элемент «span» сам по себе свое содержимое никак не изменяет, но зато легко объединяется со стилями CSS через атрибуты style, class или id, позволяя делать с ним практически все, что пожелает разработчик. Использование элемента «span» показано в примере №1.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элемент «span»</title>
</head>
<body>
	<p title="Применение универсального элемента «span»">
		<!-- Вспоминаем мнемоники. Здесь вставили среднее тире.-->
		Я &ndash; абзац. 
		<span style="color: blue">А я &ndash; синее предложение в нем.<span>
	</p>
</body>
</html>

Пример №1. Использование элемента «span»

Элемент «div» и блочная верстка страниц

Элемент «div» является универсальным блочным элементом. Поэтому он применяется для изменения внешнего вида целых блоков веб-документа, для которых применение тегов с каким-то логическим смыслом нецелесообразно. Также, как и элемент «span», он свое содержимое никак не изменяет, но легко объединяется со стилями CSS через атрибуты style, class или id, являясь по сути аналогом элемента «span», но только среди блочных элементов. Например, пусть у нас есть два абзаца: первый абзац написан текстом синего цвета, а второй – красного. Теперь мы захотели, чтобы текст обоих абзацев был размещен на желтом фоне. Для этого разместим их внутри элемента «div», у которого фон имеет желтый цвет (см. пример №2).

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элемент «div»</title>
</head>
<body>
	<div style="background-color: yellow">
		<p style="color: blue">
			Первый абзац с шрифтом синего цвета.
		</p>
						
		<p style="color: red">
			Второй абзац с шрифтом красного цвета. 
		</p>
	</div>
</body>
</html>

Пример №2. Использование элемента «div»

Следует отметить, что использование элемента «div» приобрело настолько широкое применение, что появилось даже понятие блочной верстки, которое как раз и подразумевает активное использование элемента «div» в качестве универсального компонента. Ведь благодаря универсальности элемента и простоте управления им через стили CSS, появляется возможность разбивать верстку веб-страницы на ряд компактных и, соответственно, легче редактируемых блоков html-кода, которые при отображении браузером собираются вместе в нужной последовательности и формируют окончательный внешний вид страницы. Таким образом, веб-документ представляется блоками «div» в виде этаких «строительных кирпичиков», переставляя которые с места на место, можно легко изменять внешний вид страницы по своему усмотрению.

Злоупотреблять использованием элементов «div» не стоит. Всему должна быть своя мера и свое место. Например, в случае, рассмотренном выше, было бы весьма нелогично применить элемент «p» вместо элемента «div», поскольку "абзац в абзаце" явно не укладывается в наши представления о форматировании текста. Однако и замена элементов «Абзац» на элементы «div», также не имеет логического смысла. Мы бы просто физически разделили текст на два блока. Но это еще ладно, а если бы мы заменили заголовки на элементы «div»? Как бы поисковые машины определяли важность соответствующих блоков? Поэтому, повторимся, всему должна быть своя мера и свое место. Нужно учиться в разумных пропорциях сочитать логическую разметку и простое физическое деление html-кода документа.

Быстрый переход к другим страницам

▲
▼