Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Etapy-sozdaniya-sajta » Ot-blochnoj-vyorstki-k-semantike

От блочной вёрстки сайта к семантике.

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

Семантическая версткаМногие вебмастера поспорят со мной, что семантика появилась давно и в принципе окажутся правы. Стоит лишь вспомнить такие теги как i, em или b, strong, которые для пользователя сайта не представляли интереса, а для поисковиков имели совершенно разные значения + обозначение заголовков с помощью тегов h1, h2 … h6. Да, всё это было, но не было целостного обозначения блоков страницы. Давайте сравним два разных кода, но выводящие визуально ничем не отличающуюся страничку.

Код без семантики:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Описание странички</title>
<style>
body {
font: 12pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
margin: 0; /* Отступы на странице */
}
h1 {
font-size: 36px; /* Размер шрифта */
margin: 0; /* Убираем отступы */
color: #ffc; /* Цвет текста */
}
h2 {
margin-top: 0; /* Убираем отступ сверху */
}
#header { /* Верхний блок */
background: #20867B; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
#sidebar { /* Левая колонка */
float: left; /* Обтекание справа */
border: 1px solid #ccc; /* Параметры рамки вокруг */
width: 30%; /* Ширина колонки */
padding: 5px; /* Поля вокруг текста */
margin: 10px; /* Значения отступов */
}
ul li { 
list-style-type:none; /* убираем маркер */ 
}
#content { /* Правая колонка */
margin: 10px 5px 20px 38%; /* Значения отступов */
padding: 5px; /* Поля вокруг текста */
border: 1px solid #ccc; /* Параметры рамки */
}
#footer { /* Нижний блок */
background: #999; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
clear: left; /* Отменяем действие float */
}
</style>
</head>
<body>
<div id="header"><h1>Название сайта</h1></div>
<div id="sidebar">
 <ul>
    <li><a href="#">Пункт №1</a></li>
    <li><a href="#">Пункт №2</a></li>
    <li><a href="#">Пункт №3</a></li>
    <li><a href="#">Пункт №4</a></li>
 </ul>
</div>
<div id="content">
<h2>Заголовок текста </h2>
<p>Здесь мы как всегда что-то пишем бла бла бла бла бла бла бла бла бла бла бла бла бла бла</p>
<p>бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла </p>
</div>
<div id="footer">&copy; Александр Побединский </div>
</body>
</html>

Результат можно увидеть здесь. В принципе нетрудно догадаться какой элемент где располагается.

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

А теперь взглянем на семантический вариант вёрстки

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Описание странички</title>
<style>
body {
font: 12pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
margin: 0; /* Отступы на странице */
}
h1 {
font-size: 36px; /* Размер шрифта */
margin: 0; /* Убираем отступы */
color: #ffc; /* Цвет текста */
}
h2 {
margin-top: 0; /* Убираем отступ сверху */
}
header { /* Верхний блок */
background: #20867B; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
nav { /* Левая колонка */
float: left; /* Обтекание справа */
border: 1px solid #ccc; /* Параметры рамки вокруг */
width: 30%; /* Ширина колонки */
padding: 5px; /* Поля вокруг текста */
margin: 10px; /* Значения отступов */
}
ul li { 
list-style-type:none; /* убираем маркер */ 
}
article { /* Контент нашей странички */
margin: 10px 5px 20px 38%; /* Значения отступов */
padding: 5px; /* Поля вокруг текста */
border: 1px solid #ccc; /* Параметры рамки */
}
footer { /* Подвал страницы */
background: #999; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
clear: left; /* Отменяем действие float */
}
</style>
</head>
<body>
<header><h1>Название сайта</h1></header>
<nav>
   <ul>
      <li><a href="#">Пункт №1</a></li>
      <li><a href="#">Пункт №2</a></li>
      <li><a href="#">Пункт №3</a></li>
      <li><a href="#">Пункт №4</a></li>
    </ul>
</nav>
<article>
    <h2>Заголовок текста </h2>
           <p>Здесь мы как всегда что-то пишем бла бла бла бла бла бла бла бла бла бла бла бла бла бла</p>
           <p>бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла </p>
</article>
<footer>&copy; Александр Побединский </footer>
</body>
</html>

Результат как вы можете видеть такой же, но есть одно большое отличие: здесь мы чётко даём понятие любому поисковику, браузеру где что у нас находится (шапка, навигация, контент, подвал и т.п). Хотя если посмотреть на стилевые свойства второго примера, то можно сказать что вёрстка на HTML5 тоже является блочной, с той лишь разницей, что вместо блока div мы используем структурные элементы html5.
В следующих статьях я обязательно расскажу Вам об адаптивной верстке и применении шаблонов, чтобы быть в курсе новых тем незабываем подписываться.



наверх