Как перейти с div вёрстки на разметку HTML5?
02.12.2014 в 19:50, eleph
Предлагаю небольшой обзор стандарта HTML5. Ну есть он, каковы отличия, что нового, чем лучше старого доброго html4?
По мере популяризации стандарта, многие задались вопросом, стоит ли переписывать код разметки действующего/создаваемого сайта под новый стандарт HTML5? Если да, то как?
Заведем здесь небольшой пример для того, чтобы было дальше нагляднее.
Итак, имеем примерно такой код документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="style.css" type="text/css">
<script src="script.js" type="text/javascript"></script>
<title>Заголовок</title>
</head>
<body>
<div class="header">
<div class="top_menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div class="left">
<p>Lorem ipsum</p>
</div>
<div class="right">
sidebar
</div>
<div class="footer">
copyright
</div>
</body>
</html>
Стандартный двух колоночный макет, с верхним меню в шапке сайта.
Базовые теги стандарта html5:
<header> - элемент, который обозначает шапку сайта или какой-то секции. На странице может присутствовать сразу несколько элементов.
<footer> - элемент, обозначающий подвал страницы (нижней её части), также может являться нижней частью любой секции. На странице может присутствовать несколько таких элементов (например, подвал страницы с информацией о копирайте + элемент в каждой новости).
<nav> - элемент служит для обрамления любого меню сайта. Может располагаться (хотя и необязательно в блоке header).
<main> - элемент для отображения основного контента страницы сайта. Он НЕ должен содержать навигационные и вспомогательные блоки сайта, такие как меню, логотип, сайдбары и т.д.
<section> - используется для логического структурирования блоков информации на странице. Например, он может обрамлять списки новостей, статей, уроков и т.д.
<aside> - элемент, который используют для обозначения вспомогательных боковых колонок. Например, им обрамляются сайдбары.
<article> - элемент используется для логического выделения самостоятельной единицы информации. Например, внутрь тега может быть помещен, анонс статьи с заголовком, заметка, пост блога и.т.д.
Некоторые теги, которые могут использоваться по необходимости:
<audio>, <video> - теги для вставки аудио/видео материалов на сайт.
<time> - тег для вставки даты. Например, дата размещения статьи.
<canvas> - элемент используется для рисования двухмерных изображений с помощью скриптов (в частности Javascript). Графики на сайтах, диаграммы и т.д.
Элементы должны содержать открывающий/закрывающий теги. Вообще, это относится не только к элементам стандарта HTML5. Хотя современные браузеры и научились правильно ставить закрывающий тег, в случае отсутствия такового — правилом хорошего тона считается закрытие тегов (если речь идёт не об одиночных) самим разработчиком.
Теперь небольшая подготовительная часть, чтобы переход был минимально ощутим для старых браузеров:
Добавляем в секцию <head>:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Для понимания неизвестных блочных элементов брузером, в файл со стилями добавляем:
footer, nav, header, section, aside {
display: block;
}
Теперь посмотрим, что получится, если переписать код нашего шаблона под стандарт HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
footer, nav, header, section, aside {
display: block;
}
</style>
<title>Document</title>
</head>
<body>
<header class="header">
<nav class="top_menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</header>
<main class="left">
<p>Lorem ipsum</p>
</main>
<aside class="right">
sidebar
</aside>
<footer class="footer">
copyright
</footer>
</body>
</html>
Как видим различия?
- Доктайп сократился и стал лаконичным. Теперь нет необходимости мучительно выбирать подходящий.
- Пропали атрибуты type="…", MIME-типы у тегов внутри.
- Все блоки div были заменены на семантические элементы разметки. Причем если селекторы в файле стилей не были привязаны к тегам (например, не "div.header", а ".header"), то стили без правок применятся к соответствующим элементам.
Нужно понимать, что переход на HTML5 это больше, чем просто перевод div-верстки на теги из нового стандарта.
Это оптимизация сайта под поисковики, под всю ту широкую линейку всевозможных современных устройств, с которых могут просматриваться сайты. Новые возможности по вставке медиа материалов, дополнительные стандартные возможности при работе с формами (многие из которых раньше достигались только через подключение скриптов).
Это лишь краткий список новшеств. Надеюсь, данный экскурс поможет Вам разобраться.
Вопросы, уточнения — оставляйте в комментариях.
— 
joey, 09.07.2018 в 12:44 ответить #
© 2012—2023 «Hellohtml.ru» работает с помощью HostCMS, Учебник HTML
Наверное в тексте лишнее слоао.
"нижней частью любой секции секции."
Успехов
—
Frank, 01.05.2018 в 17:00 ответить #