Bitesize HTML5 – Convert any hypertext to HTML5

with No Comments

Ed. I decided it would be easier to switch to PHP before switching to HTML5. Therefore Please follow the following pages before doing this…

Bitesize HTML5 – Switch from HTML to PHP Coding

If you have been following along so far, your files are in error free XHTML. Now we are going to convert that to HTML5.  If you are not sure how we got to this point you should recap and study the following short articles again.

XHTML Without Errors

The above instruction have brought you to the point you are at when you are ready to read this.  All your XHTML pages validate without warnings and without errors.

Warning

Do NOT proceed unless and until all of your pages can pass the W3D validation in XHTML, Without Errors.

Switch to PHP

Ed. I decided it would be easier to switch to PHP before switching to HTML5. Therefore Please follow the following pages before doing this…

Bitesize HTML5 – Switch from HTML to PHP Coding

Bitesize HTML5 – Building a Website Folder Format – Layout

Bitesize .htaccess – Option Index

Bitesize HTML5 – Include Footer

Bitesize HTML – Include Header

Convert to HTML5

The top of your XHTML page should look something like this…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>My page title goes here.</title>

If you count the lines (tags) you will count five. Actually there are four elements, because the !DOCTYPE tag is NOT an HTML tag at all! Because it is not an HTML5 Element, it is not in lowercase!

Anyway, we will keep the title line, delete the rest and replace it with this – every time!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My page title goes here.</title>

That’s it, your XHTML code is now HTML5 and ready to run through the W3C Validator again!

Beyond the Change to HTML5

Now you are ready to add the new HTML5 semantic elements like…

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
  • Likewise, to make your website responsive to mobile devices.
  • And to use the <h1> to <h6> tags properly for outlining and the HTML5 Headings Map.

Leave a Reply