Виды HTML верстки

В этой главе:

  • Табличная верстка

  • Блочная верстка

  • Семантическая верстка

Верстка - процесс создания и структурирования HTML-документов.

Табличная верстка

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

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

В следующем примере используется таблица, состоящая из 3 строк и 2 столбцов, первая и последняя строки объединяют оба столбца с помощью атрибута colspan.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
  <body>
 
    <table style="width: 500px;border:0px;">
      <tr>
        <td colspan="2" style="background-color:#85C2FF;">
          <h1 style="color: black;">Верхняя часть сайта</h1>
        </td>
      </tr>
      <tr style="vertical-align: top;">
        <td style="background-color:#C2EBFF;width:100px;text-align:top;">
          <b>Меню</b><br>
          пункт 1<br>
          пункт 2<br>
          пункт 3
        </td>
        <td style="background-color:#fff;height:200px;width:400px;text-align:top;">
          Место для контента</td>
      </tr>
      <tr>
        <td colspan="2" style="background-color:#85C2FF;text-align:center;">
        Copyright © 2012 www.puzzleweb.ru</td>
      </tr>
    </table>
 
  </body>
</html>

Результат данного примера в окне браузера:

Верхняя часть сайта

Меню

пункт 1

пункт 2

пункт 3

Место для контента

Copyright © 2012 www.puzzleweb.ru

Несмотря на то, что с помощью таблиц можно создавать красивый дизайн и удобные макеты страниц, в первую очередь таблицы были разработаны для добавления на страницы табличных данных, а не в качестве инструмента для разметки.

Блочная верстка

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

В следующем примере используется 5 элементов <div> для создания макета страницы из двух колонок.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
  <body>
 
    <div id="container" style="width:500px">
 
      <div id="header" style="background-color:#A3FFC2;">
        <h1 style="margin-bottom:0;">Верхняя часть сайта</h1>
      </div>
 
      <div id="menu" style="background-color:#FFFFB8;height:200px;width:100px;float:left;">
        <b>Меню</b><br>
        Пункт 1<br>
        Пункт 2<br>
        Пункт 3</div>
 
      <div id="content" style="background-color: #fff;height:200px;width:400px;float:left;">
        Место для контента
      </div>
 
      <div id="footer" style="background-color:#A3FFC2;clear:both;text-align:center;">
        Copyright © 2011 www.puzzleweb.ru
      </div>
 
    </div>
 
</body>
</html>

Результат данного примера в окне браузера:

Верхняя часть сайта

Меню
Пункт 1
Пункт 2
Пункт 3
Место для контента
Copyright © 2011 www.puzzleweb.ru

Примечание: для уменьшения объема кода и удобства редактирования css стилей, сразу для нескольких станиц, сделанных по одному шаблону, рекомендуем вам выносить весь css-код в отдельный файл.

Семантическая верстка

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

Для начала, чтобы было понятнее, как используются эти элементы, предлагаем вам изучить один из возможных макетов страницы:

<header>

<nav>

<h3>

<aside>

<section>

<h1>Заголовок</h1>

<article>

<footer>

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

Предлагаем немного подробнее рассмотреть элементы, которые были использованы в макете:

<section>

Тег <section> определяет раздел страницы, в котором размещается логически связанная информация, как правило, имеющая свой заголовок.

Каждый раздел может иметь свои собственные теги <header> и <footer>, включающие в себя свои собственные заголовки.

<header>

Тег <header> определяет верхнюю часть страницы или элемента. Он может содержать заголовки, но это не является обязательным. Есть лишь одно ограничение использования <header> он не должен содержать сам себя и элемент <footer>.

<nav>

Для создания меню навигации не веб-странице в HTML5 был добавлен тег <nav>. Он предназначен для содержания гиперссылок, ведущих на другие страницы или другую часть документа.

<article>

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

<aside>

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

<footer>

Тег <footer> используется для определения нижнего колонтитула страницы или элемента. Он не может содержать в себе <header> и определять у себя нижний колонтитул.

Использование новых тегов

Хотя новые HTML-элементы можно использовать уже сейчас, они не всегда будут понятны старым версиям браузеров. В старых браузерах новые HTML-теги, используемые для семантической разметки, не поддерживаются должным образом и могут быть отображены в качестве строчных элементов. Для устранения этой проблемы нужно будет явно указать, что они являются блочными элементами:

1
2
3
<style>
  section, header, nav, article, aside, footer { display: block; }
</style>

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

К сожалению представленный CSS-код не сможет помочь браузеру Internet Explorer 8 и его более ранним версиям корректно отображать семантические элементы. Для корректой обработки новых семантических элементов во всех старых версиях IE нам придется прибегнуть к помощи JavaScript. Просто добавьте следующий код в элемент <head>, и старые версии IE будут корректно обрабатывать новые элементы:

1

2

3

4

5

6

7

8

<script>
  document.createElement("section");
  document.createElement("header");
  document.createElement("nav");
  document.createElement("article");
  document.createElement("aside");
  document.createElement("footer");
</script>