New semantic elements like <header>, <footer>, <article>, and <section>.
New attributes of form elements like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
In the next chapter, HTML5 Support, you will learn how to “teach” older browsers to handle “unknown” (new) HTML elements.
New HTML5 API’s (Application Programming Interfaces)
The most interesting new API’s in HTML5 are:
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
Tip: HTML Local storage is a powerful replacement for cookies.
Removed Elements in HTML5
The following HTML4 elements have been removed in HTML5:
CSS, <s>, or <del>
In the chapter HTML5 Migration, you will learn how to easily migrate from HTML4 to HTML5.
Since the early days of the World Wide Web, there have been many versions of HTML:
Tim Berners-Lee invented www
Tim Berners-Lee invented HTML
Dave Raggett drafted HTML+
HTML Working Group defined HTML 2.0
W3C Recommendation: HTML 3.2
W3C Recommendation: HTML 4.01
W3C Recommendation: XHTML 1.0
WHATWG HTML5 First Public Draft
WHATWG HTML5 Living Standard
W3C Recommendation: HTML5
W3C Candidate Recommendation: HTML 5.1
From 1991 to 1999, HTML developed from version 1 to version 4.
In year 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0. The XHTML syntax was strict, and the developers were forced to write valid and “well-formed” code.
In 2004, W3C’s decided to close down the development of HTML, in favor of XHTML.
In 2004, WHATWG (Web Hypertext Application Technology Working Group) was formed. The WHATWG wanted to develop HTML, consistent with how the web was used, while being backward compatible with older versions of HTML.
In 2004 – 2006, the WHATWG gained support by the major browser vendors.
In 2006, W3C announced that they would support WHATWG.
In 2008, the first HTML5 public draft was released.
In 2012, WHATWG and W3C decided on a separation:
WHATWG wanted to develop HTML as a “Living Standard”. A living standard is always updated and improved. New features can be added, but old functionality cannot be removed.
The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
The formtarget attribute overrides the target attribute of the <form> element.
The formtarget attribute can be used with type="submit" and type="image".
<form action="/action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit as normal"> <input type="submit" formtarget="_blank" value="Submit to a new window/tab"> </form>
This is how the HTML code above will be displayed in a browser:
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form action="/action_page.php"> <input type="checkbox" name="vehicle1" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle2" value="Car">I have a car <br><br> <input type="submit"> </form>
You can also use the min and max attributes to add restrictions to dates:
<form action="/action_page.php"> Enter a date before 1980-01-01:<br> <input type="date" name="bday" max="1979-12-31"><br><br> Enter a date after 2000-01-01:<br> <input type="date" name="bday" min="2000-01-02"><br><br> <input type="submit"> </form>
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:
XHTML stands for EXtensible HyperText Markup Language
XHTML is almost identical to HTML
XHTML is stricter than HTML
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers
Many pages on the internet contain “bad” HTML.
This HTML code works fine in most browsers (even if it does not follow the HTML rules):
<html> <head> <title>This is bad HTML</title>
<body> <h1>Bad HTML <p>This is a paragraph </body>
Today’s market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret “bad” markup.
XML is a markup language where documents must be marked up correctly (be “well-formed”).
If you want to study XML, please read our XML tutorial.
XHTML was developed by combining the strengths of HTML and XML.
XHTML is HTML redesigned as XML.
The Most Important Differences from HTML:
XHTML DOCTYPE is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
<!DOCTYPE ….> Is Mandatory
An XHTML document must have an XHTML DOCTYPE declaration.
A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.
The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.
This example shows an XHTML document with a minimum of required tags:
<!DOCTYPE html PUBLIC "-//horjeC//DTD XHTML 1.0 Transitional//EN" "http://www.horje.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head> <title>Title of document</title> </head>
<body> some content </body>
XHTML Elements Must Be Properly Nested
In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>
XHTML Elements Must Always Be Closed
This is wrong:
<p>This is a paragraph <p>This is another paragraph
This is correct:
<p>This is a paragraph</p> <p>This is another paragraph</p>
Empty Elements Must Also Be Closed
This is wrong:
A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face">
This is correct:
A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" />
To display an HTML page correctly, a web browser must know which character set (character encoding) to use.
What is Character Encoding?
ASCII was the first character encoding standard (also called character set). ASCII defined 128 different alphanumeric characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + – ( ) @ < > .
ANSI (Windows-1252) was the original Windows character set, with support for 256 different character codes.
ISO-8859-1 was the default character set for HTML 4. This character set also supported 256 different character codes.
Because ANSI and ISO-8859-1 were so limited, HTML 4 also supported UTF-8.
UTF-8 (Unicode) covers almost all of the characters and symbols in the world.
The default character encoding for HTML5 is UTF-8.
The HTML charset Attribute
To display an HTML page correctly, a web browser must know the character set used in the page.