HTML4 vs HTML5 — Key Differences Every Developer Should Know: Part 2

Continuing on HTML vs HTML5: Part-2

This section elaborates more on the differences between HTML4 and HTML5.

The following elements are removed (deprecated) in HTML5:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

Semantic and Structual Elements

<article>: Describes an article
<aside>: Describes a content area located aside from the main page
<bdi>: Segregate a section of a text which is formatted in a different direction
<command>: Command button
<details>: Additional details to hide/view including the tag <summary> specifying a visible heading for the details.
<dialog>: Defines a dialog box
<progress>: Describes the progess of a task
<ruby>: Defines a ruby annotation
<rt>: Describes an explanation or pronunciation of characters
<section>:Defines a section in a document
<time>: Defines a date/time
<wbr>: Defines a line-break

Form Elements

Controls including <calendar>, <date>, <time>, <email>, <url>, <search>, <color>, <range>, <tel>
<datalist>: Identifies a list of pre-defined options
<keygen>: Describes a key-pair generator field
<output>: Describes the result of a computation

Media Elements

<audio>: Defines sound content
<embed>: Defines a container for an external applicatio or a plug-in
<video>: Defines movie/video
<track>: Defines text tracks for both <haudio> and <video>

Here is an HTML5 audio example:

							<!DOCTYPE html> 

							<!--Example: Audio.html --> 

							<html> 

							<head> 

							<title> Audio Example  </title> 

							</head> 

							<body bgcolor="#ffffee" aLink="#0000ff" link="#0000ff" text="#000000" vLink="#0000ff" > 

								<font face="times" size="+2" > 

								<audio src="mysong.mp3" type="audio/mpeg" > 

								Your brower does not support audio. 

								</audio> 

							</body> 

							</html>

Please note that the following HTML tags are deprecated and CSS code is needed:

....bgcolor="#ffffee" aLink="#0000ff" link="#0000ff" text="#000000" vLink="#0000ff" .....font face="times" size="+2"

Inline Scalable Vector Graphics (SVG)

SVG allows to use vector-based graphics on the Web in XML format
SVG doesn't lose quality when zoomed/resized
Elements and attributes in SVG files can be animated
Unlike other images formats, SVG images can be created/edited with text editors
SVG images can be compressed, indexed, scripted, and searched
SVG images can be printed with high quality and resolution
Differences between Canvas and SVG are as follows:

This document has only illustrated the major differences between HTML4 and HTML5. If you need further help, email me and will get back to you.

HTML4 vs HTML5: Part 2

Continuing on HTML vs HTML5: Part-2