Now a days everybody wants there blogs theme to be in HTML5, even the latest WP-3.2 default theme twenty eleven is also in HTML-5.
So why to wait, convert our current blog old html theme to brand new HTML-5
In this tutorial, you are going to learn the conversion of old HTML to HTML-5
1. Basic Document’s structure
[php]
<!doctype html>
<head>
</head>
<body>
<header>
</header>
<section id="content">
<article>
<header>
</header>
</article>
</section>
<aside>
<nav>
</nav>
</aside>
<footer>
</footer>
</body>
</html>
[/php]
As we can see, that the tags are very new to us. If we add following CSS:
article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }
we are free to format them like other block elements, e.g.
- Tag Header, as the name itself indicates that all the head contents like, logo, navigation, search etc will come into it. The usage of this tag inside
will be presented below.
tag used to keep the order in document. We can divide the website into sections, e.g. content, comments, gallery etc.
can be used to store our entries – each entry in separate tag! The title and meta of entry should be inside – it will have positive impact on our SEO.
- Our sidebar should be inside
- If we have footer it is a good practice to put it inside
Tags like article, header, footer, section can be used more than one time, but the structure has to be maintained.
[php]
<section id="content">
<article>
<header>
</header>
<p>
</p>
<footer>
</footer>
</article>
</section>
[/php]
In header, we can put h3 tag, which is commonly used in wordpress themes content.
If you want to use more then one time hx tags, then it should be wrapped inside hgroup tag.
[php]
<hgroup>
<h3>Main Title</h3>
<h4>Subtitle</h4>
</hgroup>
[/php]
The meta of the post can be wrapped by
When it comes to the comments we can treat them like posts and put 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:
[php]
<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" />
[/php]
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 not completely supported by all browsers.
More cool features we can find on http://html5demos.com/
No comments :
Post a Comment