HTML5

“HTML5 is the next generation of HTML.”
What is HTML5?
HTML5 will be the new standard for HTML.

html5

html5

HTML 5 is the next major version of HTML. It introduces a bunch of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone. In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more.

Wiki Says

“HTML5 is a markup language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and, as of July 2012, is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well.”

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.

How Did HTML5 Get Started?

html5-where to get started?

HTML-5-where to get started?

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

Some rules for HTML5 were established:

  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plugins (like Flash)
  • Better error handling
  • More markup to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

Below is a simple HTML5 document, with the minimum of required tags:

html5

HTML5

 

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>

The content of the document……
</body>
</html>

HTML5 – 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

HTML5 offers new elements for better structure:

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
<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
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<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

New Media Elements

HTML5 offers new elements for media content:

html5 AND MEDIA DEVELOPMENT

html5 AND MEDIA DEVELOPMENT

 

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

HTML5 Tags [ reference taken from w3schools site]
<!–>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>

<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> – <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Look for sample in my next post – this post is just to make aware of HTML5 technology. Please do leave your valuable comments and suggestions for any change in the content and improvement of the blog.

Advertisements

29 thoughts on “HTML5

  1. Very nice post. I just stumbled upon your blog and wished to
    say that I have truly enjoyed surfing around your blog posts.
    After all I will be subscribing to your rss feed and I hope you
    write again soon!

  2. Hey there! I just wanted to ask if you ever
    have any issues with hackers? My last blog (wordpress) was hacked and
    I ended up losing a few months of hard work due to no back up.

    Do you have any solutions to protect against hackers?

  3. Magnificent items from you, man. I’ve have in mind your stuff prior to and you’re just too great. I actually like what you’ve got here, certainly like what you are saying and the way in which by which you assert it. You’re making it entertaining and you still take care of to keep it smart. I can not wait to learn much more from you. This is really a tremendous website.

  4. Hi! This post couldn’t be written any better! Reading through this post reminds me of my good old room mate! He always kept chatting about this. I will forward this page to him. Fairly certain he will have a good read. Thanks for sharing!

  5. I have been browsing online more than 2 hours today, yet I never found any interesting article like yours.

    It is pretty worth enough for me. In my view, if all site
    owners and bloggers made good content as you did, the internet will be much more useful
    than ever before.

  6. Wow, marvelous blog format! How lengthy have you been blogging for?

    you make running a blog look easy. The overall glance of your site is excellent, as smartly as
    the content!

  7. My brother recommended I would possibly like this web site.
    He was entirely right. This submit actually made my day.
    You can not consider simply how so much time I had spent for
    this information! Thanks!

  8. Hey There. I found your blog using msn. This is an extremely well written article.
    I will be sure to bookmark it and return to read more of your useful info.
    Thanks for the post. I’ll definitely return.

  9. I just want to mention I am newbie to blogging and really liked you’re blog. Likely I’m want to bookmark your blog . You actually have exceptional articles. Many thanks for sharing your website page.

  10. I simply want to say I am beginner to blogs and certainly liked this web site. Likely I’m want to bookmark your site . You definitely have fabulous posts. Many thanks for sharing your website page.

  11. I simply want to say I’m newbie to weblog and really enjoyed this web page. Probably I’m likely to bookmark your blog post . You surely have wonderful article content. With thanks for revealing your web page.

  12. I simply want to say I am new to weblog and honestly enjoyed your page. Almost certainly I’m likely to bookmark your blog post . You really come with very good articles. Thanks for sharing with us your blog site.

  13. I just want to say I’m newbie to blogging and site-building and absolutely liked your blog site. Probably I’m going to bookmark your blog post . You definitely come with remarkable stories. Thanks for revealing your web-site.

  14. Hi I am so happy I found your weblog, I really found you by mistake, while I was searching on
    Digg for something else, Nonetheless I am here now and would just
    like to say kudos for a remarkable post and a all round exciting blog (I also love the theme/design),
    I don’t have time to read it all at the minute but I have bookmarked it and also added in your RSS feeds, so when I have time I will be back to read much more, Please do keep up the awesome work.

  15. I simply want to tell you that I am new to weblog and definitely loved you’re web blog. Very likely I’m planning to bookmark your site . You absolutely have perfect articles and reviews. Thanks for revealing your website page.

  16. Pingback: HTML5 | Web Designing - Top Tips for Web Developments | Scoop.it

  17. Woah! I’m really enjoying the template/theme of this site. It’s simple, yet effective.
    A lot of times it’s very hard to get that “perfect balance” between usability and visual appearance. I must say you’ve done a excellent job with this.
    Also, the blog loads super quick for me on Internet explorer.

    Superb Blog!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s