Convert Your WordPress Theme to HTML5

Convert Your WordPress Theme to HTML5

on Feb 23rd 2012 with 70 comments
Tutorial Details
  • Program: WordPress & Themes.
  • Version: 3.0 or Above
  • Difficulty: Intermediate
  • Estimated Completion Time: 30 minutes

HTML5 introduces a great set of new features and easy options. Soon it will have the full support of most browsers in use today. Eventually everyone will have to convert WordPress themes from XHTML to HTML5. After Google’s Panda Update, your site needs clearer and more human-readable code to rank better on Google. I will teach you how to convert your theme from XHTML to HTML5. We will also take care of the 2% of internet users with JavaScript disabled (for backward compatibility).

Our Goals

In this tutorial we will concentrate on converting our WordPress theme from XHTML to HTML5. We will go step by step, learning the changes through the files listed below (these files are present in your theme folder, i.e. wp-content/themes/yourtheme/here!)

  • header.php
  • index.php
  • sidebar.php:
  • footer.php
  • single.php (Optional)

Basic HTML5 Layout

Let’s have a look at the basic HTML5 layout that we are going to build. HTML5 is a lot more than just the doctype at the very start of your code. Several newly introduced elements help us to style and code in an efficient way with less mark up (that is one reason HTML5 is better).

<!DOCTYPE html>
<html lang="en">
<head>
	<title>TITLE | Slogan!</title>
</head>
<body>
	<nav role="navigation"></nav>
<!--Ending header.php-->
<!--Begin  index.php-->
	<section id="content">
		<article role="main">
			<h1>Title of the Article</h1>
			<time datetime="YYYY-MM-DD"></time>
			<p>Some lorem ispum text of your post goes here.</p>
			<p>The article's text ends.</p>
		</article>
		
		<aside role="sidebar">
			<h2>Some Widget in The Sidebar</h2>
		</aside>
	</section>
<!--Ending index.php-->
<!--begin  footer.php-->
	<footer role="foottext">
		<small>Some Copyright info</small>
	</footer>
</body>
</html>

Now we just need to know where to put the new HTML5 tags of header, footer, nav, section and article. The names of the newly introduced tags are self explanatory about their function, in contrast with div structured XHTML.

Step 1 Converting header.php to HTML5

Now I will show you the code commonly used in the header.php of XHTML WordPress themes.

XHTML Theme header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My  Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header  -->
<div class="header">
	<div class="container">
		<h1><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
	</div><!-- End  Container -->
</div><!-- End  Header -->
<!-- Navigation Bar Starts -->
<div class="navbar">
	<div class="container">
		<ul class="grid nav_bar">
			<?php wp_list_categories('navs_li='); ?>
	     </ul>
	</div>
</div>
<!-- Navigation Bar Ends -->
<div class="container">

One must ask here why are we doing all this? The answer is simple, for the semantic markup of HTML5. It reduces the markup, making it very easy to understand & manage.

HTML5 header.php (Conversion)

Read the code and then follow the instructions below to convert your theme’s header.php to HTML5.

<!doctype html>
<html>
<head>
<title>My Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header -->
<header>
    <div class="container">
        <h1 class="grid"><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
    </div>
</header>
<!-- End Header  -->
 
<!-- Navigation Bar Starts-->
<nav>
    <div class="navbar">
        <ul class="grid nav_bar">
            <?php wp_list_categories('title_li='); ?>
         </ul>
    </div>
</nav>
<!-- Navigation Bar Ends -->
<section class="container">

As you can see the converted code is very similar to XHTML code. Let’s discuss the changes.

  • <!doctype html> – HTML5 has a really simple doctype but it includes a lot of new semantic tags
  • <header> – The semantic tag for the header portion
  • <nav> – We replaced the navigation bar’s div code with a new semantic tag used to control the nav bar in HTML5.

Note: Some people include the section tag in the header. There is a lot of debate about this. I personally am against including the section tag in the header as it will destroy the beauty of HTML5. You can use the old div in there of course.

What About the Scripts and Stylesheets?

The scripts and stylesheets inclusion in the header, when converting a WordPress theme to HTML5, is really very simple. In HTML5 we just use <script> and <link> tags. So remove type="text/javascript" – all browsers will consider a <script> tag as JavaScript unless you explicitly write its type. Similarly remove type="text/css" from your <link> tag for stylesheet.

Considering the Old Browsers!

HTML shiv is included for older browser support. It is a simple JavaScript file. Some examples of shiv are Remy Sharp’s HTML5 script or the Modernizr script. Let’s use Modernizr.

We will need to enqueue the script from our functions.php file, like this:

function html5_scripts()
{
	// Register the Modernizr script
	wp_register_script( 'modernizr', get_template_directory_uri() . '/js/Modernizr-1.6.min.js' );

	// Enqueue Modernizr
	wp_enqueue_script( 'modernizr' );
}
add_action( 'wp_enqueue_scripts', 'html5_scripts', 1 );

Tip: Put your heading tags which occur consecutively inside <hgroup>

Note: This script needs to be placed at the very top inside the <?php wp_head(); ?> tag, which is why we have given the add_action a priority of 1.

Step 2 Converting index.php to HTML5

A common XHTML index.php consists of the following tags. I will convert each of them, explaining the whole process after conversion.

Note: I am not adding the whole code here, as it will make the post longer for no reason.

XHTML index.php

<div id="container">
<div id="content">
<div id="entries">
<div id="post">...</div>

</div><!--Ending Entries-->
<?php get_sidebar(); ?>
</div><!--Ending content-->
</div><!--Ending container-->
<?php get_footer(); ?>

HTML5 index.php (Conversion)

<div id="container">
	<div id="content">
		<section id="entries">
			<article id="post">...</article>
		</section><!--end entries-->
		<?php get_sidebar(); ?>
	</div><!--end content-->
</div><!--end wrap-->
<?php get_footer(); ?>

Before having a look at the changes we made, we must know that HTML5 provides us with three basic layout modelling tags: section, article and aside. Section will replace with entries’ div, article will replace the post’s div, and aside will be used for our sidebar a little later.

  • <section> – HTML5 has a layout tag called section that separates a block for the code used in it
  • <article> – A semantic tag for the post’s portion, similar to section
  • <aside> – A semantic tag for the post’s images to put them on aside and for sidebars
  • Breadcrumbs and Page Navigation – If our theme has breadcrumbs then they will be used in a div like <div class="breadcrumbs">...</div> and for page navigation we will use <nav id="pgnav">...</nav>

Complete Index.php in HTML5

Note: I am pasting a general index.php, as in, some completed code converted to HTML5 below.

<section class="entries">
  <?php if (have_posts()) : while (have_posts()) : the_post();
  
<article class="post" id="post-<?php the_ID(); ?>">
    <aside class="post_image">
        <?php
        if ( has_post_thumbnail() ) { 
            the_post_thumbnail();
        } else { ?>
            <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/noImage.gif" title="<?php the_title(); ?>" /></a>
        <?php }?>
    </aside>
    <section class="post_content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <p><?php echo get_the_excerpt(); ?></p>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more ">Read More</a>
    </section>
    <section class="meta">
 
    <p> <?php the_category(',') ?></p>
 
    <p><?php the_tags(""); ?></p>
 
    </section>
</article>
  <?php endwhile; else: ?>
  <p>
    <?php _e('Sorry, no posts matched your criteria.'); ?>
  </p>
  <?php endif; ?>
 
  <?php posts_nav_link(' ⏼ ', __('« Newer Posts'), __('Older Posts »')); ?>
</section>

Step 3 Working on sidebar.php

We will use <aside> in our sidebar instead of a div, for example:

sidebar.php in XHTML

<div id="sidebar">...</div>

Becomes the following after using <aside>.

sidebar.php in HTML5

<aside id="sidebar">...</aside<

That was easy!

Step 4 The footer.php Edits

We will use the <footer> semantic tag instead of a simple div in our footer.php, for example:

footer.php in XHTML

<div id="footer">
<div id="foot_widgets">...</div>
<div id="copyright">...</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

footer.php in HTML5

<footer id="footer">
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<div id="copyright">...</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Step 5 Working on single.php

There are no special changes in single.php so I am just pasting the changed code, it might be helpful to some of you who are beginners. I have used section and article tags in it. You can also use the <time> tag if you like.

single.php in XHTML

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="container">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <div class="content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
 
        <div id="entry-content-single">
          <?php the_content('<p >Read More</p>'); ?>
        </div>
        <div class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?> 
 
          <p><?php the_tags(""); ?></p>
        </div>
        <div class="clearfix"></div>
    </div>
 
  <!-- End of post -->
</div></div>
 

<?php get_footer(); ?>

single.php in HTML5

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<section class="content">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <article class="box">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
 
        <section id="entry-content-single">
          <?php the_content('<p>Read More</p>'); ?>
        </section>
        <section class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?> 
 
          <p><?php the_tags(""); ?></p>
        </section>
        <div class="clearfix"></div>
    </article>
  <!-- end post -->
</section></div>

<?php get_footer(); ?>

Note: Regarding SEO, some people use <header class="entry-header"> before the post titles, which is also a good practice.

Step 6 Finally the style.css

In the end all we care about is the backward compatibility issue. Being on the safe side for older browsers, HTML5 elements should be displayed as blocks using a display: block style. Just put the following code at the top of your style.css:

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

Additional Notes

If you use audio or video embedded into a template file, you must use HTML5 audio and video elements. Some more tags can be viewed in the cheat sheet below. Whenever you add some new functionality, do a little research on how to add it in HTML5 with its semantic tags.

HTML5 Resources

Some HTML5 Free Themes

Your Turn Now

Are you going to use HTML5? Have you changed to HTML5 already and did the changes affect your SEO Ranking? Let us know in the comments below!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I have been designing web pages since the early days of tables and spacers. And No – I've never used the scrolling marquee with Comic Sans fonts :P. I am doing Electrical Engineering from U.E.T Lahore, but web development is the area of my deep interest. I can write HTML, CSS, PHP, Assembly, C, C++(OOP), Visual Basic, Verilog, and MySQL etc. Personally I like tablets having Andriod OS on them. When not on the computer, I enjoy spending time with my family & Friends, taking pictures and drinking strong coffee. I blog at Freakify.com where I collected 95 Best Paid WordPress Themes in 2013. Connect With Ahmad Awais on Google+, Facebook and Twitter. Now reporting at AngryGadgets and Windows 8 Daily NEWS  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Wong Chun Kiat

    <aside id="sidebar"<…</aside<

    or

    …

    • http://wp.envato.com/ Japh Thomson
      Staff

      Hello, thanks for your comment! Something seems to have gone amiss with the code though. Please ensure you use the code formatting listed below the comment box, e.g. <pre name=”code” class=”html”>&lt;aside&gt;</pre>

    • http://freakify.com Ahmad Awais
      Author

      It is <aside>
      In the article !

    • http://freakify.com Ahmad Awais
      Author

      The correct piece of code has > at the end
      i.e.

      <aside id=”sidebar” >…</aside>

      Japh kindly correct this is rendering error.

  • http://pakwing.com kamal ashraf

    hmmm, very difficult for me as i am beginner yet, :). any ways i appreciate your hard work.

    • http://freakify.com Ahmad Awais
      Author

      Try it , it is easy not that much hard as much you think !
      Give it a shot.

  • http://xtendedview.com Tushar

    but what are the advantages of doing so? Is there any SEO effect?

  • http://www.techtushar.com TechTushar

    is therea ny adavnatge of html 5 with wordpress? I meas by SEO?

    • http://www.ruturaaj.com Ruturaaj

      Yes… I second to this. Apart from code-readability, is there any advantage of converting XHTML of WordPress to HTML5? I know there are some decent advantages of HTML5, especially about embedding media into HTML. But I don’t see any need to convert the entire XHTML to HTML5, because HTML5 elements can anyway go well with existing XHTML. Of course, we’re talking about mixing two “standards” here, but who cares if the website runs good in most of the popular browsers without any damages to the original content structure in design schematic.

      • http://freakify.com Ahmad Awais
        Author

        Exciting new HTML5 elements — like , , and — better describe what your content is all about.Have you heard about schema.org? If not then you must know that Google , Yahoo & Bing etc like your code to be more descriptive, if you want to have good results of SEO.
        It is better to use <footer> instead of <div id=”grid_13_etc”>.Conversion to HTML5 will lead to a good approach towards SEO of your WordPress blog and definitely good PR rankings.

        • Startmywp

          You still haven’t answered Ruturaaj’s basic question”… any advantage of converting XHTML of WordPress to HTML5…”. Please explain.
          Also, can you elaborate in clearer words about “Conversion to HTML5 will lead to a good approach towards SEO of your WordPress blog and definitely good PR rankings” ?

          Thanks.

          • http://freakify.com Ahmad Awais
            Author

            HTML5 has a great semantic code that helps a Google spider to index your site more perfectly in the Google’s results so in turn you get good on SERP and can expect high PR + high traffic.

  • http://www.designrshub.com Manuel Garcia

    This might help others:

    Lists of HTML5 Articles, Tools, Templates and Tutorials
    http://www.designrshub.com/2011/12/lists-of-html5-articles-tools-templates.html

  • http://www.web-development-blog.com Olaf Lederer

    Hi,

    Nice tutorial and I think it’s must read for every HTML5 beginner using WordPress.
    You have some problem in your HTML5 footer section. You call the 3 widget container id="foot_widgets", I guess that should be class="foot_widgets"instead?

    You can’t access elements by ID if those ID’s are non-unique

    • http://freakify.com Ahmad Awais
      Author

      Nice point , buh in complete tutorials I am talking in a general way that what should you do and how should you do it.This tutorial leads to conversion of your theme HTML5 without any change in ids and classes of CSS.I would like to mention that these ids in most of the good themes are dynamically generated in link with what they use in their footer.

      In short just focus on the HTML5 elements introduced and don’t change your respective theme’s CSS (both ids and classes)

      • Khalid

        ‘buh’? And in another comment you wrote it also like ‘buhh’. What’s that?

        • http://freakify.com Ahmad Awais
          Author

          Buh. Anguished expression of distaste and dismay
          I use it as an expression in different context .
          Just like wen you think you say erm erm erm yes i got an idea !

  • Das

    Using <aside> tag for the post image is not a good idea, imo. It would be better if the <figure> tag is used.

  • http://www.sennza.com.au/ Bronson Quick

    Hey Ahmad, that’s a great article for people who are new to html5 but are familiar with WordPress! Good work.

    I would suggest a few little tweaks to your code though.

    Don’t forget to have the

    <?php wp_footer(); ?>

    in header.php. You did make reference to it later on in the article but missed it in header.php

    I’d also suggest changing:

    <?php wp_list_categories(‘title_li=’); ?>

    to

    <?php wp_nav_menu(); ?>

    Also I’d probably let the beginners know that:

    <?php the_breadcrumb(”); ?>

    isn’t a core WordPress function so I’d let the beginners know that you’re either using a plugin or you have a function in functions.php that works the breadcrumb magic :)

    • http://www.sennza.com.au/ Bronson Quick

      Argh there was a typo in that. I meant

      <?php wp_head():?> in the header.php my bad :(

      • http://freakify.com Ahmad Awais
        Author

        Look bronson , when i was writing this tutorial , the thing in my mind was to tell how to convert XHTML to HTML5 , as this article is about conversion , I am not talking about adding any new features in your wordpress.
        The functions you mentioned will already be the part of themes the end users are using , buhh i still mentioned you can use <nav> for breadcrumbs if they exist.

        Thank You for your appreciation and comment.

      • http://wp.envato.com/ Japh Thomson
        Staff

        Well spotted, Bronson, thanks for pointing that out. It’s certainly important for us to be showing the correct way to do these things in WordPress.

        I’ve fixed it up now. Thanks again! :)

  • http://www.nightocoder.com Rawaf

    It’s new tutorial for me, and I think it’s important one .. I will try it , thank you

    • http://freakify.com Ahmad Awais
      Author

      Why not !

  • http://icosmin.com Cosmin

    Why not use ‘figure’ for post images, instead of aside?

  • Pingback: Convert Your WordPress Theme to HTML5 | Shadowtek | Hosting and Design Solutions

  • http://www.graphismeo.com Graphismeo

    Hi,
    Great post!

    Is HTML5 better than XHTML for SEO or not ? Or the same… ?

    • http://freakify.com Ahmad Awais
      Author

      Obviously , your content would be readily accepted by the modern algorithms of Search Engines.You will get W3C validation, which in turn will increase your PR.

  • http://www.efdezigns.com Eric

    Thanks for the tips!

    I have a html5 theme available on github that incorporates many of the features you listed in your article and html5 boilerplate if anyone is interested. Any feedback or contributions are appreciated. https://github.com/FernE97/html5-blank-slate

    • http://freakify.com Ahmad Awais
      Author

      Nice effort Bro

    • http://www.ryandennler.com/ Ryan Dennler

      just to add also,

      There’s a couple HTML5 themes to check out to learn HTML5 concepts and Themes in general after you look through this article:

      1. HTML5 Boilerplate Theme -> https://github.com/h5bp/html5-boilerplate
      2. Bones For Genesis (HTML5 Child theme for genesis if you’re comfortable with Genesis framework) -> http://themble.com/bones/
      3. Roots – http://www.rootstheme.com

      These 3 are really good for html5 development in WordPress

      • http://www.hostelmanagement.com/ Josh

        Is Bones for Genesis HTML5? I just installed it and it looks like XHTML in the source.

  • http://www.delislejhm.com myshock

    Hello,
    Nice tut.
    Just to say there is no role=”foottext” in WAI ARIA specification.
    Would you mean role=”contentinfo”
    The role you declare is important for assistive technologies.
    Thanxs.

  • Pingback: WordPress for PlayBook App Gets Small Update to v2.0.7 | Open Knowledge

  • Pingback: HostNine Weekly Blog Round-Up Feb 20-24 | HostNine Company Blog

  • http://problogtech.com PRO BLOGGING

    Very nice i am going to try in my blog….

    • http://freakify.com Ahmad Awais
      Author

      Its good you liked it.

  • Pingback: Convertir un tema WordPress a HTML5 | Desarrollo Blogs

  • farook

    Wow, very comprehensive review. I’m thinking about learning HTML5. I’m seeing more and more job/freelance listings asking for html5 media playerknowledge and so along with reading some of the online references you listed, I’m going to have to pick up the book as well. Really appreciated the chapter breakdowns.

    • http://freakify.com Ahmad Awais
      Author

      Yes, why not ? You must try it out.

  • Pingback: Convertir un tema WordPress a HTML5 | Tecnologia, Desarrollo Web, Posicionamiento Web SEO

  • nautilus7

    Hi, so if i understand correctly you form the body of the page like this:

    This layout is WRONG according to the html5 spec. It is clearly stated that the header and footer elements are not sectioning elements and the do not introduce new sections. This means that using the section element after and before them in the above example is wrong.

    http://dev.w3.org/html5/spec/Overview.html#the-header-element

    • http://wp.envato.com/ Japh Thomson
      Staff

      Hi Nautilus7, thanks for your comment! Please try again with the code snippet, and remember to wrap it in the proper code formatting (as indicated below the comment form).

      • nautilus7

        I realized i should have used that, sorry. I mean using this code:

        a header

        main part

        a footer

        Is wrong because as mentioned in the html5 spec the header and footer elements are not sectioning elements and the do not introduce new sections. The correct page layout would be:

        a header

        main part

        a footer

        http://dev.w3.org/html5/spec/Overview.html#the-header-element

        • http://freakify.com Ahmad Awais
          Author

          You might be correct by that ref, but be a little more practical , this is just a basic intro, try using schema.org concept instead of those sections, you will see a major boost in you on page SEO.

  • http://www.tristarwebdesign.co.uk/ Paul Weston

    Thought this was a great tutorial. Even though I am new to WordPress I found this tutorial easy to follow with the instructions. I think this is a valuable tutorial and one that I will be referring to again and again when I am designing in WordPress because it gives me a great starting point and guide to how I should be coding. I look forward to more articles from yourself.

    • http://freakify.com Ahmad Awais
      Author

      I’ve been busy. Couldn’t follow up a good stream buh you will be getting more basic tutorials sooner than later.I am up to some more basic tutorials which have touch of modernity in it. Explaining all the heck state coding with simple language(For beginners).

  • Pingback: Best of WordPress in February 2012 | WP Theme Power

  • Pingback: Как конвертировать WordPress тему в HTML5 | Wordpresso

  • Alex

    Nice article,

    I’m busy creating a HTML5 theme myself at the moment, and i used the twenty eleven theme as a framework for this.

    One MAJOR difference with the twenty eleven and the given structure here is that the twenty eleven theme uses the header and footer tag for every single article that is listed. So the header and footer are used several times in a page with a post listing…

    This gets me confused on how to best use the header and footer tag….

    Any suggestions on this?

    • Alex

      Well, guess not he :)

    • http://freakify.com Ahmad Awais
      Author

      I would like you too use http://schema.org/ Mark-up.The explanation there is great.Secondly , I stick to the point of using different sections in header and footer with different attributes in them.This is the way I’ve been using since an year and I must say my clients are satisfied.My own blogs with HTML5 have got Page Rank and On-Page SEO.Sometimes , testing and experimenting with things lead you to a better approach then the standard one.

  • http://panghaidar.wordpress.com/ panghaidar

    please provide us full theme from this tutorial :(

    • http://freakify.com Ahmad Awais
      Author

      More in a sense ? You want me to make a complete theme with telling the story of code?
      It can be done!

      • http://www.facebook.com/mittul.chauhan Mittul Chauhan

        hehehe .. some people never become a programmer :)

  • Alex

    Well just another response from me.

    The way this article is indicating on how to use the header and footer tag maybe could be wrong, but i’m still looking for a good answer to that.

    The header and footer tag are not always used as main page layout tags, but as headers and footers for different types of sections. Meaning header and footer tags are used more than just once in a proper HTML5 coded page.

    For example, as i’ve been saying earlier, look at the article section of the twenty eleven theme:


    content goes here
    meta data etc

    Now this is proper use of HTML5 in WordPress.

    Now there are many sites which do use the header and footer tags for the main layout, so i’m guessing it’s free for everyone how to use it?

    ps: why is there no ‘mail me if there’s a response’ checkmark over here?

    • Alex

      I did use the pre codes but not working or something?

      try again, otherwise never mind:

      HTML:


      content goes here
      meta data etc

      • http://freakify.com Ahmad Awais
        Author

        Look split up your loop and make it two way posted.Follow two different layouts.
        1.Do it like I did.
        2.The way that satisfies you.
        Try some static caching of those articles.Write 4 nice articles dividing 2 articles in the above Semantics.Then watch the indexing of those articles.Which one of them getting better indexed (SERP).
        Let me know the details, afterwards.If you get some good results tell me otherwise I thinks my experiment is good enough to stand high.

    • http://freakify.com Ahmad Awais
      Author

      ps: why is there no ‘mail me if there’s a response’ checkmark over here?

      Same here ! I never know when these comments came?
      @Japh look into this matter.

      • http://wp.envato.com/ Japh Thomson
        Staff

        Hey Ahmad, this is a much-requested feature, and we’re looking into it :) It will make life easier for everyone once it’s in place.

        • http://freakify.com Ahmad Awais
          Author

          Thanks for understanding Japh.

  • http://www.digitalseed.info/ DG

    I’m still do not understand about the reason why we should change into HTML5? All I known is, if we want to create your own WordPress theme, we should consider two important points that is search engine optimization (SEO) and browser compability.

    What’s your opinion, any comments will be appreciate.

    Cheers and keep good works~!

    • http://freakify.com Ahmad Awais
      Author

      I would say Google loves HTML5 & CSS3 clean code.You may get good Page Rank through conversion.Better page load and certain other factors.

    • http://twitter.com/glitchtankweb Rob Iacobelli

      Great article Ahmad! For people struggling with the raison-d’être of HTML5…
      HTML5 is definitely a weird concept when your new to HTML, so I’ll try to clarify. HTML4/XHTML functions the same way as HTML5 to a degree but its just sloppier and less mature. It’s gonna be hard to compare unless you have a firm understanding of the old HTML/XHTML so you kinda have to take our word for it but here’s a few reasons.
      1. Semantics – Helps maintain structured and meaningful content which is the bare bones of web design and makes other concepts much easier to integrate (than 10,000 divs) when developing.
      2. SEO/indexing – keeps each element in more intelligent and intentional context. Good for you, good for anyone who might ever work on your markup, and good for indexing systems ala Google (SEO)…Google can tell a from a not a for any other
      3. Future-proof – HTML5 and CSS3 are said to be future-proof for a good while so you dont need to worry about new browsers screwing up your work for a while.
      4. You gain valuable geek points & the web gets easier – by picking through a full WP theme and actually applying context to each node, you will quickly have a much better grasp on the ‘big picture’ and the web is that much closer to being your bitch ;)
      Jumping in the web dev pool is a bit of an uphill battle right now. Responsive is becoming standard and your content drives your projects and having a deep understanding of HTML5 theory and semantics will make your life much easier!

    • silence

      Wonderful goods from you, man. Css Fixed Layout | I’ve understand your stuff pveuiors to and you’re just extremely wonderful. I actually like what you’ve acquired here, really like what you’re stating and the way in which you say it. You make it enjoyable and you still take care of to keep it sensible. I cant wait to read far more from you. This is actually a tremendous Css Fixed Layout | informations.

  • Greg

    Are there any good beginner books out there on HTML5 and WP?
    Thanks,
    Greg

  • http://techarta.com nikhil

    wonderful! It migt be a time consuming process, But i will try it out.!

  • James

    As far as I can tell the element has been used incorrectly here. The section element is a semantic element but in this example seems to be using largely as a div replacement which is not the intention. Unless it has a ‘title’ which can hold together the semantic data i shouldn’t be used.

  • Pingback: The future of theme development - themesforge.com - WordPress Themes, Tutorials, News, Tips and More

  • Pingback: 30 Must-See HTML5 Tutorials to Help You Impress Your Audience | Developer Junk

  • Pingback: 30 Must-See HTML5 Tutorials to Help You Impress Your Audience | Mo Ghaoui, Personal Blog

  • Pingback: 30 Must-See HTML5 Tutorials to Help You Impress Your Audience | Passively Designing Life

  • Pingback: 30 Must-See HTML5 Tutorials to Help You Impress Your Audience | Web Dezining

  • Pingback: 30 Tutoriais HTML5 para ajudar você a impressionar o seu público | Site para Empresas – Blog sobre Internet e Criação de Site

  • http://hiduptreda.com Atreda Wicaksi

    Nice article man..
    I prefer use tag inside to change tag ..
    What do you think?? Is it okay??

  • http://www.webhostcart.com Jefrey

    I would as an app to convert my wp to html, don’t really see the difference with html 4 or 5

  • Pingback: WordPress主题HTML5化柠檬树 | 柠檬树

  • Pingback: WordPress HTML5 布局制作 | 耕耘网络

  • Pingback: Roundup: 50 Top Notch HTML 5 Tutorials | Design Superstars

  • Pingback: 30 Useful HTML5 Tutorials — Dzine Watch

  • Pingback: 30 Must-See HTML5 учебники, чтобы помочь вам впечатлить аудиторию | Allbloggg.ru - блог о всем. Только свежие новости со всего мира всех тем. Веб-дизайн, ди

  • nociouz

    thank you

  • slobjones

    Fine tutorial, Ahmad. Now, what about comments.php? Can you provide markup for that template as well?

    Thanks.

  • website to wordpress

    You could always have http://web2wordpress.com do it…

  • Shubham

    Very good tutorial sir, I have also started blogging recently. My blog also have wordpress installed. One thing I didn’t understood that whats the use of converting XHTML to HTML5? Does it help in boost SEO of blog?

  • Pingback: 33 个最好的HTML5指南 | HTML5 CSS3 JavaScript

  • http://twitter.com/GardenWow backyardgardener

    I’m in the market of converting 65K pages from old HTML (maybe html 2) to HTML 5. I was considering moving to WP, but now I’m reading I should consider HTML5. WHo or what should I read to support me in converting HTML2 to HTML5?

  • lozandier

    What about the image captions and making them HTML compatible via figures and figcaptions? That’s my main pet peeve with WP; same with the attachments and video…