Updating From xHTML To HTML 5

By .     What do you think of this article?

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.

TOC

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="http://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:

areabasebrcolembed
hrimginputkeygenlink
metaparamsourcetrackwbr
TOC

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

  1. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  2. <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.

TOC

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.

TOC

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.

ElementAttribute
audioautoplay
controls
loop
muted
buttonautofocus
disabled
formnovalidate
commandchecked
disabled
detailsopen
dialogopen
fieldsetdisabled
formnovalidate
iframeseamless
imgismap
inputautofocus
checked
disabled
formnovalidate
multiple
readonly
required
keygenautofocus
challenge
disabled
objectdeclare
olreversed
optgroupdisabled
optiondisabled
selected
scriptasync
defer
selectautofocus
disabled
multiple
required
stylescoped
textareaautofocus
disabled
readonly
required
trackdefault
videoautoplay
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.

TOC

Unsupported 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.

ElementUse Instead
applet<object>
basefontCSS
bigCSS
centerCSS
dirCSS
fontCSS
framejust don’t, or use iframe
framesetjust don’t; it’s a parent of <frame>
noframeswon’t need if you don’t use <frame>
strike<del>
ttCSS
TOC

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

Posted in: Web Development



is the site owner of Computer Tech Tips and is passionate about computer technology, particularly Windows-based software, malware removal, and web development. He enjoys helping people troubleshoot computer problems and providing technical support to family, friends, and people around the net. Xps wrote 79 article(s) for Computer Tech Tips.


 Subscribe to comments: this article | all articles
Comments are automatically closed to prevent SPAM.