HTML5 Elements

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:

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

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 <br>
Janakpuri <br>
District Center <br>
</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>
<p> This is the contents of the article element </p>
</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
<b> </b> This element is used for bold the text . when you copy and paste the example you can see the difference.
Example:

<b> Welcome </b>

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:

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

Example with rtl:

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

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

<p> <big> Welcome to our website </big> </p>

10) 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>

11) Break Line
<br> This is very simple to use. Its used for break the single line.
Example:

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

12) 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

<p> Welcome to India </p>



13) Italic Text
<i> </i> this element is used for Italic the Text.
Example:
<p> Lorem Ipsum is simply dummy text of <i> the printing and typesetting </i> industry. </p>


14) Underlined Text
<u> </u> This element is used for underline the text.
Example:
<p> Lorem Ipsum is simply dummy text of <u> the printing and typesetting </u> industry. </p>


15) 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:
<p> Lorem Ipsum is simply dummy text of <tt> the printing and typesetting </tt> industry. </p>


16) Deleted Text
<del> </del> this is used for display the deleted text
Example:
<p> Lorem Ipsum is simply dummy text of <del> the printing and typesetting </del> industry. </p>


17) Superscript Text
<sup> </sup> this element defines superscript text. Superscript text appears half a character above the font size of text.
Example:
<p> Lorem Ipsum is simply dummy text of the printing and <sup> typesetting </sup> industry. </p>


18) Subscript Text
<sub> </sub> this element defines subscript text. Subscript text appears half a character below the font size of text.
Example:
<p> Lorem Ipsum is simply dummy text of the printing and <sub> typesetting </sub> industry. </p>


19) Smaller Text
<small> </small> This is element defines small text is displayed one font size smaller than the rest of text
Example:
<p> Lorem Ipsum is simply dummy text of the printing and <sub> typesetting </sub> industry. </p>


20) Emphasized Text
<em> </em> this is used for display the deleted text
Example:
<p> Lorem Ipsum is simply dummy text of the printing and <em> typesetting </em> industry. </p>


21) Smaller Text

<small> </small> This element defines small text is displayed one font size smaller than the rest of text

Example:

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


22) Sample Text

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

Example:

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


23) Keyboard Input

<kbd> </kbd> This element is used for display keyboard input.

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


24) Variable

<var> element is used to defines a variable.

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


25) 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>


26) 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>
<p> Web Designing and App Development Company </p>
</plaintext>


27) Nobr

<nobr> </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:
<p> Our telephone number is <nobr> 0900 123 xxx 123 </nobr> </p>

<p style=”width:100px;”> Our Telephone Number is <nobr> 0800 123 xxx 123 </nobr>. </p>


28) wbr (Word Break Opportunity)

<wbr> It is useful for creating breaks in long words or addresses when a window is resized.

Example:
<p> This is a very <wbr> long word that will break at specific <wbr> places when the browser window is resized. </p>


29) <xmp>

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

<xmp>

Stock IDDescriptionPriceQuantity in Stock
................................................
112tata24.5013
118Walkie Talkie40.2044

</xmp>


30) <progress>

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

Example:
Downloading progress
<progress value=”50″ max=”100″> </progress>


31) Marked Text

<mark> </mark> Marked Text This element is used for displayed as marked text with yellow color.

Example:
<p> Lorem Ipsum is simply dummy text of the printing and <mark> typesetting </mark> industry. </p>


32) 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>


33) 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>


Leave a Reply

avatar
  Subscribe  
Notify of