Переводим сайт на 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="http://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 - 2934 просмотра


Похожие записи: Разновидности логотипов и их стили.
Любовь и ненависть в CSS
Ручная сортировка публикаций в Ruxe Engine
Аксиоматический CSS. Часть 3. Синтаксис.
Аксиоматический CSS. Часть 2


Комментарии




Зарегистрируйтесь или войдите в Ваш аккаунт, чтобы оставить комментарий.



 

Вход на сайт


Avatar