How to use HTML5 semantic markup in a WordPress theme

In other words, where relevant, whenever you call for <?php comment_form(); ?> or for <?php get_search_form(); ?> or output your list of comments, WordPress will mark those up in semantic HTML5 code.

The best example to illustrate this is the comment form. A signed-out user will see all the required and optional fields presented for commenting on a post. i.e. name, email, website and comment fields. If you view source, those fields would look something like this:

<input id="author" name="author" type="text" value="" size="30" aria-required='true' />
<input id="email" name="email" type="text" value="" size="30" aria-required='true' />
<input id="url" name="url" type="text" value="" size="30" />
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>

That’s 3 text fields and 1 textarea. With HTML5 theme feature enabled, the various textfields are treated differently to handle their various purposes. So the email field is not simply a text field but a genuine “email” field. Ditto the website field which is now—with HTML5—a “url” field.

This theme feature must be activated before WordPress can use it otherwise, by default, WordPress outputs the pre-HTML5 markup.

Add theme support

As with other such theme features you simply need to declare that your theme supports it. Like so:

add_theme_support( 'html5' );

If you only want to apply HTML5 markup to the comment form, then you must pass that in the array or arguments. Like so:

add_theme_support( 'html5', array(
  'comment-form',
));

While before HTML5 you would have had 3 text fields and 1 textarea, now you have this:

<input id="author" name="author" type="text" value="" size="30" aria-required='true' />
<input id="email" name="email" type="email" value="" size="30" aria-required='true' />
<input id="url" name="url" type="url" value="" size="30" />
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>

Notice that the input types are all different: text, email, url and textarea.

If you wanted to have the search form and the comment list also output in HTML5 semantic markup, then you’d just pass them into the array like so:

add_theme_support( 'html5', array(
  'search-form', 'comment-form', 'comment-list',
));

As of this writing, those are the only three that are explicitly targeted for HTML5 markup.

What’s the point, anyway?

Well, for one, while you still have to do more to validate the data received from any form on your site, modern browsers now do a bit of validating for you. i.e. the email field will at minimum expect to see a @ and the url field will also require a value that resembles an actual URL.

You should certainly do a lot more than this to validate your forms but in the interest of keeping you up to date, the HTML5 markup is the way of the future. Just be aware.