Макет HTML

Веб-сайты часто показывают контент в виде многостолбчатой структуры (как в журналах и газетах).

Использование элементов <div> в разметке HTML

Примечание:<div> элемент часто используется в качестве инструмента для разметки, так как его легко можно позиционировать с помощью CSS.

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

Пример

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
Лондон<br>
Париж<br>
Токио<br>
</div>
<div id="section">
<h1>London</h1>
<p>
Лондон является столицей Англии. Это самый населенный город в Великобритании,
с metropolitan area of over 13 million inhabitants.
</p>
<p>
Стоя на реке Темзе, Лондон является важным поселением на протяжении двух тысячелетий,
Его история уходит корнями в основание римлянами, которые назвали его Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Попробуйте сами

CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

Использование разметки веб-сайта с HTML5

Новые семантические элементы HTML5 определяют различные части веб-страницы:

Семантические элементы HTML5

header Определение заголовка документа или раздела
nav Определение контейнера для навигационных ссылок
section Определение раздела в документе
article Определение независимого самостоятельного статьи
aside Определение содержимого вне основного содержимого (например, боковая панель)
footer Определение подвала документа или раздела
details Определение дополнительных подробностей
summary Определение заголовка элемента details

Этот пример использует <header>, <nav>, <section> и <footer> для создания многостолбчатой разметки:

Пример

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
Лондон<br>
Париж<br>
Токио<br>
</nav>
<section>
<h1>London</h1>
<p>
Лондон является столицей Англии. Это самый населенный город в Великобритании,
с metropolitan area of over 13 million inhabitants.
</p>
<p>
Стоя на реке Темзе, Лондон является важным поселением на протяжении двух тысячелетий,
Его история уходит корнями в основание римлянами, которые назвали его Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Попробуйте сами

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

Использование таблиц для макета HTML

Примечание:Элемент <table> не был спроектирован для использования в качестве инструмента макета.

Элемент <table> предназначен для отображения табличных данных.

Использование элемента <table> позволяет получить эффект макета, так как можно настроить стиль таблицы с помощью CSS:

Пример

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    Элемент таблицы не был спроектирован для использования в качестве инструмента布局а.
  </td>
</tr>
</table>
</body>

Попробуйте сами

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>