HTML
supports the following new elements for better structure –
· <section>
- It
defines section in a document such as chapters, headers, footers and any other
section of the document. It is a paired tag
· <header>
-
It is used to display subheadings, version information, navigational elements
etc. It is a paired tag. It cannot be placed within a <footer>.
· <footer>
-
It is used to define footer of an HTML document or section. It is a paired tag.
·
<article>
-
It is used to represent an article. It is an independent content on the
webpage. It is a paired tag.
·
<hgroup>
- It
is used to group a set of one or more h1
to h6 elements. It is a paired
tag.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<hgroup>
<h1>Power of HTML5</h1>
<h2>Introduction to web</h2>
</hgroup>
</body>
</html>
·
<aside>
- It
is used to represent content that is related to surrounding content within an
article or webpage could still stand alone in its own right. It is a paired
tag.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<aside style="font-size:larger;font-style:italic; color:blue; float:left;width:250px">
HTML5 is new hypertext...
</aside>
<p>Some text</p>
</body>
</html>
·
<command>
- It
defines a command that the user can invoke. It is a paired tag. It is only
supported by IE9.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<button onClick="alert('Welcome to events')">ClickMe</button>
<command onClick="alert('Welcome to events')">ClickMe</command>
</body>
</html>
·
<details>
- It
is used to create an interactive widget that the user can open and close. It is
a paired tag.
·
<summary>
- It
defines the visible heading for the <details> element. The heading can be
clicked to view/hide the details. It is a paired tag. It is only supported in
Chrome and Opera.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<details>
<summary style='color:#000FF'>Power of HTML5
</summary>
<ul type="square"
style="color:green;font-family:tahoma;">
<li>File System API's</li>
<li>Geolocation</li>
<li>Device Orientation</li>
</ul></details>
</body>
</html>
·
<figure>
- It
is used to apply a unit of element like images and group of text. It is a
paired tag.
·
<figcaption>
- It
defines a caption for figure element. This element represents a caption or a
legend for a figure. It is a paired key.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<figure>
<img src="tr.jpg" width="300"
height="250"/>
<figcaption>It is codingmakesperfect banner</figcaption>
</figure>
</body>
</html>
·
<nav>
- It
is used to declare navigational section of HTML document. It is a paired key.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<nav>
<a href="http://google.com">Google</a>
<a href="http://flipkart.com">Flipkart</a>
</nav>
</body>
</html>
·
<wbr>
- It
is used to word break opportunity. It is a non paired tag.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<p>To learn HTML5 you must be familar with HTML
<wbr> CSS <wbr>JS</p>
</body>
</html>
·
<bdo>
- It
is used to over-write the current text direction. It can be useful when
displaying Hebrew and other language. It is a paired tag.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<bdo dir="rtl">HTML5 is new hypertext markup language</bdo><p>
<bdo dir="ltr">HTML5 is new hypertext markup language</bdo>
</body>
</html>
·
<bdi>
- Bidirectional
isolation. This can be useful when displaying right to left text. It is a
paired tag.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<ul>
<li>User<bdi>Rakesh</bdi></li>
<li>User<bdi>Pramod</bdi></li>
</ul>
</body>
</html>
·
<ruby>
- It
is used for specifying ruby annotations, which is used in east asian
typography. It is a paired tag.
·
<rt>
- Ruby
text. It marks the ruby text components of a ruby annotation. Ruby annotations
are used in east asian typography. It is a pared tag.
·
<rp>
- The
HTML <rp> is used in ruby annotations for the benefit of browsers that
don’t support ruby annotations. It is a paired tag.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<p><ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>---</p>
</body>
</html>
No comments:
Post a Comment