Updating From xHTML To HTML 5
If you haven’t already, now is a great time to update your website code to HTML 5 web standards. Here are a handful of things you can do to really get the ball rolling.
Document Type
xHTML 1.0 supported three different doctype declarations (Transitional, Strict, and Frameset) with xHTML 1.1 using a declaration of it’s own.
xHTML 1.0 Transitional – OLD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Supported all HTML elements and attributes whether they were deprecated or not. It was the most common among xHTML web standards because it was easy to adhere to.
xHTML 1.0 Strict – OLD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Didn’t support deprecated HTML elements/attributes and encouraged using CSS to manipulate elements rather than old HTML attributes. It was strict, after all, and therefore more difficult to comply with.
xHTML 1.0 Frameset – OLD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
This worked just like xHTML 1.0 Transitional, but was intended for the Frameset element, which is now deprecated. A framed webpage is basically multiple webpages put together into one, but each frame has its own independent scroll-bars. Don’t confuse frames with iframes, with the latter being an accepted element.
xHTML 1.1 – OLD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
This web standard is exactly like xHTML 1.0 Strict, but it additionally supports Ruby for using East-asian languages. Ruby annotations themselves are used to show pronunciation of such languages.
HTML 5 – NEW
<!DOCTYPE html>
The only declaration for HTML 5, and it’s short and sweet. It is the web standard of today. It’s also acceptable to be fully lowercase if you so choose. (All other HTML elements/attributes should be lowercase.) Don’t forget: the doctype declaration must be above the <head> element.
Self-closing tags
Some elements, such as image and meta, only had an opening tag because other elements weren’t nested within them. <img src="picture.png" /> Most other elements, including anchor and paragraph, required an opening and a closing tag because content was nested within the element.
<a href="https://google.com">Go to Google</a> In order to properly close a single-tag element, you needed to make it self-closing by adding the additional space and slash characters at the end.
With HTML 5, single-tag elements aren’t self-closing. Omit that additional space and slash.
xHTML – OLD
<img src="picture.png" />
A self-closing, single-tag element…
HTML 5 – NEW
<img src="picture.png">
…is no longer self-closing. Don’t forget that the alt="Lorem ipsum" attribute is a required attribute for images as it provides alternate text to special screen readers used by those with disabilities.
The list of single-tag elements are:
| area | base | br | col | embed |
| hr | img | input | keygen | link |
| meta | param | source | track | wbr |
Language & Character Set
Right near the top, before you post any content that is displayed to the reader (including the <title> tag), you’re supposed to 1.) Define the written language read by the reader (also helps language translation tools), and 2.) Define the Character Set so the letters and symbols (aka. characters) input by you are properly output to the reader by their web browser. Just like the doctype, both of these got simplified in HTML 5.
xHTML Language – OLD
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
HTML 5 Language – NEW
<html lang="en">
To find your two-letter ISO 639-1 language code, look here: HTML ISO Language Code Reference
xHTML Character Set – OLD
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">HTML 5 Character Set – NEW
<meta charset="utf-8">
There are a number of character sets available depending on which language you use. Although UTF-8 is recommended, you can use an alternate, such as those of the International Standards Organization: HTML Character Sets. Read the Default MIME Types section below to find out why the content-style-type line is obsolete in HTML 5.
Default MIME Types
Internet Media types (aka. MIME types) were requirements when referencing linked resources, such as JavaScript files and CSS attributes, but no more. Thanks to their popularity, <script> elements now default to using the text/javascript MIME type, while <style> defaults to using text/css. That’s why specifying the content-style-type (mentioned above) is redundant in HTML 5. More information on MIME types can be found here and here.
xHTML Script – OLD
<script type="text/javascript">Lorem ipsum</script>
HTML 5 Script – NEW
<script>Lorem ipsum</script>
xHTML Style – OLD
<style type="text/css">Lorem ipsum</style>
HTML 5 Style – NEW
<style>Lorem ipsum</style>
Keep in mind that the <link> element references a number of materials, including but not limited to external CSS documents, favorites icon (aka. favicon.ico), and XML documents. With that said, this element doesn’t have a default MIME type, so one should still be specified for the referenced material.
Attribute Minimization
Some attributes in xHTML reference very specific functions, but xHTML didn’t support attribute minimization. As a result, you had attributes that are set to values with the same name. In HTML 5, just plainly add the attribute without setting a value, not even a blank one.
xHTML Specified Values – OLD
<input checked="checked" />
HTML 5 Minimized Attributes – NEW
<input checked>
Here is an exhaustive list of minimized attributes. If I’ve missed one, please leave a comment and let me know.
| Element | Attribute |
|---|---|
| audio | autoplay controls loop muted |
| button | autofocus disabled formnovalidate |
| command | checked disabled |
| details | open |
| dialog | open |
| fieldset | disabled |
| form | novalidate |
| iframe | seamless |
| img | ismap |
| input | autofocus checked disabled formnovalidate multiple readonly required |
| keygen | autofocus challenge disabled |
| object | declare |
| ol | reversed |
| optgroup | disabled |
| option | disabled selected |
| script | async defer |
| select | autofocus disabled multiple required |
| style | scoped |
| textarea | autofocus disabled readonly required |
| track | default |
| video | autoplay controls loop muted |
Many of these attributes, minimized or otherwise, are completely new to HTML 5 and don’t work with older browsers. Scoped, for example, unfortunately doesn’t work in Firefox 3.6.
TOCUnsupported Elements
Some elements were removed completely in HTML 5 and might not function properly in future web browser versions. You can often get the same effect from an alternate element or CSS as I suggest below.
| Element | Use Instead |
|---|---|
| applet | <object> |
| basefont | CSS |
| big | CSS |
| center | CSS |
| dir | CSS |
| font | CSS |
| frame | just don’t, or use iframe |
| frameset | just don’t; it’s a parent of <frame> |
| noframes | won’t need if you don’t use <frame> |
| strike | <del> |
| tt | CSS |
This article is intended to be a quick reference guide, but it doesn’t include everything for converting xHTML to HTML 5. There are a handful of other changes including many new semantic and media elements, plus a large number of deprecated element attributes – often in favor of CSS styling or because they didn’t catch on. A second guide is likely to follow. In the mean time, updating your websites and templates/themes with the above adjustments is definitely a positive step forward to futurizing them while HTML 5 gets finalized next year.
FeaturedImg courtesy of w3schools.com
Recent Comments