Html теги div и span — элементы блочной верстки сайта

Доброго здоровья, дорогие друзья! Пришло время рассказать о двух важнейших html тегах div и span, которые являются определяющими при блочной верстке сайта. Я уже упоминал, что в достопамятные времена сайты верстались с помощью таблиц.

Однако с развитием технологий и постоянным усложнением элементов контента, расположенного на вебстранице, понадобилось разгрузить html код. Для этого был введен CSS (Cascading Style Sheets — Каскадные Таблицы Стилей), в задачу которого входит оформление и позиционирование элементов на странице (то есть, как они выглядят и где располагаются).

Теги div и span - основа блочной верстки сайта

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

Применение тегов DIV и SPAN

Использование html тегов и их атрибутов, в том числе div и span, строго регламентировано Международным Консорциумом. Соответствие принятым требованиям документа html можно проверить с помощью W3C validator. С другой стороны, можно также проконтролировать валидность CSS документа. Таким образом, мы уяснили, для чего был создан CSS. Резюмируя вышесказанное, представлю схематически, как с помощью тега div происходит блочная верстка сайта посредством присоединения стилей CSS к html документу.

Схема блочной верстки сайта с привлечением html тега div

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

Важность тега div подчеркивает тот факт, что он не используется в чистом виде, а только с атрибутами id (идентификатор) или class, значением которых служит селектор, свойства которого представлены в соответствующем файле со стилями.

Отличие id и class заключается в том, что идентификатор id должен быть представлен в коде лишь один раз (он представляет уникальный элемент, для которого задаются свои стили оформления). Атрибут class позволяет связать определенный тег со стилями (то есть ко всем данным тегам, которых может быть несколько, будет применяться данный набор стилей). В значении допускается указывать несколько классов, разделяя их пробелами. А теперь рассмотрим код одной из страниц и посмотрим на структуру блочной верстки с использованием контейнеров div:

Схема блочной верстки web страницы с использованием контейнеров (блоков), построенных посредством html тега div

Как видите, html код, представленный слева, состоит из множества контейнеров, образованных тегом div, вложенных друг в друга, причем каждый со своим идентификатором и (или) классом. Каждому элементу соответствует свой набор стилей CSS, отображенных справа. Конечно, структура html документа состоит не только из контейнеров div, в нее входят и другие теги, однако элемент div вносит решающий вклад в корректное отображение вебстраницы в браузере.

Также, кроме атрибутов id и class, для тега div доступны другие универсальные атрибуты (которые работают практически со всеми тегами) и события. Но наиболее широко используемыми являются все-таки id и class.

Теперь немного о теге span. Так же, как div является ярчайшим представителем блочных элементов, элемент span — строчных. С его помощью можно выделить часть информации внутри других тегов и определить для них свой стиль, присвоив значения определенным свойствам. Например, внутри абзаца (тег p) можно выделить определенный участок текста, окрашенный в другой цвет. Для этого используем в качестве атрибута class и прописываем значение, которым служит имя селектора.

<p><span class="pre">CMS WordPress</span>позволяет создавать ресурсы даже 
не искушенным в этом молодым вебмастерам.</p>

В файле style.css задаем соответствующие этому элементу стили.

.pre { 
     color: blue; /* Синий цвет символов */ 
     font-size: 150%; /* Размер шрифта в процентах */ 
     font-family: serif; /* Шрифт с засечками */ 
     }

Использование html тега span для выделения участка текста на странице

Пожалуй, на сегодня все. Целью этой статьи было дать вам представление о схеме осуществления блочной верстки сайта, выделив значение блочного тега div и строчного элемента span. Также я считаю этот пост своеобразным мостиком между изучением основ html и стилей CSS, который должен был подтвердить их неразрывную связь.

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

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

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Наталия

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

    Ответить
  2. Алексей

    Как исправить ошибку на сайте http://www.gruz-rm.ru как закрыть Незакрытые элемент div.
    ↩↩<span

    Ответить
  3. Людмила1957

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

    Ответить
    1. Игорь Горнов автор

      Спасибо за отзыв, Людмила.

      Ответить