Блочный элемент Div в HTML. Как использовать его в роли контейнера?

блочный элемент div в html. как использовать его в роли контейнера?

Использование элемента div

При построении HTML-разметки зачастую возникает потребность обернуть несколько элементов в единый блок. Элементы, входящие в такие конструкции, согласно уровню вложенности, называются дочерними и родительскими. Родитель также может быть обозначен словом «контейнер». Распространенными случаями использования таких контейнеров являются:

  • Разделение страницы на участки с однородным содержимым.
  • Задание разного стилевого оформления для содержимого.
  • Необходимо улучшить восприятие составленной разметки.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример использования блока div</title>
    </head>
    <body>
        <!-- Заголовок и абзац размещены внутри блочного элемента, но он 
            не влияет на их отображение -->
        <div>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
    </body>
</html>

Заметка
На первый взгляд ценность блочного элемента <div> не видна. В полной мере она раскрывается с использованием технологии каскадных стилей (сокр. CSS). Можно задать элементу <div> атрибуты id или class, на которые повесить определенные стили: цвет заднего фона, выравнивание на странице, сделать его видимым или скрытым, и многое другое. Манипуляция со свойствами отображения контейнера будет влиять и на элементы, расположенные внутри него.

Пример структуры страницы

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

В примере, представленном ниже, каждому контейнеру <div> заданы атрибуты id со значением характеризующим их роль на странице. Обязательный элемент <head> содержит блок <style>, внутри которого сформированы стили отображения наших контейнеров.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример задания структуры сайта</title>

        <!-- Описание стилей контейнеров. Пока, вам не
        обязательно понимать принцип их работы. Просто
        скопируйте пример и посмотрите как он работает -->
        <style>
            body, html {
                height: 100%;
                margin: 0;
            }
            #header {
                background: #0D3349;
                float: left;
                width: 100%;
                height: 10%;
            }
            #content {
                float: left;
                width: 100%;
                height: 80%;
            }
            #article {
                background: #4A4a4a;
                height: 100%;
                width: 70%;
                float: left;
            }
            #reclam {
                background: #0f74a8;
                height: 100%;
                width: 30%;
                float: left;
            }
            #footer {
                background: #96DD3B;
                float: left;
                width: 100%;
                height: 10%;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h2>Меню и логотип</h2>
        </div>

        <div id="content">
            <div id="article">
                <h2>Содержание статьи</h2>
            </div>
            <div id="reclam">
                <h2>Место для рекламы</h2>
            </div>
        </div>

        <div id="footer">
            <h2>Контактные данные</h2>
        </div>
    </body>
</html>

Последние публикации