Breaking News

5 new things you need to know about html5

HTML5 has plenty of new features. It will make our web developers life easier. On my interview, I been asked many times: “So what’s so cool about html5?”. HTML5 has a lot of new cool things. I decided to outline the ones which I like at the most:

1. HTML5 Rounded corners

html4 doesn’t have neat strategy to manage rounded boxes. You would need to write multiple lines to achieve this simple at first look technique. On other side, html5 is a complete rescue here. Just simply add:
border: 0.5px solid #000; and it will solve all your problems.
Sample example:

<style>
#container {
border-radius: 10px;
background-color: white;
border: 0.5px solid #000;
overflow: hidden;
}
</style>
<div id="container">This is an example of rounded corners with html5</div>

Above code will produce:

This is an example of rounded corners with html5

2. HTML5 No More long writings

Unfortunately, HTML4 requires a little bit more typing. For lazy people like me, HTML5 will save your time here.

Here is how you declare javascript and stylesheets using HTML4:

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />  
<script type="text/javascript" src="path/to/script.js"></script>

In HTML5, you are no longer required to declare your types

Here is an example of declaration of javascript and stelysheet using HTML5:

<link rel="stylesheet" href="path/to/stylesheet.css" />     
<script src="path/to/script.js"></script>

3. HTML5 Required Attributes

In HTML4, a simple validation is not possible without writing javascript. Javascript is great but why do we need to spend our valuable time? HTML5 will rescue you from extra work

Below is an example which demonstrates simple validation of required fields. All you need to remember is to add: required=”required”

<input type="text" name="someInput" required="required">

4. HTML5 autofocus

Again, HTML5 removes the need for JavaScript solutions. If a particular input should be “selected,” or focused, by default, we can now utilize the autofocus attribute.

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

HTML5 Audio & Video Without Plugins

After I started to use HTML5, I finally saw a bright sun in my room. I can say for sure that HTML4 is a history

Let’s take a look how HTML5 simplifies usage of audio and video files

This short example demonstrates the full power of HTML5 using audo files:

<pre>
<audio controls>
    <source src="demo-audio.ogg" />
    <source src="demo-audio.mp3" />
</audio>
</pre>
And here is an example of video:
<video width="320" height="240" controls preload="none" poster="videoframe.jpg">
    <source src="demo-video.mp4" type="video/mp4" />
    <source src="demo-video.ogv" type="video/ogg" />
</video>

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>