How to Make Sure Your WordPress Template is HTML5 Ready

Post written by Cindy Parker
On Wednesday, February 22nd, 2017

If you aren’t a developer or a designer, you might feel intimidated by your WordPress template – especially if you want a HTML5 ready template, and you have no idea what you’re looking at. There are a few easy ways to tell whether or not a template you’ve chosen is HTML5 ready. All you need to know is what to look for, and the rest becomes easier.

View the Source Code, Review the Tags

The tags in an HTML5 template are slightly different from the tags in older style templates. HTML5 will use the <header> (not <head>!) tag. This is where the main graphic for a logo or blog title will go, and perhaps a search function if you’ve chosen to include one. HTML5 also provides for a <navigation> tag that be either used inside or outside the <header> tag which will tell the search engine that it’s inner contents contain site navigation links.

Two other crucial elements of HTML5 are the <section> and <article> tags. HTML5 allows more elements to be incorporated into functioning sections, which are important for your WordPress theme. They keep everything organized and contained much better than previous versions of HTML, as they’re dedicated specifically to certain elements of your design.

An <article> tag is used to help something contain itself, which is important for a blog post or, as you probably figured out on your own, an article. The <section> tag expands your ability to compartmentalize areas within the <article> to optimize its readability.

If you find these tags being using in your source code then congratulations, your WordPress theme is HTML ready! If not, well it might not be that hard to get them added in.

Getting the tags inside

If you don’t have any experience in customizing templates and you can’t find one you like just the way it is, it may be more an efficient use of your time and resources to let a pro handle the final points of executing your vision. But if you aren’t afraid to open the hood and do the work yourself, create a child theme of your current theme and copy over and edit your theme’s template files like header.php, single.php, archive.php, footer.php and add in the HTML5 semantical tags manually.  We create a child theme in order to preserve your original theme’s code and prevent theme updates from overwriting your own changes.  If you feel confident in your ability to manage those modifications yourself, you’ll find that it’s not an exhausting amount of work.

Are there any HTML5 ready free WordPress themes?

If you’re looking for an HTML5 ready WordPress theme to build your website on top of then take a look at the HTML5 WordPress Boilerplate Theme. It’s free, has some nice features, and has codebase managed on GitHub with over 30 contributors.

 

From WPBeginner.com‘s article “How to create a WordPress Child Theme

About the Author:
Cindy Parker is the professional writer and Content Specialist. She loves to write about small businesses, education and languages. Currently, she works for Learn to Trade - a currency trading education company based in Australia.

Continue Reading

Signup and get started with Inbound Now

Sign Up for Free

Download

[gravityform id="3" name="Popup Form" title="false" description="false" ajax="true"]