The abbr
element represents an abbreviation.
When using this element, you use the title
attribute to provide the expanded text that the abbreviation represents.
<!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.
<body> <header> <h1>Things I like</h1> <h2>studentsempire</h2> <address> Questions and comments? <a href="mailto:info@studentsempire.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;}
.
<!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.
<!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).
<!DOCTYPE HTML> <html> <body> <p> This is left-to-right: <bdo dir="ltr">This is a test</bdo> </p> <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.
<!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; }
.
<!DOCTYPE HTML> <html> <body> My favorite website to learn <cite>CSS</cite> is http://studentsempire.com </body> </html>
code element marks a fragment of computer code. Its default style is {font-family: monospace;}
<!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.
<!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.
<!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> </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.
The em element represents a span of text with emphatic stress.
The styling convention for this element is to use italics.
<!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.
<!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.
<!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; } .
<!DOCTYPE HTML> <html> <body> This is an <kbd>input</kbd>. </body> </html>
The mark element is new to HTML5 and represents a highlighted text.
<!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.
<!DOCTYPE HTML> <html> <body> <p>I like <ruby> CSS <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:linethrough;}.
<!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; } .
<!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.
<!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.
<!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.
<!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.
<!DOCTYPE HTML> <html> <body> <time datetime="12:00">12 o'clock</time> on <time datetime="2018-12-10">December 10th</time> </body> </html>
The u element marks text by adding underline. Its style Convention: u { textdecoration: underline;} .
The style convention for the u element is similar to that for the a element.
<!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 { fontstyle: italic; } .
<!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.
<!DOCTYPE HTML> <html> <body> <wbr> loooooooooooooooooooooooooong <wbr> </body> </html>