Оптимизируем шаблон wordpress в стандарт HTML 5

опубликовано: admin в 01/7/11 • категория wordpress,Вэбдизайн,темы

HTML5 предлагает много улучшений и замечательных функций, которые могут быть полезными при использовании WordPress.

У HTML5 примерно вот такая структура:

1	<!doctype html>

Как можно увидеть, в этом стандарте были добавлены новые тэги. Если будем добавлять их к CSS это будет выглядеть примерно вот так:

1	article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }

Их мы может отформатировать используя тэг <div>.

1. Внутри <header> мы можем поставить элементы, которые в принципе и находятся в шапке шаблона wordpress - это слайдер, меню, логотип и т.д. А вот использование этого же тега внутри <article> будет описано ниже.

2. Тег <section> помогает сохранять порядок в документе. Мы можем разделить наш сайт на разделы - например: содержание, комментарии, галерея и т.д.

3. Тег <article> используется для хранения наших записей, каждая запись сохраняется в отдельный тег! Заголовок и метки должны быть внутри <header> - это положительно отразится на SEO.

4. Боковые колонки или сайдбары, как мы обычно их называем, сайта должны быть внутри тега <aside>. В принципе ничего особенного, но никто не сказал, что все нововведения html 5 будут полезны )).

5. Тег <nav> для того чтобы облачить навигацию. На схеме эти теги находятся внутри <aside>, а в реале это не обязательно, <nav> может также располагаться и в заголовке или в том месте, где будет навигация.

6. Если в шаблоне есть подвал(так он называется в wordpress), это как раз то место, где надо использовать тег <footer>. Можно ставить более одного тега, но каждый из них должен быть внутри отдельных секций тега <section>, и должны быть непосредственно внутри <body>.

Теги <abstract>, <header>, <footer>, <section> можно использовать более одного раза, но должна быть соответствующая структура. Я предлагаю следующее:

Внутри <header> можно использовать тег <h3>, который в большинстве тем wordpress используется как заголовок поста. Если мы хотим установить больше чем один тег <hX> мы должны использовать тег <hgroup>:

Title

Subtitle

Метки ваших записей можно расположить снизу обернув их в <footer>, вы заметите, что это правильное решение.

Что касается комментариев, мы можем рассматривать их как отдельные записи, и обернём их тегами <article> с <header>, <p>, <footer> и т.д. внутри кода для комментариев.

Для того чтобы обновить форму для заполнения комментария, надо обязательно использовать HTML5. Здесь есть новые функции. Вот некоторые из них:

<input id="comment-form-author" tabindex="1" name="author" required="required" size="22" type="text" value="" placeholder="Your name" />
 
<input id="comment-form-email" tabindex="2" name="email" pattern="[^ @]*@[^ @]*" required="required" size="22" type="email" value="" placeholder="Your email" />
 
<input id="comment-form-url" tabindex="3" name="url" size="22" type="text" placeholder="Your website" />

В качестве значения placeholder мы можем сделать подсказку для пользователя, она будет выглядеть как текст внутри формы заполнения и после нажатия на нее исчезнет.
Тег pattern позволяет указать какая информация должна быть в данной строке, что должно быть соблюдено. На примере видно шаблон адреса электронной почты.

HTML5-это мощный инструмент, но он пока не поддерживается всеми браузерами, поэтому перед тем, как вы будете оптимизировать ваш шаблон прикиньте сначала, надо это вам или нет.

Также читай на cooledit.org.ua:

загрузка...