New Tags in HTML5

Introduction

In this article, we will see the various tags that are introduced in HTML5. HTML is HyperText Markup Language (HTML). It is used to create web pages. HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.

Some of the new features/tags in HTML5 are discussed below.

Fieldset

The Fieldset is used to group various elements like textboxes into a single element in a form. The Fieldset tag is supported by all major browsers. It creates a rectangular box around the elements. To set the Fieldset we use a <fieldset> tag in our page and specify the elements which are to be grouped within the fieldset tag.

Example: In this example, we create a fieldset in a form. We used the <legend> tag to define the caption for the <fieldset> element.

Code:

<html>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
First Name: <input type="text"/>
<br/><br/>
Last Name: <input type="text"/>
<br/><br/>
p_Address: <input type="text"/>
</fieldset>
</form>
</body>
</html>

Output:

Figcaption

The Figcaption tag is used to define a caption of a figure element in a form. We can place this element before or after the image element. It is supported by all browers. To define a Figcaption we use a <figcaption> tag in a form.

Example: In this example, we define an image with its caption.

Code:

<html>
<body>
<p>Image with Caption </p>
<figure>
<img src="Penguins.jpg" alt="The Cute Penguins" width="304" height="228" />
<figcaption>Fig.1 - A Beautiful view of the Penguins in Norway.</figcaption>
</figure>
</body>
</html>

Output:

Bdo

The full form of Bdo is Bi-directional Override. It changes the direction of the text that is written within this tag. The Bdo tag is used to override the current text direction. It is also supported by all browsers. We have to direction of the text it display.

Example:

Code:

<html>
<body>
<p>Example of bdo tag in left to right direction.</p>
<p><font><bdo dir="rtl">This paragraph will go right-to-left.</bdo></font></p>
</body>
</html>

Output:

2 Comments

Join the conversation! Your thoughts help the community grow.

Gaurav Gupta14y ago
Thanks.. I will definitely follow..
Former member14y ago
Hi This is really nice article . Please check the below more simple article as same.http://www.dotnetpools.com/Article/ArticleDetiail/?articleId=35&title=FieldSet%20Tag%20In%20HTML5