В HTML5 появилось множество новых тегов, которые в основном помогают воспроизводить анимацию и flash. В этой статье мы не будем рассматривать теги, касающиеся дизайна, а рассмотрим только те теги, которые помогут поисковым систем лучше ориентироваться на Вашем сайте (говоря проще: оптимизировать html-код под поисковые машины).
С введением HTML5 появились новые важные теги для поисковой оптимизации сайта. Это теги:
- <article></article>
- <header></header>
- <footer></footer>
- <menu></menu>
В принципе можно ничего не менять у себя на сайтах, но при создании новых сайтов нужно сразу приспосабливать их к этим инновациям. Рассмотрим по отдельности особенности применения каждого из этих тегов.
Обзор новых тегов в HTML5
1. Тег <article></article>
<article></article> помогает поисковой машине точно определить место расположения основной части контента на странице сайта. Необходимо лишь весь контент сайта заключить в этот тег. Например:
<article> ... контент ... </article>
Тегу <article> можно прописать стили, но, к сожалению, старые версии браузеров не поддерживают данный тег, поэтому я бы не рекомендовал делать это, дабы не испортить внешний вид контента. Также не рекомендуется применять к нему стили даже при создании новых сайтов в ближайшем будущем (ведь старые браузеры ещё долго будут существовать). Поэтому, мой совет: просто выделить тегами <article></article> свой контент на сайте, оставив всю структуру html-документа, как есть. В этом случае в дизайне ничего не поменяется.
2. Тег <header></header>
В этот тег следует заключать всю шапку сайта. Сюда, чаще всего входит верхнее меню, логотип и т.п. Поскольку шапка сайта одинаковая для всех страниц, то есть вероятность, что поисковые машины не будут обращать большое внимание на неё, а значит это может помочь придать основному контенту большой вес на странице.
3. Тег <footer></footer>
Весь подвал сайта нужно заключить в тег <footer></footer>. Чаще всего в подвале указывается копирайты, счетчики и т.д.
4. Тег <aside></aside>
В тег <aside></aside> заключается сайдбар или другими словами - боковая колонка сайта.
Используя эти теги, Вы поможете поисковой машине правильно разобраться в структуре и коде Вашего сайта.
Теперь пару слов о новых атрибутах, которые можно использовать в ссылках в HTML5.
Атрибуты ссылок <a> в HTML5
В уроке про тег <a> я уже писал о всех атрибутах, которые можно подставить в параметр target. Теперь расскажу о новых атрибутах, которые появились в HTML5:
- alternate - показывает, что ссылка ведет на альтернативный адрес страницы;
- author - показывает, что ссылка ведет на страницу автора;
- help - показывает, что ссылка ведет на страницу помощи;
- license - показывает, что ссылка ведет на страницу с правилами использование лицензии;
- next, prev - когда контент разбит на множество страниц, то атрибут next показывает где искать продолжение контента, а prev - предыдущая страница;
Не могу не отметить и то, что в HTML5 появилась возможность асинхронной загрузки JavaScript. Для того, чтобы воспользоваться этим нужно прописать всего лишь один маленький атрибут к тегу <script>:
<script async type="text/javascript" language="JavaScript" src="javascr.js"></script> или <script defer type="text/javascript" language="JavaScript" src="javascr.js"></script>
Специальный параметр async означает, что скрипт начинает выполняться после полной загрузке окна, в свою очередь defer выполняется как только он загрузился полностью.
Примечание:
Асинхронность не будет работать, если явафайл содержит вывод контента через JavaScript:
document.write('text text text');
При создании новых сайтов учитывайте нововведения в верстке HTML5, чтобы помочь поисковому роботу корректно и быстро определять структуру Вашего сайта.
Читайте также:
• HTML тег <table> - подробное описание с примерами
• HTML тег <img> - подробное описание с примерами
• HTML тег <form> - подробное описание с примерами
• HTML тег <div> - подробное описание с примерами
• CSS border
• CSS background
• CSS transition
• Как сделать фон для сайта
• Как убрать подчеркивание ссылки