| by Achyut Kendre | No comments

What is HTML5?

HTML 5
HTML

HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages. It’s actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS), which take care of presentation; and JavaScript, which makes things happen.

HTML5 has been designed to deliver almost everything you’d want to do online without requiring additional software such as browser plugins. It does everything from animation to apps, music to movies, and can also be used to build incredibly complicated applications that run in your browser.

Why HTML 5?

The major benefits of HTML5 are evolving each day to provide functionalities on par with native technologies.

Owing to its new and powerful features for both developers and end users, it is already used to code websites around the world. HTML 5 is enabled by all new modern desktops and mobile browsers, or for mobile app web development. It has following major feature –

  • No Repeated / Unwanted Tags
  • Content Specific Tag /New Tags
  • More Markup Less Script
  • New Inputs
  • Built in Validation
  • No need of Plugins
  • Built in Graphics
  • Built in Video/Audio
  • Storage
  • Web Workers
  • Geo Location API
  • Server Sent Events

Few of them we will learn in this article and remaining in subsequent articles .

DOCTYPE in HTML 5

All HTML documents must start with a <!DOCTYPE>declaration. The declaration is not an HTML tag. It is an “information” to the browser about what document type to expect.
For HTML 5, the declaration is simple, <!DOCTYPE>, few more things that we need to remember is – default scripting is JavaScript and default style is css.

No Repeated Tags

HTML 5 has remove all repeated or unwanted and unused tags. following tags are removed from html –

<acronym>Defines an acronym
<applet>Defines an applet
<basefont>Defines an base font for the page.
<big>Defines big text
<center>Defines centered text
<dir>Defines a directory list
<font>Defines text font, size, and color
<frame>Defines a frame
<frameset>Defines a set of frames
<isindex>Defines a single-line input field
<noframes>Defines a noframe section
<s>Defines strikethrough text
<strike>Defines strikethrough text
<tt>Defines teletype text
<u>Defines underlined text

Content Specific Tags

In html we have new tags, while introducing new tags it had been taken care that new tags should be content specific, it should not used to format the content of the tag. Few of them are –

<header></header>
<footer></footer>
<section></section>
<nav> </nav> etc.

Hgroup tag

The HTML <hgroup> tag is used for defining the heading of an HTML document or section. More specifically, it is used to group a set of <h1>–<h6> elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

<hgroup>
    <h1>Calculus I</h1>
    <h2>Fundamentals</h2>
</hgroup>

Figure tag in html

Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo:

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

More Markup Less Script

while working of features of html5, it had been taken care the we should have more markups and need to write less script. e.g. Previously we have to use the client side scripts but in html 5 we have built in attributes to do the client side validation, built in attributes for submitting the form to multiple actions or with multiple different methods. We will study then in next article or post.

New Inputs Tags/Attributes

New Input tags

HTML5 provides you new input tags to get input from the user, few tags are as follows –

Input Type Color

The color input type allows the user to select a color from a color picker and returns the color value in hexadecimal format (#rrggbb). If you don’t specify a value, the default is #000000, which is black. Select Color:

<form>
    <label for="mycolor">Select Color:</label>
    <input type="color" value="#00ff00" id="mycolor">
</form>

Input Type Date

The date input type allows the user to select a date from a drop-down calendar. The date value includes the year, month, and day, but not the time. Select Date:

<form>
    <label for="mydate">Select Date:</label>
    <input type="date" value="2019-04-15" id="mydate">
</form>

Input Type Datetime-local

The datetime-local input type allows the user to select both local date and time, including the year, month, and day as well as the time in hours and minutes. Choose Date and Time:

<form>
    <label for="mydatetime">Choose Date and Time:</label>
    <input type="datetime-local" id="mydatetime">
</form>

Input Type Email

The email input type allows the user to enter e-mail address. It is very similar to a standard text input type, but if it is used in combination with the required attribute, the browser may look for the patterns to ensure a properly-formatted e-mail address should be entered. Enter Email Address:

<form>
    <label for="myemail">Enter Email Address:</label>
    <input type="email" id="myemail" >
</form>

Input Type Month

The month input type allows the user to select a month and year from a drop-down calendar. The value is a string in the format “YYYY-MM”, where YYYY is the four-digit year and MM is the month number. Select Month:

<form>
    <label for="mymonth">Select Month:</label>
    <input type="month" id="mymonth" >
</form>

Input Type Number


The number input type can be used for entering a numerical value. You can also restrict the user to enter only acceptable values using the additional attributes min, max, and step.

The following example will allow you to enter a numeric value between 1 to 10. Enter a Number:

<form>
    <label for="mynumber">Enter a Number:</label>
    <input type="number"  id="mynumber">
</form>

Input Type Range

The range input type can be used for entering a numerical value within a specified range. It works very similar to number input, but it offers a simpler control for entering a number.

Let’s try out the following example to understand how it basically works: Select a Number:

<form>
    <label for="mynumber">Select a Number:</label>
    <input type="range"  id="mynumber">    
</form>

Input Type Time

The time input type can be used for entering a time (hours and minutes).

Browser may use 12- or 24-hour format for inputting times, based on local system’s time setting. Select Time:

<form>
    <label for="mytime">Select Time:</label>
    <input type="time" id="mytime">
</form>

Input Type URL

The url input type can be used for entering URL’s or web addresses. Enter Website URL:

<form>
    <label for="myurl">Enter Website URL:</label>
    <input type="url" id="myurl">
</form>

There are few more tags for input like -search, tel etc.

New HTML 5 Attributes

Html 5 provides you new built in attributes those can be used for validation, rules and other activities few of them are as follows –

The maxlength & minlength Attribute

The input maxlength and minlength attribute specifies the maximum and minimum number of characters allowed in an input field.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" minlength="5" maxlength="20" size="50"><br>
</form>

min and max Attributes

The input min and max attributes specify the minimum and maximum values for an input field.It work with the following input types: number, range, date etc.

<form>
  <label for="Price">Price:</label><br>
  <input type="number"  min="5" max="20" size="50"><br>
</form>

multiple Attribute

The input multiple attribute specifies that the user is allowed to enter more than one value in an input field.The multiple attribute works with the following input types: email, and file.

<form>
  <label for="filename">Select File:</label><br>
  <input type="file"  multiple><br>
</form>

The pattern Attribute

The input pattern attribute specifies a regular expression that the input field’s value is checked against. The pattern attribute works with the following input types: text, search, url, tel, email etc.

<form>
  <label >Enter 10 digit mobile no</label><br>
  <input type="number" pattern="^\d{10}$"><br>
</form>

You can create the patterns using various operators few of them are as follows –

^ :- is used to start of expression
$ :- is used to end of the expression
\d:- {no1,no2} – digits repeated from no1 to no2
\w:- {no} – alphanumeric repeated for no.
[range] :- allow you to specify range

e.g. ^\d{5}\w{3}[a-f]$ – it accept 5 digits, three alphanumeric characters and on character from a to f.

placeholder Attribute

The input placeholder attribute specifies short a hint that describes the expected value of an input field (a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.

<form>
  <label for="Price">Price:</label><br>
  <input placeholder="Enter Price" type="number"  min="5" max="20" size="50"><br>
  <label >Enter 10 digit mobile no</label><br>
  <input placeholder="enter mobile no" type="number" pattern="^\d{10}$"><br>
</form>

required Attribute

The input required attribute specifies that an input field must be filled out before submitting the form. The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <label for="password">Password:</label>
  <input type="text" id="password" name="password" required>
</form>

step Attribute

The input step attribute specifies the legal number intervals for an input field.
Example: if step=”3″, legal numbers could be -3, 0, 3, 6, etc. It can be used with number and range tag.

<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>

autofocus Attribute

The input autofocus attribute specifies that an input field should automatically get focus when the page loads. 

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

autocomplete Attribute

The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.

<form action="/action_page.php" autocomplete="on">
  <label for="uname">uname:</label>
  <input type="text" id="uname" name="uname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

In next article we will study for no need of plugins and built in graphics.

« Prev