<< Chapter < Page
  Test collection   Page 1 / 1
Chapter >> Page >
HTML5 is the fifth revision of the HTML standard. It provides various enhancements and is still work in progress. This module provides links to information about HTML5 which lead you into the topic in-depth.

Introduction

The structure of a HTML5 document may be simpler than that of a HTML4 document. There is only one document type <!DOCTYPE html> . Older browsers interpret this fine as they do not know about the HTML5 document type and try to do the best they can to render the page. Newer browsers know how to interpret HTML5.

The Web Hypertext Application Technology Working Group (WHATWG) does not speak of HTML5. They call it just HTML without a version number.

Minimal document

<!DOCTYPE html><html><head><title>The title of the document</title></head><body>The text ...</body></html>
Simple correct HTML5 template (http://www.w3.org/TR/html5/semantics.html#semantics)
<?xml version="1.0" encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml"><head><title>The title of the document</title></head><body>The text ...</body></html>
The same as above but in XHTML syntax

Html5 with css and javascript

In the strict sense HTML5 is the follow-up specification to HTML4. But people often mean more when they talk about HTML5. HTML5 used as umbrella term includes extended functions of CSS (CSS3) and JavaScript (ECMAscript version 5). With this it is possible to write complete web applications in one file.

Minimal template with css and javascript

<?xml version="1.0" encoding="UTF-8"?><html xml:lang="en" lang="en"><head><style><![CDATA[ h1 {color: red;} ]]></style></head><body><h1>Beverages</h1><ul id="beverages"><li>Coffee</li><li>Tea</li><li>Milk</li></ul><span id="note"></span><script><![CDATA[ // JavaScript statements// This will be evaluated after the document has been loaded // making it possible to easily access DOM elements.var list = document.getElementById("beverages"); var listlength = list.children.length;console.log(listlength); var note = document.getElementById("note");console.dir(note); note.textContent = listlength + " types of beverages";]]></script></body></html>
Template in XHTML5 syntax demonstrating access to a DOM element

View the xhtml5 template locally

View the template in your browser. You then may save it and start changing it. Make sure it has the file extension .xhtml for IE9 to display a local file in IE9 mode. In addition Firefox and Opera still display it properly if the file name extension is .xml .

    Comments

  • The document starts with a declaration that it is encoded as an XML file.
  • The root element is an <html>...</html> node. It has two daughter nodes: <head>...</head> and <body>...</body> .
  • The head contains the style information. It is contained in <style type="text/css">...</style> .
  • The actual data to be displayed is in the body part.
  • The CDATA tells the XML parser to treat the following code as data. This means that wedges ( <> ) should not be considered
  • The JavaScript code shows the method getElementById to access the Document Object Model (DOM). All HTML elements are accessible this way.
  • The JavaScript code is executed once at the end of loading the file.
  • The children method gives back all HTML elements of a particular parent HTML Element.
  • console.log(listlength) and console.dir(note) may be used for debugging purposes. The output will be displayed on the console accessible for example in Firefox 9 through 'Tools'/'Web Developer'/'Web Console'. Other browsers have similar tools.
  • This example contains all the CSS and JavaScript code. Most often this code is put into two separate files. Then two links in the main HTML file connect to them.

Display in firefox 9 with web console opened

Web console with minimal sample XHTML5 file

Msdn about ie9

MSDN : "Adding a <!DOCTYPE> pointing to an XHTML DTD does NOT influence whether a page is treated as HTML or XHTML. XHTML support for files on the web can only be triggered by the MIME type of the response from the web server. This is true both in IE9 and other browsers. This MIME type should be "application/xhtml+xml" (though you can technically use any supported XML mime type). Local files with ".xht" or ".xhtml" extensions will also be opened as XHTML".

More on dom access

Document Object Model

Further reading

Html5 in action

First chapter of Robert Crowther, Joe Lennon, and Ash Blue, HTML5 in Action, Manning, February 2014. Chapter 5 ; source code on github .

Comparison to other technologies

2011 - The Year HTML5 Won

Dive into html 5

on-line book by Mark Pilgrim; CC-BY-3.0 ; updated fork ; published on paper by O’Reilly.

Extended version of the template

Module anonymous functions has an example where a button is added to the XHTML template given in this module.

Xhtml5 editor

There are many editors for creating XHTML5 files. Netbeans for example may be used for this .

On-line editor

Mozilla thimble is an on-line editor for learning HTML5.

Html5 please

A web site with recommendations which HTML5 features are ready for use and under which conditions.

Html5 test

This web site has a browser feature detection test as well as references to the W3C standard for every feature.

Further reading specific topics

Local storage

HTML5 capable browsers have added a new local storage facility which allows to save data between subsequent visits of a web page. This feature is similar to cookies but with more storage capacity and it is better accessible.

How to write a game

A tutorial which shows (External Link)

Presentation

(External Link) (written in HTML 5)

Specifications

(External Link) and (External Link)

Microsoft internet explorer 9

Microsoft Internet Explorer 9 was released in March 2011. It adopted HTML5 to a large part, something other browser implementations had done before. Learn HTML5 (Internet Explorer Developer Center). IE9 Developer Tools . More about IE9 and XHTML .

Differences from html4

(External Link)

Mozilla developer network

HTML5 start page

Ibm developerworks

HTML 5 fundamentals

Modernizr

(External Link) . Modernizr is a JavaScript library which helps to detect if a HTML5 feature is supported in a web browser or not.

How well does a browser support html5?

(External Link)

Questions & Answers

where we get a research paper on Nano chemistry....?
Maira Reply
what are the products of Nano chemistry?
Maira Reply
There are lots of products of nano chemistry... Like nano coatings.....carbon fiber.. And lots of others..
learn
Even nanotechnology is pretty much all about chemistry... Its the chemistry on quantum or atomic level
learn
Google
da
no nanotechnology is also a part of physics and maths it requires angle formulas and some pressure regarding concepts
Bhagvanji
Preparation and Applications of Nanomaterial for Drug Delivery
Hafiz Reply
revolt
da
Application of nanotechnology in medicine
what is variations in raman spectra for nanomaterials
Jyoti Reply
I only see partial conversation and what's the question here!
Crow Reply
what about nanotechnology for water purification
RAW Reply
please someone correct me if I'm wrong but I think one can use nanoparticles, specially silver nanoparticles for water treatment.
Damian
yes that's correct
Professor
I think
Professor
Nasa has use it in the 60's, copper as water purification in the moon travel.
Alexandre
nanocopper obvius
Alexandre
what is the stm
Brian Reply
is there industrial application of fullrenes. What is the method to prepare fullrene on large scale.?
Rafiq
industrial application...? mmm I think on the medical side as drug carrier, but you should go deeper on your research, I may be wrong
Damian
How we are making nano material?
LITNING Reply
what is a peer
LITNING Reply
What is meant by 'nano scale'?
LITNING Reply
What is STMs full form?
LITNING
scanning tunneling microscope
Sahil
how nano science is used for hydrophobicity
Santosh
Do u think that Graphene and Fullrene fiber can be used to make Air Plane body structure the lightest and strongest. Rafiq
Rafiq
what is differents between GO and RGO?
Mahi
what is simplest way to understand the applications of nano robots used to detect the cancer affected cell of human body.? How this robot is carried to required site of body cell.? what will be the carrier material and how can be detected that correct delivery of drug is done Rafiq
Rafiq
if virus is killing to make ARTIFICIAL DNA OF GRAPHENE FOR KILLED THE VIRUS .THIS IS OUR ASSUMPTION
Anam
analytical skills graphene is prepared to kill any type viruses .
Anam
Any one who tell me about Preparation and application of Nanomaterial for drug Delivery
Hafiz
what is Nano technology ?
Bob Reply
write examples of Nano molecule?
Bob
The nanotechnology is as new science, to scale nanometric
brayan
nanotechnology is the study, desing, synthesis, manipulation and application of materials and functional systems through control of matter at nanoscale
Damian
Is there any normative that regulates the use of silver nanoparticles?
Damian Reply
what king of growth are you checking .?
Renato
What fields keep nano created devices from performing or assimulating ? Magnetic fields ? Are do they assimilate ?
Stoney Reply
why we need to study biomolecules, molecular biology in nanotechnology?
Adin Reply
?
Kyle
yes I'm doing my masters in nanotechnology, we are being studying all these domains as well..
Adin
why?
Adin
what school?
Kyle
biomolecules are e building blocks of every organics and inorganic materials.
Joe
how did you get the value of 2000N.What calculations are needed to arrive at it
Smarajit Reply
Privacy Information Security Software Version 1.1a
Good
Got questions? Join the online conversation and get instant answers!
Jobilize.com Reply

Get the best Algebra and trigonometry course in your pocket!





Source:  OpenStax, Test collection. OpenStax CNX. Jul 20, 2012 Download for free at https://legacy.cnx.org/content/col11420/1.2
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Test collection' conversation and receive update notifications?

Ask