Diseños web: How to convert WordPress theme to HTML5?

martes, 17 de mayo de 2011

How to convert WordPress theme to HTML5?

How to convert WordPress theme to HTML5?: "
HTML5 offers many improvements and cool features that can be useful while using WordPress.
In this tutorial you will learn How to convert WordPress theme to HTML5. Enjoy!

1. Document’s structure

<!doctype html>
<head>
</head>
<body>
<header>
</header>
<section id="content">
<article>
<header>
</header>
</article>
</section>
<aside>
<nav>
</nav>
</aside>
<footer>
</footer>
</body>
</html>

As we can see some new tags have been added. If we add to our CSS:
article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }
we can format them like other block elements, e.g. <div>
1. Inside <header> we can put elements that can be found usually in tops – nothing special: slider, menu, logo etc. The usage of this tag inside <article> will be presented below.
2. <section> tag helps us keeping the order in document. We can divide our site into sections, e.g. content, comments, gallery etc.
3. <article> can be used to store our entries – each entry in separate tag! The title and meta of entry should be inside <header> – it will have positive impact on our SEO.
4. Our sidebar should be inside <aside> tag. Nothing special, but nobody said that all the innovations will be helpful.
5. <nav> wraps navigation. It isn’t said that in must be inside <aside>, it may as well be in our header or anywhere we want to have our navigation.
6. If we have footer it is a good practice to put it inside <footer>. We can have more than one <footer>, but each should be inside separate <section> and one can be directly inside <body>
Tags <article>, <header>, <footer>, <section> can be used more than one time, but we should keep the proper structure. I propose the following:

<section id="content">
<article>
<header>
</header>
<p>
</p>
<footer>
</footer>
</article>
</section>

Inside <header> we can put <h3> which is in most of wordpress skins as headline of post. If we want place more than one <hX> element we use <hgroup>:

<hgroup>
<h3>Title</h3>
<h4>Subtitle</h4>
</hgroup>

The meta of the post can be wrapped by <footer>, what is a convenient solution.
When it comes to the comments we can treat them like posts and put inside <article> with <header>, <p>, <footer> etc. inside.
When we want to refresh our comment form we should definitely use HTML5. Some new input features have been added. Let’s take a look on this:

<input type="text" name="author" id="comment-form-author" placeholder="Your name" value="" size="22" tabindex="1" required="required">

<input type="email" name="email" id="comment-form-email" placeholder="Your email" pattern="[^ @]*@[^ @]*" value="" size="22" tabindex="2" required="required">

<input type="text" name="url" id="comment-form-url" placeholder="Your website" size="22" tabindex="3" />

As a value of placeholder we can specify a hint for user, it will appear as a text inside the input and after clicking on it will disappear.
pattern attribute allows us to specify a patter than must be followed. Here we have an example of pattern for email address.
HTML5 is powerful tool, but it’s still not supported by every browser. More cool features we can find on http://html5demos.com/