HTML5 Examples | DOCTYPE,Tags, and Attributes

HTML5 is a new and exciting web development markup language that will be an update to the current HTML4. This isn’t a complete over hall of the old technology, but upgrades to make production easier.

For a full detailed chart of supported tags view our HTML5 cheatsheet.

New Rules and Features According to W3C

HTML5 Examples

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.

This will start replacing the third party plug-in better know as Flash. HTML5 will be device independent which gives more support to mobile devices. This will give us a more stable and secure way to produce multimedia.

Now the best part of this markup language, the features. Most of the new features can be done in HTML4 with the help of other technologies. But HTML5 has made it easier, with the use of less code.

Some HTML5 examples are video and audio elements will require one line of code. Having specific elements for layouts. Such as article, footer, header, nav, and section, will give us the ability to replace div ids.

Form inputs can be specified to the type like calendar, date, time, email, URL, and search. Last but not least, the ability to draw 2 dimensional graphics.

New HTML5 Tags Released

Here is a quick list of some of the HTML5 Tag Elements that have been released as of now and what you can expect from them.

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

<article>

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

<aside>

audio
Include a sound, music or audio file.

<audio>

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

<canvas>

command
A button, radio button, or checkbox.

<command>

datalist
Data options for input values.

<datalist>

details
To give more details about the current document.

<details>

embed
Embed an application or plug-in.

<embed>

figure
Used for grouping a section of content.

<figure>

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

<figcaption>

footer
To indicate the footer section on the page.

<footer>

header
To indicate the header section on the page.

<header>

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

<hgroup>

keygen
Generates key values.

<keygen>

mark
Highlight your content.

<mark>

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

<meter>

nav
To indicate the navigation section on the page.

<nav>

output
To specify a different type of output.

<output>

progress
Indicated the progress of the page.

<progress>

ruby
Ruby Annotations (Chinese Characters).

<ruby>

rt
Comment on Ruby Annotations.

<rt>

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

<rp>

section
Indicated a section on the page.

<section>

source
Indicate the media resource.

<source>

summary
A quick summary inside the current element.

<summary>

time
Give a time stamp on the page.

<time>

video
Include a video, movies, or stream file.

<video>

wbr
Word Break

<wbr>

Input Type Attributes

These are the new HTML5 input types and attributes you can use to specifiy what type of information you are collecting.

color
Input value for hexadecimal color.

<input type="color" />

date
Input value for date.

<input type="date" />

datetime
Input value for data / time.

<input type="datetime" />

datetime-local
Input value for local data / time.

<input type="datetime-local" />

email
Input value for email.

<input type="email" />

month
Input value for month.

<input type="month" />

number
Input value for number.

<input type="number" />

range
Input value for range.

<input type="range" />

search
Input value for search.

<input type="search" />

tel
Input value for telephone number.

<input type="tel" />

time
Input value for time.

<input type="time" />

url
Input value for URL.

<input type="url" />

week
Input value for week.

<input type="week

HTML5 Examples and Demos

Here are a few quick examples of the tags that have been released. If you are viewing this page on an HTML5 compliant browser you will see the examples. If not, you are using an incompatible HTML5 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://.../Big_Buck_Bunny_Trailer.ogg" controls="controls">Your Browser does not support HTML5</video>

HTML5 Audio Example
Including an audio file on your webpage.

<audio src="http://.../Super_Mario_Bros.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 are the tags, attributes, and examples that are included in the new HTML5. One note when trying to implement some of these features is that it is not officially released. Some of your visitors may have problems rendering them correct.

If you want to get started with HTML5 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 support most new HTML5 features.

For more information about HTML5, check out the W3C HTML5 Overview.

Advertisement

Share

Rating: 
4.7 (3 votes)

Comments (5)

Comment: 
great short note.Actually there are few posts in the internet regarding html5.
Comment: 
I am just starting to get good ad HTML and CSS now I want to learn java and PHP.
Comment: 
HTML5 Tags are looking interesting, as they are more clear and animated. This will give the web designing the new life.
Comment: 
I personally like the Progress Tag and the input types which have been added to the new html 5 making it a more powerful language than before. Also to benefit the developers they can now use the HTML 5 to create apps for mobile platform as well, though there is a short learning curve but the results are astounding. -Nancy
Comment: 
Hmm! HTML5 is the coding of tomorrow. It is so advanced that it avoids many problematic areas of its predecessor. The Coding technology has really shown that it does not lag behind in the advancement of computing and Web.

What Do You Think?

Copyright © 2017 www.webhostdesignpost.com