HTML5 Example, DOCTYPE and Tags

HTML5 is a new and exciting web development coding language that will be an update to the current HTML4. This isn’t a complete over hall of the old technology, but many upgrades to make production easier and simplified. This web development coding language isn’t complete at the time of this writing, but many major internet browsers have started supporting it. There will be some HTML5 Examples of the DOCTYPE and Tags that have been released.

New Rules and Features According to W3C

There have been some new rules that the World Wide Web Consortium (W3C) have put together for HTML5. Its features are based on HTML, CSS and JavaScript. Better use of external third party plug-in like Flash. This will help HTML5 be device independent and making it easier to implement, like cell phones.

HTML5 Example Logo

Now the best part of this web development coding language, the features. Most of the new features can be done in HTML4 with the help of other technologies, but HTML5 have made it easier with the use of less code. Video and Audio elements for easier media playback is going to be a huge update. Specific elements for layouts, will replace <div> ids, such as Article, Footer, Header, Nav and Section. More Form Inputs like Calendar, Date, Time, Email, URL and Search. Last but not least a canvas element for 2 dimensional drawing.

New HTML5 Tags Released

Here is a quick list of some of the HTML5 Tags that have been released as of now. Which a small description of what you can expect from them.

Tag Elements

<article>
Use for content, but as a reference from an external source.

<aside>
Use for content to indicate how its related to the surrounding content.

<audio>
Include a sound, music or audio file.

<canvas>
A graphically interface to draw with the help of JavaScript.

<command>
A Button, Radio Button or Checkbox.

<datalist>
Data options for input values.

<details>
To give more details about the current document.

<embed>
Embed an application or plug-in.

<figure>
Used for grouping a section of content.

<figcaption>
Use with the <figure> tag, but as a caption of the section.

<footer>
To indicate the footer section on the page.

<header>
To indicate the header section on the page.

<hgroup>
An element to group your headings, such as <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.

<keygen>
Generates key values.

<mark>
Highlight your content.

<meter>
Measure the minimum and maximum values specified in the document.

<nav>
To indicate the navigation section on the page.

<output>
To specify a different type of output.

<progress>
Indicated the progress of the page.

<ruby>
Ruby Annotations (Chinese Characters).

<rt>
Comment on Ruby Annotations.

<rp>
Indicates if internet browser does not support the <ruby> tag.

<section>
Indicated a section on the page.

<source>
Indicate the media resource.

<summary>
A quick summary inside the current element.

<time>
Give a time stamp on the page.

<video>
Include a video , movies or stream file.

<wbr>
Word Break

Input Type Attributes

color
Input value for hexadecimal color.

date
Input value for date.

datetime
Input value for data / time.

datetime-local
Input value for local data / time.

email
Input value for email.

month
Input value for month.

number
Input value for number.

range
Input value for range.

search
Input value for search.

tel
Input value for telephone number.

time
Input value for time.

url
Input value for url.

week
Input value for week.

Some HTML5 Examples and Demos

Here is a few quick examples of the tags that have been released. If you are viewing this page on a HTML5 compliant browser you will see the examples. If not you will need to copy the code and run in a HTML5 compatible internet browser.

HTML5 DOCTYPE
No need to worry about Strict, Transitional, Frameset 1.0 or 4.0, just HTML5 DOCTYPE.
<!DOCTYPE HTML>

HTML5 Video Example
Including a video file on your webpage.
<video src="http://upload.wikimedia.org/wikipedia/commons/7/75/Big_Buck_Bunny_Trailer_400p.ogg" controls="controls">Your Browser does not support HTML5</video>

HTML5 Audio Example
Including an audio file on your webpage.
<audio src="http://upload.wikimedia.org/wikipedia/en/c/c3/Super_Mario_Bros._theme.ogg" controls="controls"> Your Browser does not support HTML5</audio>

Progress Tag
Dynamic values will be required to make it move.
<progress value="72" max="100">72%</progress>

72%

HTML5 Canvas Tutorial
The canvas tag allow drawing with the help of JavaScript. Define the canvas tag with:
<canvas id=”canvas” width="300" height="100”>Your Browser does not support HTML5</canvas>

Then Use JavaScript to Draw inside of your canvas tag.

<script>
var CanvasBox = document.getElementById("canvas");
var myBox= CanvasBox.getContext('2d');
myBox.fillStyle = 'blue';
myBox.fillRect(5,5,90,90);
</script>

Your Browser does not support HTML5

HTML5 Is on the Move

There is some info, tags, attributes and examples on some of the changes and exciting new features in HTML5. One note when trying to manipulate some of these features is that it is not officially released and not all your visitors are going to be able to render them. But if you want to get started to play and learn I recommended using the latest versions of these internet browsers, Google Chrome, Internet Explorer, Mozilla Firefox or Opera. All the major internet browsers have released updates that render HTML5 code.

W3C - World Wide Web Consortium Accessibility LogoFor more information about HTML5, check out W3C HTML5 Overview.

Related Articles

Comments

Sat, 12/03/2011 - 11:26 — Anonymous

great short note.Actually there are few posts in the internet regarding html5.

Mon, 01/23/2012 - 05:54 — Anonymous

I am just starting to get good ad HTML and CSS now I want to learn java and PHP.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options