about html5


HTML4 is doing lot much for us, but that was not enough. So, everybody is doing this or that stimulate many controls in some other way, like input type text as date, time and much more. HTML5 has learned from all this user experiences and tried to make programmers life easier. HTML5 added all these new input types in basic html so, not need of js to do it and much more. Let’s see one by one each features of html5

<canvas>

Note:browser support mozilla, chrome, safari

canvas tag is new to html5 and supports 2d drawing that can be controlled easily using javascript.
Defining canvas element is as easy as defining a div with all properties and styles. for example

<canvas style="border:1px solid red;height:100px;width:300px;"></canvas>


Once canvas is created it can be easily controlled using javascript functions.

<script language="javascript">
var c = document.getElementById('canvas');
cContext = c.getContext('2d');
cContext.fillStyle = 'yellow';
cContext.fillRect(10,10,200,150);
</script>



Commonly used function for context 2d api are

  • moveTo(x,y)
  • lineTo(x,y)
  • strokeRect(x,y,width,height)
  • lineTo(x,y)
  • beginPath()
  • closePath()
  • save()
  • restore()
  • fill()
  • stroke()

<video>

Embedding video/audio is now very easy with video and audio tag. It’s as easy as embedding an image file. Video tag has attributes

  • src
  • poster
  • preload
  • autoplay
  • loop
  • controls
  • width
  • height

<audio>


Audio is similar to video tag, except it is for audio. ( don’t know why)


New structural elements

HTML provided building blocks for structures but no structure element, html5 now provided some new structural elements so, it made easy to create a site template and design elements.

<section>, <header> , <footer>, <nav>, <article>,

Generally a html page is created as following

<html>
<head>
<title>title</title>
<style type="text/css">
*{border:1px solid red;margin:2px;}
</style>
</head>
<body>
<div id="header">
<h1>Header elements</h1>
</div>
<div id="content">
<div class="article">article content</div>
<div class="article">article content</div>
<div class="article">article content</div>
</div>
<div id="navigation">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="footer">
footer dataa
</div>
</body>
</html>

Here we are making div behave as structural element with the help of css. It becomes a mess of so many divs. Now with html5, we can write it simply

<html>
<head>
<title>title</title>
<style type="text/css">
*{border:1px solid red;margin:2px;}
</style>
</head>
<body>
<header>
<h1>Header elements</h1>
</header>
<section>
<article>article content</article>
<article>article content</article>
<article>article content</article>
</section>
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<footer>
footer dataa
</footer>
</body>
</html>

so , creating site specific elements for structure of html is not required. standard elements are provided, so a standard css can be created. Default behavior of these elements are they sits in their own line. But semantically also, you have to put them in the sequence you want to show them in the browser.

A few block level elements have also been added

<aside>, <figure>

The aside element represents a note, a tip, a sidebar, a pullquote, a parenthetical remark, or something that’s just outside the main flow of the narrative. We can make css, to make browser place this element at proper location.

figure
The figure element represents a block-level image, along with a caption. so, now no need to create tricky css for displaying title, or caption with image it can be done easily with figure element.

<figure>
<legend>Image caption</legend>
<img src="" />
</figure>

dialog element is used to display conversation between several persons. element dt is loaded with speakers and element dd is loaded with speech.


New inline elements

<mark>
<time>
<meter>
<progress>

mark <m> element is just to mark some text in content on a page. It’s like highlighting some text in book.

time, datetime these elements do not have any special attributes, these are just to identify time and date time content in whole page content. More useful or non visual devices, like robots.

meter is to identify a numeric content in the page. meter can have up to six attributes to describe the value more accurately to machine readable format.

  • value
  • min
  • low
  • high
  • max
  • optimum

progress


New input elements

datetime
date
month
week
time
number
range
email
url


Dropped elements

acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
noscript
s
strike
tt
u


Character encoding


<meta charset=”UTF-8″ >


New interactive elements

<details>
<datagrid>
<menu>


New dtd

explain more in next post.