Переводим сайт на HTML5
Новый стандарт представления и структурирования содержания всемирной паутины шагает по планете. HTML версии 5 закончен и рекомендован к употреблению только в 2014 году, но уже в 2013 осуществлялась его поддержка браузерами. Он был создан для того, чтобы гипертекст легко читался и человеком, и парсерами (например – роботами поисковиков). Этот гипертекст лучше связан и с мультимедиа-технологиями. Сайт на HTML5 больше соответствует требованиям SEO.
Из HTML5 убраны некоторые элементы, потерявшие актуальность. Например: <acronim>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>, <u>, <xmp>. Зато появились новые тэги — <section>, <nav>, <aside>, <header>, <footer> и атрибуты <role> — <article>, <main>, <form>, <button>, <search>... Список неполный, но это не является темой нашего разговора.
Допустим, что у нас есть сайт, который уже использует шаблон, написанный на HTML4, а нам так хочется оптимизировать его содержание. Хочется, чтобы роботы его быстро индексировали и поисковые машины легко находили. То есть, мы захотели перевести его на HTML5.
Для этого нам необходимо удалить неактуальные элементы, улучшить структуру и семантику содержимого сайта. Ну, с первым всё понятно, удалили. Если какой-то из удаляемых тэгов вами использовался, то добавьте к элементу класс и опишите его в файле style.css.
Далее займёмся структурой и семантикой. Для начала разберёмся с новыми тэгами. В предыдущей версии языка повсеместно использовался тэг <div>. Вёрстка на «дивах» была «наше всё»! Но сам по себе <div> не имел никакого семантического значения. Он мог содержать и строчные, и блочные элементы, и рисунок, и текст. Он никуда не исчез, наш любимый <div>, нет. Он по-прежнему будет нами использоваться, но он уже не будет главным.
Рассмотрим основные тэги по порядку, в котором они могут располагаться на странице:
1.<header> — шапка сайта.
2.<nav> — навигационное меню сайта.
3.<section> — группа логически объединённых информационных блоков.
4.<article> — самостоятельный информационный блок.
5.<aside> — боковой блок, обычно с дополнительной информацией или навигацией.
6.<footer> — подвал страницы.
Это основные структурные элементы, блоки, из которых состоит страница. Каждому из таких блоков мы можем присвоить «id» или «class» и описать их в файле css в соответствии с дизайном страницы. Смысл каждого тэга понятен из названия. Вопрос может возникнуть только по поводу разницы между <section> и <article>. То и другое – информационные блоки. Разница в том, что <section> не имеет индивидуального смысла, она может группировать, объединять в себе другие блоки — <article>, статьи. То есть, <article> это отдельная статья, имеющая уникальное содержание, а <section> обычно объединяет несколько статей на определённую тему, или содержит похожие блоки.
Перейдём к основным атрибутам HTML5.
Все их перечислять я так же не буду, мы рассмотрим только основные, которые нам пригодятся обязательно. Атрибуты делают семантику страницы ещё более понятной. Они уточняют смысл структурных элементов, их роль:
1.<article> — статья, информационный блок.
2.<main> — главный информационный блок.
3.<form> — некая интерактивная форма.
4.<button> — активный элемент, кнопка.
5.<search> — поиск по сайту.
6.<banner> — логотип и название сайта, заголовок страницы.
7.<complementary> — дополнительный блок, отделённый от содержания сайта.
8.<contentinfo> — обобщающая информация о сайте, обычно в футере.
9.<navigation> — навигационное меню.
10.<textbox> — поле для ввода текста.
Грубо говоря, робот отдаст приоритет блоку, находящемуся между такими тэгами:
<section id=”#” role=”main”>
…
</section>
И практически проигнорирует:
<section id=”#” role=”complementary”>
…
</section>
Так достигается лучшая оптимизация содержания сайта в соответствии с требованиями SEO. Робот быстрее и правильнее проиндексирует страницу, построенную по такому принципу. Да и «читать» такой текст веб-мастеру удобней.
Перейдём к написанию html страницы.
В HTML5 изменился доктайп. Теперь просто пишем <!DOCTYPE html> и всё! Доктайп сообщает браузеру, как правильно интерпретировать содержание сайта и выдавать его клиенту. Укоротились некоторые строки, например — <meta charset="utf-8"> и язык страницы сейчас объявляется проще — <html lang="ru">. Необязательным стало объявление языка скриптов теперь достаточно написать — <script src="js/jquery.min.js"></script>. Исчезло объявление типа языка программирования — type="text/javascript".
Для того, чтобы Интернет-Эксплорер версии 9 и ниже правильно отображал содержание сайта на HTML5, используется скрипт, на который мы даём ссылку.
В итоге мы получим примерно такой шаблон для страницы сайта:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Заголовок страницы</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="keywords" content="Ключевые слова">
<meta name="description" content="Описание">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js/prefixfree.min.js"></script>
<script src="js/jquery.min.js"></script><!--HTML5-->
</head>
<body>
<header id="#" role="banner">
Содержание шапки сайта...
</header>
<nav id="#" role="navigation">
<ul>
<li>
Меню страницы...
</li>
</ul>
</nav>
<section id="#" role="main">
<article id="#" role="article">
Содержание публикации...
</article>
<article id="#" role="article">
Содержание публикации...
</article>
<article id="#" role="article">
Содержание публикации...
</article>
</section>
<aside id="#" role="complimentary">
Содержание дополнительного блока...
</aside>
<footer id="#" role="contentinfo">
Копирайты, авторы, обратная связь т. д...
</footer>
</body>
</html>
Успехов в сайтостроении!
Опубликовал Administrator - 3 апреля 2016, 07:12 - 2436 просмотров
Похожие записи: Разновидности логотипов и их стили.
Любовь и ненависть в CSS
Ручная сортировка публикаций в Ruxe Engine
Аксиоматический CSS. Часть 3. Синтаксис.
Аксиоматический CSS. Часть 2