HTML5 is the new version of HTML, which is a huge update over the former HTML standard 4.01, which came in 1999. HTML5 has many modern features, such as a Canvas, Video, Audio, Drag/Drop and use of SVG Vector graphics. It expands the use of Semantic elements, replacing non-semantic elements like <div> or <span> with meaningful semantic elements like <article>, <aside> or <img>.
Create two new folders in your Child Theme if they do not already exist – ‘css’ and ‘js’. Create an empty text file named ‘stylesheet.css’ and place it into the css folder. Create and empty text file called ‘example.js’ and place it into the js folder. Use all lowercase for names! These will be where our code resides.
Open the example.js file and paste only the code between the <script> tags from the text example. Don’t copy the tags themselves, they are not needed in a .js file!
Create a new text file called functions.php in your WordPress Child Theme folder if it does not already exist. This PHP file is where custom functions can reside in a Child Theme. We are going to use it to insert our HTML5 Code and we will use it to properly load jQuery using the wp_enqueue_script function of WordPress. We will also use wp_enqueue_style to load the associated CSS stylesheet safely.
Write this code in your functions.php file:
NOTE: The code above differs in a very IMPORTANT way from the example on WordPress codex, I have specified ‘get_stylesheet_directory’ because it works on both childthemes and regular themes.
You just created a function for use by WordPress. To call the function, you will use what is called a Shortcode in WordPress. This function will only load if you put the shortcode in a Post or a Page. The shortcode for the function we just made is [yourname_canvas], type that using the Text editor in a Page or Post on your site. Once it is working, go let’s add some GoogleFonts the same way!
Got to Google fonts and grab a font of your choosing. I’ve picked Raleway and Lobster below. Copy this code, substituting your font for mine. Click on the image to enlarge.
If you’d like to make a parallax background that is all the HTML5 rage, go here to get it started without having to code (initially). To get it working usefully (as in using pages and images from your WordPress database), you’ll need to understand everything we did above, the concepts in the PHP Intro, HTML5 Part 2, and the concepts covered in the WordPress Customization page.