HTML 5 – Introduction

HTML 5 – Introduction

HTML5 is a-

– New version of HTML, with some new elements, attributes and structural elements.

– Allow web pages to store data on the client-side locally and operate offline more efficiently.

– Introduce new elements such as the <header>, <nav> and<article> have been introduced which helps in SEO.

– Supported in all modern browsers.

WHATWG wanted to develop HTML as a “Living Standard”. A living standard is always updated and improved. New features can be added, but old functionality cannot be removed.

The WHATWG HTML5 Living Standard was published in 2012, and is continuously updated. The W3C HTML5 recommendation was released 28 October 2014.

The new HTML5 elements are:

New structural elements like <header>, <footer>, <article> & <section>

New attributes of form elements like number, date, time, calendar, and range.

New graphic elements: <svg> and <canvas>.

New multimedia elements: <audio> and <video>.

So, in short “HTML5 is not just the future of web design, it’s the present.”


Form Controls – HTML5

HTML5 Form Controls provide a better features by making forms more consistent across different web sites by giving quick response.

<form>

Pick Color: <input type=”color” /><br>

Select Date: <input type=”date” /> <br>

Enter Email : <input type=”email” required /> <br>

Fix Font Size:<input type=”number” max=”20″ min=”2″ />

Select Month: <input type=”month” /><br>

Time to Start : <input type=”time” /> <br>

Select Date & Time :  <input type=”datetime-local” /><br>

Enter Few Letters : <input type=”search” name=”googlesearch”> <br>

Enter Telephone No. :  <input type=”tel” ><br>

Enter Website URL : <input type=”Url” required /><br>

<input type=”submit” Value=”GO”>

</form>

*URL: to ensure a valid website address or url has been entered.

*Email: to ensure a valid e-mail address has been entered.

*Search: until you start typing, that is. At this point, a small cross appears on the right side of the field.

*Date: To allow user to pick date from a calendar.
New Input Attributes

autocomplete  – To enable / disable auto fill form entries from the saved data in the browser memory.

autofocus –Specify that a control should have focus when the page loads.

formaction – Help you to set more than one action page in a form

min and max – To set maximum and Minimum values of a control

multiple – To allow or select multiple files using file control

pattern (regexp) – To the set the pattern for the control

placeholder – The short hint to show in the input field before the user enters a value.

Required – To ensure input field must be filled out before submitting the form.

Step – To set number of steps for the input value
HTML 5 – Audio & Video

HTML5 introduces built-in media support via the <audio> and <video> elements, offering the emendation of media into HTML documents.

Embedding Audio to the web page

Example:

<audio src=”himesh-new-song.mp3″ preload=”auto”>

<p>Your browser does not support the <code>audio</code> element.</p>

</audio>

*preload used for buffering large files, used in the audio tag

 

Some Attributes, you may try with <Audio> tag

controls: Displays the standard HTML5 controls for the audio on the web page.

autoplay: Makes the audio play automatically.

loop: Make the audio repeat (loop) automatically.

 

Embedding Video to the web page

 

<video controls>

<source src=”Dangal.mp4″ type=”video/mp4; codecs=dirac, speex”>

Your browser does not support the <code>video</code> element.

</video>

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
Google+2k
Google+
http://hirdeshbhardwaj.com/2017/09/09/html5
YouTube41
YouTube