Introduction of HTML 5

What is HTML5?

HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

Minimum HTML5 Document

Below is a simple HTML5 document, with the minimum of required tags: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>

New Features

Some of the most interesting new features in HTML5:
  • The <canvas> element for 2D drawing
  • The <video> and <audio> elements for media playback
  • Support for local storage
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
  • New form controls, like calendar, date, time, email, url, search

Browser Support

HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.

New Elements in HTML5

Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. All those elements are removed or re-written in HTML5. To better handle today's internet use, HTML5 also includes new elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, find Geolocation, include web storage, application cache, web workers, etc.

The New <canvas> Element

Tag Description
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

New Media Elements

Tag Description
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for <video> and <audio>
<embed> Defines a container for an external application or interactive content (a plug-in)
<track> Defines text tracks for <video> and <audio>

New Form Elements

Tag Description
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

New Semantic/Structural Elements

Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break

Removed Elements

The following HTML 4.01 elements are removed from HTML5:
  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>
Reference Link: W3schools

Comments

Post a Comment

Popular posts from this blog

Simple Pie Graphs Using <canvas> element in HTML 5

Now a days graphs are playing a major role to visualise the statistics in the web applications. With the help of these graphs, user can see all the information in detail at a glance. One popular kind among those graphs is Pie Graphs. So i continued my work for plotting Pie diagram with the help of simple Javascript & HTML5 <canvas> element. The canvas element properties such as 'arc()', 'beginPath()', 'lineTo()' & 'fill()' are used in this example. Let us go through each step for better understanding. Define the canvas element in your document body as shown below. You can apply styles either by using "style" tag (inline CSS) or defined class in separate .css file. <canvas id="canvas" width="800" height="500"></canvas> This text is displayed if your browser does not support HTML5 Canvas. Define your values in the form of an array as shown below. To display different filled colors for ...
Read more

Stored Procedures in MySQL

Stored procedure is a segment of declarative SQL statements stored inside the MySQL Server. To define it other way, we can save (one or set) queries within stored procedure for future use. For example, we have a SELECT query that returns rows based on the condition SELECT * FROM customers WHERE city = ‘Bangalore’ ORDER BY firstName; The first time you invoke a stored procedure, MySQL looks up for the name in the database catalog, compiles the stored procedure’s code, place it in a memory area known as a cache, and execute the stored procedure. If you invoke the same stored procedure in the same session again, MySQL just executes the stored procedure from the cache without having to recompile it. A stored procedure can have parameters so you can pass values to it and get the result back. Advantages Reduce network traffic Centralize business logic More secure Disadvantages Resource Usages Troubleshooting Maintenance Creating Stored Procedures If we ...
Read more

Simple Line Graphs Using <canvas> element in HTML 5

After i worked with the Bar graph, i feel it is very easy to implement the line graphs using <canvas> element in HTML5. You can find many similarities in the javascript while working on this. New functions moveTo() , lineTo() , stroke() , lineWidth() has been used for line graphs. Define the canvas element in your document body as shown below with the ID attribute and mention the height & width attributes. You can apply styles either by using "style" tag (inline CSS) or defined class in separate .css file. <canvas id="myCanvas" width="800" height="500"></canvas> <script language="javascript" type="text/javascript"> var interval = 30; var linewidth = 1; var color = "blue"; var graphholder = "myCanvas"; var displayLabel = true; var labelfontstyle = "Arial"; var labelfontsize = "12px"; var labelfontclr = "#000000"; var ...
Read more