HTML 5 Elements

0 4213

HTML5 Elements - Below is a list of elements / tags of HTML5 with brief description, how we can use and what is the use and benefits of these elements / tags.

All elements and tags will be use in body section of html.

1) Abbr
<abbr> </abbr> is an inline element. This element is used for display the title attribute creates a tooltip for the user when they hover their cursor over the element:

Example:

 <abbr title="onTime Infotech is Web Designing Company"> Web Design </abbr> Welcome to onTime Infotech

2) Address Element
<address> <address> This element is used for display the contact information for the author/owner of a document or an article / blog.

Example:

<address>
Vihaan Khanna 
Janakpuri 
District Center 
</address>

3) Article
<article> </article> This element is used for display the content of page. Mostly it is used in Blog post

Example:

<article>
<h1> Title of the blog </h1>
 This is the contents of the article element 
</article>

4) Aside Element
<aside> </aside> This element represent the page content that are related to a aside element.

Example:

<article>
<aside>
Mauris pharetra enim sit amet ipsum dictum placerat.
</aside>
</article>

5) Bold Text
 This element is used for bold the text. When you copy and paste the example you can see the difference.

Example:

 Welcome

6) Base Element
<base> Base element is used to specify a base URL, for relative links. you can set the base URL once at your html page.

Example:

<!DOCTYPE html>
<html>
<head>
<title> HTML base Tag </title>
<base href="http://www.ontimeinfotech.com/images/" >
</head>
<body>
HTML: <img src"images/ontime-offer.gif" class="img-responsive">
</body>
</html>

7) Bdo
<bdo> </bdo> This element is used to override the current text direction.
bdo atributes lrt rtl

Example with lrt:

 <bdo dir="ltr"> Welcome to onTime Infotech </bdo> 

Example with rtl:

 <bdo dir="rtl"> Welcome to our website </bdo>

8) Big
<big> </big> this element is used for display the bigger text. Its very simple

Example:

 <big> Welcome to our website </big>

9) Blockquote
<blockquote> </blockquote> this element is used for long quotation. It specifies that a section is quoted from another source.

Example:

<blockquote> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy </blockquote>

10) Break Line
 This is very simple to use. Its used for break the single line.

Example:

 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy

11) Center
<center> </center>
This element is used for center the text in webpage

Example:

<center> Welcome to India </center> when you copy and paste the example you can see the difference

 Welcome to India

12) Italic Text
 this element is used for Italic the Text.

Example:

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

13) Underlined Text
 This element is used for underline the text.

Example:

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

14) Monospaced Font
<tt> </tt> this element is used for written in mono spaced font. Most of the fonts are known as various-width and height fonts because different letters are of different widths (for example, the letter 'k' is wider than the letter 'i'). when you use mono spaced font each letter will display the same width.

Example:

 Lorem Ipsum is simply dummy text of <tt> the printing and typesetting </tt> industry.

15) Deleted Text
<del> </del> this is used for display the deleted text

Example:

 Lorem Ipsum is simply dummy text of <del> the printing and typesetting </del> industry.

16) Superscript Text
 this element defines superscript text. Superscript text appears half a character above the font size of text.

Example:

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

17) Subscript Text
 this element defines subscript text. Subscript text appears half a character below the font size of text.

Example:

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

18) Smaller Text
 This is element defines small text is displayed one font size smaller than the rest of text

Example:

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

19) Emphasized Text
 this is used for display the deleted text

Example:

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

20) Smaller Text
 This element defines small text is displayed one font size smaller than the rest of text

Example:

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

21) Sample Text
<samp> </samp> This element is used for display the sample output from a computer program.

Example:

 Lorem Ipsum is simply dummy text <samp> select 1024 * 1024 * 1024 * 1024 as "1 Terabyte"; </samp> Lorem Ipsum is simply dummy text

22) Keyboard Input
<kbd> </kbd> This element is used for display keyboard input.

Example:

 Hold down <kbd> CTRL </kbd>, <kbd> ALT </kbd>, and <kbd> DELETE </kbd>, then select Task Manager

23) Variable
<var> element is used to defines a variable.

Example:

 The equations: <var> 5x </var> - <var> 8z </var> = <var> 8a </var> + 4 and <var> x </var> + <var> 8z </var> = <var> 9y </var> + 9

24) Noscript
<noscript> </noscript> This element defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script.

Example:

<script>
document.write("Welcome to onTime Infotech")
</script>
<noscript> Sorry, this browser does not support JavaScript! </noscript>

25) Plaintext
<plaintext> </plaintext> This element is used for display all text in the document exactly as it was typed in, including all tags and even the document tags.

Example:

<plaintext>
<h2> Welcome to onTime Infotech </h2>
 Web Designing and App Development Company 
</plaintext>

26) Nobr
 This element is used to instruct the browser that a section of text should not wrap automatically. The nobr element has good support in modern browsers.

Example:

 Our telephone number is 0900 123 xxx 123 
 Our Telephone Number is 0800 123 xxx 123 .

27) wbr (Word Break Opportunity)
 It is useful for creating breaks in long words or addresses when a window is resized.

Example:

 This is a very long word that will break at specific places when the browser window is resized.

28) <xmp>
<xmp> </xmp> indicates a block of text where all HTML tags are ignored.

<xmp>

Stock ID Description Price Quantity in Stock

112 Tata 24.50 13
118 Walkie Talkie 40.20 44

</xmp>

29) <progress>
The <progress> This element represents the progress of a task.

Example:

Downloading progress
<progress value="50" max="100"> </progress>

30) Marked Text
 Marked Text This element is used for displayed as marked text with yellow color.

Example:

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

31) Pre Text
<pre> </pre> This element is displayed in a fixed-width font and it preserves both spaces and line breaks.

Example:

<pre>
Welcome to onTime Infotech
</pre>

32) Code
Start Tag - <code> and Close Tag - </code> This element is used for indicating a piece of code.

Example:

To create a new array, type the following:

<code>
<?php $variable_name=array[20];
echo $variable_name; ?>;
</code>