Группировка текста и элементов в блок

<div>

Элемент <div> позволяет сгруппировать несколько элементов в единый блок.

Например, вы можете создать <div>, объединяющий в себе все элементы заголовка сайта (логотип и панель навигации).

Вы также можете создать <div> для объединения комментариев посетителей сайта.

В браузере содержимое элемента <div> будет отображено с новой строки, никаких других изменений внешнего вида не произойдет.

Однако с помощью атрибутов id и class вы можете создать правило CSS, определяющее, сколько места будет занимать элемент <div> на экране, а также изменить внешний вид всех элементов, содержащихся в нем.

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

Код

<div id="header">
    <img src="images/logo.gif" 
    alt="Electric Universe" />
    <ul>
        <li>
            <a href="index.html">Главная</a>
        </li>
        <li>
            <a href="biography.html">Биография</a>
        </li>
        <li>
            <a href="works.html">Дискография</a>
        </li>
        <li>
            <a href="contact.html">Контакты</a>
        </li>
    </ul>
</div> <!-- конец заголовка -->

Результат

Так как внутри <div> может находиться несколько других элементов, комментарии после закрывающего тега <div> бывают очень полезны.

Это позволит вам четко видеть, к чему относится открывающий тег, как показано в последней строке примера.

Предыдущая страницаСледующая страница