OVERVIEW OF HTML 5

Khuloud N. Al­Odan

ABSTRACT
HTML 5 addresses the needs of Web Applications, an area previously not adequately covered by HTML. Also  
it attempts to solve problems found in previous versions of HTML with a wide range of new features including  
form controls, APIs, multimedia, structure and semantics. 
In   this   paper   I   will   talk   about   HTML   5   concepts,   the   difference   between   it   and   the   older   versions.   Also  
introduce some new features that will help Web developer and authors. 

Keywords
HTML, API, XML, DOM, W3C.

1.INTRODUCTION
Hyper text markup language as known as HTML was introduced in early of 1990. The most known version of 
it was HTML 4 which has been around for a decade now. But the main area that has not been addressed yet 
is   Web   Application.   To   give   authors   more   flexibility   and   enable   more   interactive   websites,   HTML   5   was 
introduced [2].
The work on HTML 5 was started in late 2003 as a proof of concept to show how to support and enhance the  
areas that are not covered by HTML 4, Also to provide new features.
In 2006, W3C (World Wide Web Consortium) and WHATWG (Web Hypertext Application Technology Working 
Group) joined their forces on development of the HTML 5. And since that time the work is still in the process 
and HTML 5 is not yet final.

2.OVERVIEW OF HTML 5
HTML   5   is   about   moving   HTML   away   from   document   markup,   and   turning   it   into   a   language   for   web 
applications [5].

3.FEATURES PRESENTED IN HTML 5

3.1New Elements [4]
New elements are introduced in HTML 5, like:  

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies 
are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy 
otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission.
The First Mini­Conference in Web Technologies and Trends (WTT)
© 2009 Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia
 • section represents a generic document or application section. It can be used together with h1­h6 to 
indicate the document structure. 

• article represents an independent piece of content of a document, such as a blog entry or 
newspaper article. 

• aside represents a piece of content that is only slightly related to the rest of the page. 

• header represents the header of a section. 

• footer represents a footer for a section and can contain information about the author, copyright 
information, et cetera. 

• nav represents a section of the document intended for navigation. 

• dialog can be used to mark up a conversation

• Audio and video for multimedia content. Both provide an API so application authors can script their 
own user interface, but there is also a way to trigger a user interface provided by the user agent. 
source elements are used together with these elements if there are multiple streams available of 
different types

There   are   a   lot   of   other   elements   which   enhance   websites   (for   more   details   please   refer   to   the 
references).

3.2New Attributes [4]
New global attribute:
• The contenteditable attribute indicates that the element is an editable area. The user can change 
the contents of the element and manipulate the markup. 

• The contextmenu attribute can be used to point to a context menu provided by the author. 

• The draggable attribute can be used together with the new drag & drop API. 

• The irrelevant attribute indicates that an element is not yet, or is no longer, relevant.

There are several new attributes to elements which were introduced in HTML 4.

3.3New Structure [1]
HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 
pages include a variety of common structures, such as headers, footers and columns and today, it is fairly 
common to mark them up using div elements, giving each a descriptive id or class (see Figure 1).
 Figure 1. Diagram illustrates a typical two-column layout marked up using divs with id and class attributes.

The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for 
describing   these   parts   more   specifically.   HTML   5   addresses   this   issue   by   introducing   new   elements   for 
representing each of these different sections (see figure 2).

  

Figure 2. The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

The markup for that document could look like the following:
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>
3.4New Document Representation [1]
Unlike previous versions of HTML and XHTML, which are defined in terms of their syntax, HTML 5 is being 
defined in terms of the Document Object Model (DOM)—the tree representation used internally by browsers 
to represent the document. For example, consider a very simple document consisting of a title, heading and 
paragraph (see Figure 3).

Figure 3. The DOM tree includes a title element in the head and h1 and p elements in the body.

3.5Web Application APIs [5]
HTML 5 introduces several APIs that will drastically improve the client­side web development environment. 
These APIs are what set HTML 5 apart as a proposal for a technology stack for Web Applications, rather 
than simply a markup language for documents. It should be noted that the details of these APIs are being 
worked out by the Web API working group, so they may be adopted with or without the rest of HTML 5. The 
new APIs and corresponding elements are: 
• A 2D drawing API using the canvas element. 

• API for playing of video and audio which can be used with the new video and audio elements. 
• Persistent storage on the client­side with support for both key/value and SQL databases. 

• An API that enables offline Web applications (similar to Google Gears). 

• An API that allows Web Applications to register themselves for certain protocols or MIME types. 

• An editing API that can be used in combination with the global contenteditable attribute. 

• A drag & drop API that can be used with the draggable attribute. 

• A network API allowing Web applications to communicate using TCP. 

• An API that exposes the browser history, allowing applications to add to it so they don’t break the 
back button. 

• A cross­document messaging API. 

• Server­sent events in combination with the new event­source element.
4.DISCUSSION
After this research, I thought that HTML 5 is much simpler to use than HTML 4. With the new elements, 
attributes and structure that I mentioned above it looks like HTML 5 will make things easier. Audio and video  
elements are native solution to embed multimedia content. Also there are some elements and attributes were 
dropped from the specification such as center, font, frame, align, border ….etc, which are better handled by 
CSS.
The APIs that introduced by HTML 5 such as the use of canvas element to introduce a 2D drawing API and 
the other APIs made HTML to move away from document markup language and turning it into a language for 
web applications.

5.CONCLUSION
HTML 5 looks promising, with lots of new features that address common web development problems. The 
specification is under recommendation, and it’s likely to stay that way for some time. But with industry support 
from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft, it’s likely that this specification will 
be implemented quickly and consistently once it’s reached a stable state.

6.REFERENCES
[1] A Preview of HTML 5 (http://www.alistapart.com/articles/previewofhtml5) by    Lachlan Hunt
[2] HTML 5 (http://dev.w3.org/html5/spec/Overview.html) by W3C
[3] HTML 5 (http://en.wikipedia.org/wiki/HTML_5) by Wikipedia
[4] HTML 5 differences from HTML 4 (http://www.w3.org/TR/2008/WD­html5­diff­20080122/)
[5] XHTML 2 vs. HTML 5 (http://immike.net/blog/2008/02/06/xhtml­2­vs­html­5/) by Mike Malone