Scribd
Upload
40 views8 pages

HTML 5 vs. Older HTML Versions: New Doctype, Charset and Page Structure

Uploaded by

nageshgummada
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views8 pages

HTML 5 vs. Older HTML Versions: New Doctype, Charset and Page Structure

Uploaded by

nageshgummada
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

[HTML 5 – WEB DESIGN & WEB DEVELOPMENT]

HTML 5 vs. older HTML Versions


If you’re reading this, you’re most likely familiar with HTML? HTML has been revamped.
The newest version of HTML, will replace current versions, HTML 4.01 and XHTML
1.0.While you should be cautious of using HTML 5 on larger Web projects because most
browsers don't understand it, learning about its improvements over past versions is both
interesting and a necessity for future projects.

The promise is that HTML 5 will redefine the web, most likely removing the likes of Adobe
Flash, MS Silverlight and Java FX.

This article will look into the new feature, and what’s been removed.

New Doctype, Charset and Page structure

No longer will you need to use the likes of

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en ">

As HTML no longer uses SGML to define its Doctype, the doctype line in HTML can be made
much simpler.

<!doctype html>

© 2010 www.visualwebz.com Seattle Web Development Company


[HTML 5 – WEB DESIGN & WEB DEVELOPMENT]

Page Structure

HTML 3 – Remember using tables to specify the structure of the page? May be you still use
them?

HTML 4 – <div> containers being used in conjunction with CSS

HTML 5 – introduces a completely new set of elements to define the page structure.

Following examples show the differences between the HTML versions based on the page
structure below:

HTML 3 HTML 4 HTML 5


<body>
<table> <body> <body>
<tr> <div id="header">...</div> <header>...</header>
<td>header</td> <div id="nav">...</div> <nav>...</nav>
</tr> <div class="right"> <right>
<tr> ... ...
<td>nav</td> </div> </right>
</tr> <div id="left">...</div> <left>...</left>
<tr> <div id="footer">...</div> <footer>...</footer>
<td>left </td> </body> </body>
<td> right </td>
</tr>
<tr>
<td >footer</td>
</tr>
</table>
</body>

© 2010 www.visualwebz.com Seattle Web Development Company


[HTML 5 – WEB DESIGN & WEB DEVELOPMENT]

New Elements in HTML 5


A number of new elements have been introced in HTML 5:

<canvas>
gives you a drawing canvas in JavaScript. The user can draw on the canvas and using
Javascript, you can track the drawing.

<video>
add video to your Web pages with this simple element.

<audio>
add an audio clip to your Web pages with this simple element.

<progress>
adds a progress bar on the page. You can use it while uploading or downloading something
from your site.

<meter>
represents a measurement such as disk usage.

The <input> element already exists, but new types have been introduced:

tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range,
color

Obsolete Elements in HTML 5


As new elements are introduced in HTML 5, there are also elements that have been
removed, as most of its functions can be implemented via CSS.

acronym , applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes,
noscript, s, strike, tt, u

© 2010 www.visualwebz.com Seattle Web Development Company


[HTML 5 – WEB DESIGN & WEB DEVELOPMENT]

New Features in HTML 5

There are many additional elements that are available in HTML 5, some of these have been
summarized below:

Offline Mode
Due to technologies like AJAX came into existence, and the ability of making multiple
requests to the server, thus allowing pages to seem to load more efficiently as additional
resources are fetched asynchronously.

With HTML 5, you can specify what resources your page will require and the browser will
cache them so that the user can continue to use the page even if he/she gets disconnected
from the internet.

Local Database
HTML 5 has included a local database that will be persistent through your session. The
advantage of this is that you can fetch the required data and dump it into the local
database, thus reducing the burden of fetching duplicate data from the server. As you can
imagine, this will no doubt reduce the load on the server, as well as speed up
responsiveness of the website application.

Native JSON
JSON, or JavaScript Simple Object Notation is a popular alternative to XML, which was
almost the de-facto standard before the existence of JSON. Until HTML 5, you needed to
include libraries to encode and decode JSON objects. Now, the JavaScript engine that ships
with HTML 5 has built-in support for encoding/decoding JSON objects.

Cross Document Messaging


Another interesting addition to HTML 5 is the ability to perform messaging between
documents of the same site. A good use of this would be in a blogging tool. In one window,
you create your post and in another window, you can see what the post would look like
without having to refresh the page.

Cross Site XHR


One of the amazing implications of AJAX was to be able to not only fetch data from the
server asynchronously, but to be able to get resources from other websites using the
XMLHTTPRequest. As this wasn't part of HTML4, you needed to include a library to
perform such an action. HTML 5 will have XMLHTTPRequest support built-in, so you won't
need any library.

© 2010 www.visualwebz.com Seattle Web Development Company


[HTML 5 – WEB DESIGN & WEB DEVELOPMENT]

Multi-threaded JavaScript
JavaScript is the only language that allows you to perform client side scripting, and a large
proportion of websites use this website technology. The only setback of including
JavaScript on web pages is the time it takes to process the code, the more lines of JavaScript
you add to your web page; the longer it will take to process them. A solution to this is to
tell the browser that the script is only needed after the page has loaded, thus the JavaScript
is fetched asynchronously even after the page has loaded.

HTML 5 has introduced an attribute that compensates this, async.

<script async src="jquery.js"></script>

© 2010 www.visualwebz.com Seattle Web Development Company


[HTML 5 – WEB DESIGN & WEB DEVELOPMENT]

Below is a complete list of HTML tags, and which version supports it:

Tag Description 4 5
<comment> Defines a comment 4 5
<DOCTYPE> Defines the document type 4 5
<a> Defines a hyperlink 4 5
<abbr> Defines an abbreviation 4 5
<acronym> Not supported. Defines an acronym 4
<address> Defines an address element 4 5
<applet> Not supported. Defines an applet 4
<area> Defines an area inside an image map 4 5
<article> Defines an article 5
<aside> Defines content aside from the page content 5
<audio> Defines sound content 5
<b> Defines bold text 45
<base> Defines a base URL for all the links in a page 45
<basefont> Not supported. Use CSS instead 4
<bdo> Defines the direction of text display 45
<big> Not supported. Defines big text 4
<blockquote> Defines a long quotation 45
<body> Defines the body element 45
<br> Inserts a single line break 45
<button> Defines a push button 45
<canvas> Defines graphics 5
<caption> Defines a table caption 45
<center> Not supported. Defines centered text 4
<cite> Defines a citation 45
<code> Defines computer code text 45
<col> Defines attributes for table columns 45
<colgroup> Defines groups of table columns 45
<command> Defines a command button 5
<datagrid> Defines data in a tree-list 5
<datalist> Defines a dropdown list 5
<datatemplate> Defines a data template 5
<dd> Defines a definition description 45
<del> Defines deleted text 45
<details> Defines details of an element 5
<dialog> Defines a dialog (conversation) 5
<dir> Not supported. Defines a directory list 4
<div> Defines a section in a document 45
<dfn> Defines a definition term 45
<dl> Defines a definition list 45

© 2010 www.visualwebz.com Seattle Web Development Company


[HTML 5 – WEB DESIGN & WEB DEVELOPMENT]

<dt> Defines a definition term 45


<em> Defines emphasized text 45
<embed> Defines external interactive content or plugin 5
<eventsource> Defines a target for events sent by a server 5
<fieldset> Defines a fieldset 45
<figure> Defines a group of media content, and their caption 5
<font> Deprecated. Defines text font, size, and color 4
<footer> Defines a footer for a section or page 5
<form> Defines a form 45
<frame> Not supported. Defines a sub window (a frame) 4
<frameset> Not supported. Defines a set of frames 4
<h1> to <h6> Defines header 1 to header 6 45
<head> Defines information about the document 45
<header> Defines a header for a section or page 5
<hr> Defines a horizontal rule 45
<html> Defines an html document 45
<i> Defines italic text 45
<iframe> Defines an inline sub window (frame) 45
<img> Defines an image 45
<input> Defines an input field 45
<ins> Defines inserted text 45
<isindex> Not supported. Defines a single-line 4
input field
<kbd> Defines keyboard text 4 5
<label> Defines a label for a form control 4 5
<legend> Defines a title in a fieldset 4 5
<li> Defines a list item 4 5
<link> Defines a resource reference 4 5
<mark> Defines marked text 5
<map> Defines an image map 45
<menu> Defines a menu list 45
<meta> Defines meta information 45
<meter> Defines measurement within a predefined range 5
<nav> Defines navigation links 5
<nest> Defines a nestingpoint in a datatemplate 5
<noframes> Not supported. Defines a noframe section 4
<noscript> Defines a noscript section 45
<object> Defines an embedded object 45
<ol> Defines an ordered list 45
<optgroup> Defines an option group 45
<option> Defines an option in a drop-down list 45
<output> Defines some types of output 5

© 2010 www.visualwebz.com Seattle Web Development Company


[HTML 5 – WEB DESIGN & WEB DEVELOPMENT]

<p> Defines a paragraph 45


<param> Defines a parameter for an object 45
<pre> Defines preformatted text 45
<progress> Defines progress of a task of any kind 5
<q> Defines a short quotation 45
<rule> Defines the rules for updating a template 5
<s> Not supported. Defines strikethrough text 4
<samp> Defines sample computer code 45
<script> Defines a script 45
<section> Defines a section 5
<select> Defines a selectable list 45
<small> Defines small text 45
<source> Defines media resources 5
<span> Defines a section in a document 45
<strike> Not supported. Defines strikethrough text 4
<strong> Defines strong text 45
<style> Defines a style definition 45
<sub> Defines subscripted text 45
<sup> Defines superscripted text 45
<table> Defines a table 45
<tbody> Defines a table body 45
<td> Defines a table cell 45
<textarea> Defines a text area 45
<tfoot> Defines a table footer 45
<th> Defines a table header 45
<thead> Defines a table header 45
<time> Defines a date/time 5
<title> Defines the document title 45
<tr> Defines a table row 45
<tt> Not supported. Defines teletype text 4
<u> Not supported. Defines underlined text 4
<ul> Defines an unordered list 45
<var> Defines a variable 45
<video> Defines a video 5
<xmp> Not supported. Defines preformatted text 4

Other Web Development and Search Engine Optimization articles are available on the
visualwebz.com website, under Web Design 101

© 2010 www.visualwebz.com Seattle Web Development Company

You might also like