Bitesize HTML5 – Convert any hypertext to HTML5
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.
Bitesize HTML5 – Zip-a-Dee-Doo-Dah – File Transfer!
Bitesize HTML5 – The W3C Validator
Bitesize HTML5 – Self-closing Elements
Bitesize HTML5 – Attributes and Tags
Bitesize HTML5 – Attribute Quote Syntax
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.