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 you 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.
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 HTML5 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.