The abbr element represents an abbreviation.
When using this element, you use the title attribute to provide the
expanded text that the abbreviation represents.
The following code shows the abbr element in use.
<!DOCTYPE HTML>
<html>
<body>
The <abbr title="Cascading Style Sheets">CSS</abbr>
is a style sheet language used for describing the
look and formatting of a document written in a markup language.
</body>
</html>
The address element marks contact information for a document or article element.
When the address element is a descendant
of an article element, it is assumed to provide contact information for that article.
When an address element is a child of a body element
and there is no article element between the body and address elements,
the address is assumed to provide contact information for the entire document.
You should not use this element to mark addresses of customers or users.
The following code shows the address element in use.
... <body> <header> <h1>Things I like</h1> <h2>by java2s.com</h2> <address> Questions and comments? <a href="mailto:info@example.com">Email me</a> </address> </header> <article> <header> <hgroup>
The b element marks a span of text indicating any extra emphasis or importance.
The style convention for b element is b{font-weight:bolder;}.
The following code shows the b element in use.
<!DOCTYPE HTML>
<html>
<body>
I like <b>HTML</b> and <b>CSS</b>.
</body>
</html>
The bdi element marks text that is isolated from other
content for the purposes of text directionality.
You use this element when displaying content for which there is no directionality information available. The browser determines the directionality automatically.
The following code deals with Text Without the bdi Element.
<!DOCTYPE HTML>
<html>
<body>
<p>
<bdi>abcd</bdi>
</p>
</body>
</html>
The bdo element specifies an explicit text direction for
its content, overriding the automatic directionality that would usually be applied.
We must use the bdo element with the dir attribute,
which has the allowed values of rtl (for right- to-left layout) and
ltr (for left-to-right layout).
The following code uses the bdo Element.
<!DOCTYPE HTML>
<html>
<body>
<p>
This is left-to-right:
<bdo dir="ltr">This is a test</bdo>
</p><!--from w w w. j ava2 s .co m-->
<p>
This is right-to-left:
<bdo dir="rtl">This is a test</bdo>
</p>
</body>
</html>
There are two elements that you can use to deal with line breaks in content:
the br and wbr elements.
The br element introduces a line break.
The style convention is to move subsequent content onto a new line.
The br element may be used only when line breaks are part of the content.
The br element should not be used to create paragraphs or other
groupings of content.
The following code uses the br Element.
<!DOCTYPE HTML>
<html>
<body>
I like
<br /> HTML,
<br /> CSS,
<br> Javascript.
</body>
</html>
The cite element denotes the title of a cited work,
such a book, article or film.
Its style Convention is cite { font-style: italic; }.
The following code shows the use of the cite element.
<!DOCTYPE HTML>
<html>
<body>
My favorite is <cite>CSS</cite> by http://en.wikipedia.org.
</body>
</html>
code element marks a fragment of computer code.
Its default style is {font-family: monospace;}
The following code shows how to use code element.
<!DOCTYPE HTML>
<html>
<body>
This is a <code>test</code>.
</body>
</html>
You can mark removed text using the del elements.
The del element has two local attributes:cite, datetime.
The cite attribute specifies a URL to a document
that explains why the text was removed,
and the datetime attribute specifies when the modification was made.
You can see the del elements in use in the following code.
<!DOCTYPE HTML>
<html>
<body>
<p><ins>I like <del>HTML</del>.</ins></p>
</body>
</html>
The dfn element defines a term.
It explains the meaning or significance of a word or phrase.
If the dfn element has a title attribute,
then the value of the title attribute must be the term that is being defined.
You can see an example of a dfn element being used in the following code.
<!DOCTYPE HTML>
<html>
<body>
<p>
The <dfn title="Cascading Style Sheets">CSS</dfn>
is a style sheet language used for describing the
look and formatting of a document written in a markup language.
</p><!-- w ww. ja va2 s . c om-->
</body>
</html>
If the dfn element contains an abbr element,
then the abbreviation is the term that is being defined.
If there is no title attribute and the contents of the element are text,
then the text represents the term being defined.
There is no style convention associated with this element.
The em element represents a span of text with emphatic stress.
The styling convention for this element is to use italics.
The following code shows the em element in use.
<!DOCTYPE HTML>
<html>
<body>
<em>I</em> like <b>HTML</b> and <b>CSS</b>.
</body>
</html>
The i element denotes text that
has a different nature from the surrounding content,
for example, words from other languages, a technical or
scientific terms.
The style convention for i element is i{font-style:italic;}.
The style convention for the i element is
the same as for the em element.
The following code shows the i element in use.
<!DOCTYPE HTML>
<html>
<body>
<em>I</em> like <b>HTML</b> and <b>CSS</b>.
My favorite is <i>Javascript</i>.
</body>
</html>
You can mark addedtext using the ins elements.
The ins element denotes inserted content,
with local Attributes:cite, datetime.
The cite attribute specifies a URL to a document
that explains why the text was added,
and the datetime attribute specifies when the modification was made.
You can see the ins element in use in the following code.
<!DOCTYPE HTML>
<html>
<body>
<p>
<ins>I like <mark>HTML</mark>.</ins>
</p>
</body>
</html>
kbd Element denotes user input.
kbd has the following style { font-family: monospace; }.
The following code shows how to use kbd Element.
<!DOCTYPE HTML>
<html>
<body>
This is an <kbd>input</kbd>.
</body>
</html>
The mark element is new to HTML5 and
represents a highlighted text.
The following code demonstrates the mark element.
<!DOCTYPE HTML>
<html>
<body>
<p>
I like <mark>CSS</mark>.
</p>
</body>
</html>Ruby characters are notations placed above or to the right of characters in logographic languages such as Chinese or Japanese to help the reader to correctly pronounce the characters.
The ruby element denotes a span of text
that contains a ruby.
You use the ruby element in conjunction with
the rt and rp elements.
The rt element marks the ruby notation,
and the rp element denotes parentheses around an annotation that can
be displayed by browsers that don't support ruby annotations.
The following code uses English text to demonstrate how ruby annotations are displayed by the browser.
<!DOCTYPE HTML>
<html>
<body>
<p>I like
<ruby>
CSS<!-- w ww. ja v a 2 s. co m-->
<rp>(</rp>
<rt>Cascading Style Sheets</rt>
<rp>)</rp>
</ruby>
</p>
</body>
</html>
When the document is displayed in a browser that supports ruby annotations,
the rp elements and their contents are ignored, and the
contents of the rt element is displayed as an annotation.
You use the s element to mark text
that is no longer correct or accurate.
The style convention is to display the text with a line drawn through it:
s{text-decoration:line-through;}.
The following code shows the s element in use.
<!DOCTYPE HTML>
<html>
<body>
HTML is now <s>HTML4</s> HTML5.
</body>
</html>
samp element denotes output from a program or computer system.
It has the following default style: { font-family: monospace; }.
The following code shows how to use samp Element.
<!DOCTYPE HTML>
<html>
<body>
This is a <samp>sample</samp>.
</body>
</html>
The small element marks fine print and
is often used for disclaimers and clarifications.
The following code shows the small element in use.
<!DOCTYPE HTML>
<html>
<body>
HTML5 is <small>good</small>.
</body>
</html>
The strong element marks important text.
The strong element has the same
style convention as the b element.
The following code shows the strong element in use.
<!DOCTYPE HTML>
<html>
<body>
<strong>Warning:</strong> HTML5 is good.
</body>
</html>
You use the sub and sup elements
to denote subscripts and superscripts, respectively.
Superscripts are required in some languages and both superscripts and subscripts are used in simple math expressions.
The following code shows the sub and sup elements in use.
<!DOCTYPE HTML>
<html>
<body>
The point x<sub>10</sub> is the 10<sup>th</sup> point.
</body>
</html>
You can use the time element to represent a time or a date.
The time element has two local attributes:datetime, pubdate .
If the Boolean pubdate attribute is present,
then the time element is assumed to be the publication date of
the entire HTML document or the nearest article element.
The datetime attribute specifies the date or time
in a format specified by RFC3339, which you can find at http://tools.ietf.org/html/rfc3339.
The following code shows the time element in use.
<!DOCTYPE HTML>
<html>
<body>
I bought a book at<!--from www.j a va 2 s . co m-->
<time datetime="15:00">3 o'clock</time>
on
<time datetime="2012-12-7">December 7th</time>
.
</body>
</html>
The u element marks text by adding underline.
Its style Convention:u { text-decoration:underline;}.
The style convention for the u
element is similar to that for the a element.
The following code shows the u element in use.
<!DOCTYPE HTML>
<html>
<body>
<u>HTML5</u> is good.
</body>
</html>
var element marks a variable in a programming context.
The default style for var is { font-style: italic; }.
The following code shows how to use var Element.
<!DOCTYPE HTML>
<html>
<body>
This is a <var>variable</var>.
</body>
</html>wbr is called a Safe Line Break.
The wbr element is new to HTML5 and
indicates where the browser could reasonably insert a line break to
wrap content that is larger than the current browser window.
It is the browser that makes the decision as to whether or
not a line break is actually used.
The wbr element is a guide to suitable places to break content.
The following code shows the use of the wbr element.
<!DOCTYPE HTML>
<html>
<body>
This is a test: Super<!--from www . ja v a 2 s . c o m-->
<wbr>
loooooooooooooooooooooooooong
<wbr>
word.
</body>
</html>