Introduction
There are a number of new HTML elements that can be used not only in forms, but also in a general webpages. Some of them are <time>, <mark>, <bdi>, <dialog>, <wbr>, <figure> and <figcaption>. We will see all these elements one by one in this section.
<time>
The <time> element represents a human readable date or time. The time element does not render as anything special in any of the major browsers.
Sample Code:
<!DOCTYPE html> <html> <head> <title>Time Example</title> </head> <body> <p>Consultation Time: <time>6:00 PM</time> to <time>8:30 PM</time> </p> <p><time datetime="2016-01-01">New year day</time> will be a holiday.</p> </body> </html>
Output:
<mark>
The <mark> element is used to define text that is marked or highlighted for reference purposes. You can use this to display text that is more relevant compared to surrounding text.
Sample Code:
<!DOCTYPE html> <html> <head> <title>Mark Example</title> </head> <body> <p>This information is really <mark>important</mark> for us.</p> </body> </html>
Output:
<bdi>
The <bdi> element is used to define a part of a text that needs to be isolated for the purpose of bidirectional text formatting. For example, if you want to display text in Arabic or Hebrew (right to left text) inside English content, you can enclose it in <bdi> element.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<style>
bdi
{
font-size:25px;
}
</style>
<meta charset="utf-8">
<title>BDI Example</title>
</head>
<body>
<p><b><bdi>سماء</bdi></b> in Arabic means sky and <b><bdi>أرض</bdi></b> means earth.</p>
</body>
</html>
Output:
<dialog>
The <dialog> element is used to create a dialog box on a webpage. You can add the open attribute if you want to have the dialog box opened as it appears. You can use the show or close functions in JavaScript to show or close the dialog box.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>Dialog Example</title>
<script type="text/JavaScript">
window.onload = function()
{
var dialog = document.getElementById('myDialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
}
</script>
</head>
<body>
<dialog id="myDialog" open style="width:50%;background-color:pink;border:1px solid black;">
<p>This is my first dialog box!!!</p>
<button id="hide">Close</button>
</dialog>
<button id="show">Show Dialog</button>
</div>
</body>
</html>
Output:
<wbr>
You can use the <wbr> element to display lengthy words without any break in between. The wbr stands for word break opportunity. If the width of the browser window is too small to display the text inside the <wbr> element without break, then a scroll bar will appear to make sure that the works is still not broken.
Sample Code:
<!DOCTYPE html> <html> <head> <title>Wbr Example</title> </head> <body> <p><wbr>PNEUMONOULTRAMICROSCOPICSILICOVOLCANOCONIOSIS</wbr> is the longest word in English</p> </body> </html>
Output:
<figure> and <figcaption>
The <figure> element is used to specify self-contained content like photos, diagrams, illustrations etc. While the content of the <figure> element is related to the main flow, its position is independent of the main flow and if removed it should not affect the flow of the document. The <figcaption> element is used to add a caption for the <figure> element. You can place the <figcaption> element as the first or last child of the <figure> element.
Sample Code:
<!DOCTYPE html> <html> <head> <title>Figure Example</title> </head> <body> <p>Here is a cute baby!!! Here is a cute baby!!! Here is a cute baby!!!</p> <figure> <img src="baby.jpg" alt="The Cute Baby" width="304" height="228"> <figcaption>Figure 1.1 - A cute baby laughing at a doll</figcaption> </figure> </body> </html>
Output:
<ruby>, <rp> and <rt>
The <ruby> element is used to define ruby text. Ruby text is a short annotation used to give pronunciation guidance for East Asian characters like Chinese, Korean and Japanese languages. The <rt> element defines the ruby text coming after the base text it defines and <rp> is the ruby parentheses used to wrap opening and closing parentheses around <rt>.
Summary
In this section, we have seen some of the new HTML5 elements that can be used to make your websites more useful and beautiful.