HTML5 New Elements

HTML5 New Elements

The HTML5 new elements are discussed below:

The dialog element

The dialog element is used to represent a dialog box. The dialog element also uses an attribute “open” which indicates that the dialog is active. It is used as follows:

EXAMPLE

< ! DOCTYPE html>

< html >

< body >

< dialog open >

< p > We used dialog element < / p >

< / dialog >

< / body >

< / html >

The above example will generate the following result:

the-dialog-element

The main element

The main element is used to represent the main content of the document inside the < body > element. It is used as follows:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< main >

< h1> Main Content < / h1>

This is the main content of the document

< / main >

< / body >

< / html >

This will produce the following result:

the-main-element

The meter element

The meter element is used to represent an element that has some defined maximum and minimum range. It is used as follows:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< p > The charging of mobile phone is 65% < / meter > < / p>

< / body >

< / html >

This will generate the following result:

the-meter-element

In the above example max and min attributes are used with the meter element to show the minimum and maximum values.

As we are referring to the phone battery we considered the minimum value 0% and the maximum value 100%. And set the charging of the mobile phone to 65% and accordingly the bar is displayed.

The progress element

The progress element is used to describe the current status or current progress. For example you are downloading a program and the progress is shown that how much and which file is downloaded.

The progress element also has the max attribute to indicate that at which point the task will be completed. The progress element has also a value attribute to show that what is the current value or what is the current progress. It is used as follows:

EXAMPLE

< ! DOCTYPE html >

< html >

Downloaded File: < progress max = “100” value = “0” > 0% < / progress >

< / html >

This will result as follows:

the-progress-element

Here is the list of other new elements in HTML5:

Elements Uses
< bdi > It is used to define a text that is formatted from other text in different direction.
< article > It is used to define an article in the document.
< main> It represents the main content of the document.
< rp > This is used to provide parenthesis around the ruby text.
< rt > It is used to define the pronunciation of the characters.
< ruby > It defines the ruby annotation. Ruby annotations are used to show pronunciation of characters.
< time > It is used to define time and date.
< nav > It is used to define navigation links in the document.
< section > It is used to define a section in a document.
< figure > It represents a figure, diagram, photos, etc.
< figcaption > It is used to define the caption of the figure.

New Form Elements

In the HTML5, there are some new form elements that are described below:

The Element

This element uses the concept of option element that is it also provides the list of options. This element is used as follows:

EXAMPLE

< p> Choose the car from the list < / p >

< input list= “Cars” name= “MyChoice” / >

< detalist id = “Cars” >

< option value = “BMW” >

< option value = “Ferrari” >

< option value = “Mclaren” >

< option value = “Mercedes-Benz” >

< option value = “Lamborghini” >

< option value = “Jeep” >

< / detalist >

This will produce the following result:

detalist

The keygen element

The keygen element is used to generate keys in an HTML form. As the form using keygen element is submitted there are two keys that are generated; one is the public key and the other is private.

This element is used the web based certificate management. In other words, it provides security and authenticates the users. It is used as follows:

EXAMPLE

< form action = “ http://side.edu/cgi-bin/send-message” >

Email Address: < input type =”text” name =”user” > < br>

Security: < keygen name=”security” > < br >

< button name = “button” > Submit< / button >

< / form >

< / body >

< / html >

This will generate the following result:

the-keygen-element

The keygen element used the attribute name that has assigned the value security this will generate two keys a public that is to be send to the server and a private that will not be shown. There are two options High grade and medium grade.

The output element

The output element is used in HTML forms to display the result obtained by certain calculations. It is used as follows:

EXAMPLE:

+

=

90

This will result as follows:

the-output-element

In the above example the input type is numeric type that is you can insert numbers that are saved in b and a and after their addition, the output result is shown.

New Input Types

There are various input types that are added to HTML5, these have been explained earlier. The new input types are as follows:

  • Input Type Number
  • Input Type Date
  • Input Type Color
  • Input Type Range
  • Input Type Month
  • Input Type Week
  • Input Type Time
  • Input Type Datetime-Local
  • Input Type Email
  • Input Type Search
  • Input Type Tel
  • Input Type URL

These input types have been explained earlier.

New Input Attributes

The new input attributes are listed below and have been explained in detail earlier in the previous section:

  • The autocomplete attribute
  • The novalidate attribute
  • The autofocus attribute
  • The form attribute
  • The formaction attribute
  • The formenctype attribute
  • The formmethod attribute
  • The formtarget attribute
  • The height and width attribute
  • The list attribute
  • The min and max attribute
  • The multiple attribute
  • The pattern attribute
  • The placeholder attribute
  • The required attribute
  • The step attribute

HTML5 New attributes Syntax

There are four different ways to use the attributes in the HTML5 document. These are as follows:

Empty

It is used as follows:

< ! DOCTYPE >

< html >

< body >

< input type = “text” value = “Abraham” disabled >

< / body >

< / html >

This will produce the following result:

html5-new-attributes-syntax

Unquoted

It is demonstrated in the following example:

EXAMPLE

< ! DOCTYPE >

< html>

< input type = “text” value = Abraham >

< / body>

< / html >

This will produce the following result:

unquoted

Double-quoted

It is demonstrated in the following example:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< input type = “text” value = “Abraham” >

< / body >

< / html >

This will produce the same result as the unquoted:

double-quoted

Single quoted

It is used as follows:

< ! DOCTYPE html >

< html >

< body >

< input type = “text” value = ‘Abraham’ >

< / body >

< / html >

This method will also produce the same result as double quoted and unquoted:

single-quoted

HTML5 Graphics

In an HTML5 document, we have two elements that are related to the HTML graphics. These are as follows:

< canvas>

The canvas element

The canvas element is used to draw graphics using JavaScript. It will be explained in detail later.

The SVG element

SVG stands for Scalable Vector Graphics is used to define 2D graphic. It will be discussed in detail later.

HTML5 Media Elements

The following are the new media elements that are added in the HTML5 document:

The < audio> element

The < audio > element is used to set any audio in the document using the element or the src attribute. It is used as follows:

EXAMPLE:

< ! DOCTYPE html >

< html >

< body >

< audio controls >

< source src = “http://picosong.com/media/songs/60577d7fe9f749a8eb89220b1ce68904.mp3″ type =”audio/mpeg” >

< / audio >

< p > The downloadable file will appear and you can download the ringtone < / p >

< / body >

< / html >

This will result as follows:

audio

With a dialog box asking you to download the audio or not. The dialog box is as follows:

dialog-box

The embed Element

The embed element is used to display a container that can have external applications. The embed element can have the height, src, width and type attributes. It is used as follows:

EXAMPLE:

< ! DOCTYPE html >

< html >

< body >

< embed src = “http://images.all-free download.com/images/graphicthumb/sunflowers_and_a_hill_595769.jpg” width = “301” height = “200” / >

< / body >

< / html >

The following result will be generated:

the-embed-element

The source element

The source element is used to define the source of the multi media that may have , < audio >, and < video > elements. It is used as follows:

EXAMPLE:

< ! DOCTYPE html >

< html >

< body >

< audio controls >

< source src = “http://picosong.com/media/songs/60577d7fe9f749a8eb89220b1ce68904.mp3″ type =”audio/mpeg” >

< / audio >

< p > The downloadable file will appear and you can download the ringtone < / p >

< / body >

In the above example, we used the source element to define or to include the source of our audio. The link or the URL is provided to the src attribute.

The track element

The track element is used with the video and audio elements to add subtitles, caption, chapters, description, etc. It is used as follows:

EXAMPLE:

< ! DOCTYPE html >

< html >

< body >

< video controls poster = “http://i.imgur.com/egzJbiI.gif” >

< source src = “sample.mp4” type = “video/mp4” >

< track kind = “captions” src = “sampleCaptions.vtt” srclang = “en” >

< / video >

< / body >

< / html >

In the above example the attribute kind has been used. Kind attribute is assigned the value caption, we can also assign other values such as chapter, description, subtitles and metadata.

This will produce the following result:

the-track-element

The video element

The video element is used to define a video. It is used as follows:

EXAMPLE:

The result of the above example is as follows:

the-video-element

Prev: HTML5 Semantic Elements
Next: HTML5 Migration