HTML Elements

HTML Elements are the tag as a entire, so this take in the opening tag, the text within and then the closing tag as well. The only role of elements where it can start to become tricky is when you have elements appearing within elements, however, if you practice this section a lot you will then acquire it's not tricky if you know where to put the element codes.

<!DOCTYPE html> 
<html> 
 <head> 
  <title>HTML Elements</title> 
</head> 
 <body> 
   <h2>Heading Tag</h2> 
   <p>Paragraph Tag</p> 
   <p style="color: blue;">The style is attribute of paragraph tag</p> 
   <span>The element contains tag, attribute and content</span> 
 </body> 
</html>
  Try it Yourself

Void Elements : In HTML all elements does not require the start and eng tag are called the void elements in html. Some of Void Elements in HTML

are <br> (represent the line break) and <hr> (represent the horizontal line). These html elements are also called unpaired tag and empty tags.

Nested HTML Elements: HTML can be nested, which means an element can contain in another element.

in HTML, all the elements are divided into two parts based on their default display and styling purpose are given below.

  1. Block-level Elements
  2. Inline Elements

Block-level element :

  • The elements, which are the structure of the main part of a web page, by dividing a page into coherent blocks.
  • A block-level element always starts with a new line and takes the full width of the web page, from left to right.
  • The block level elements could contain the block-level as well as inline elements.

Some of the block-level elements examples in HTML are given below.

<address>  <article> <aside> <blockquote>  <canvas>

 <dd> <div>  <dl>  <dt> <fieldset> <figcaption> <figure> <footer>

 <form> <h1> to <h6> <header> <li> <main>

<output> <p> <section>

Example :

<!DOCTYPE html>  
<html>  
<head>
  <title>Block Level Elements</title>
</head>  
<body>  
    <div style="background-color: tomato;">This is div tag. This is block level element.</div>  
    <div style="background-color: pink;">This is another div tag. This is block level element.</div>  
    <p style="background-color: green;color:white;">This is also a block level element</p>  
</body>  
</html>
  Try it Yourself

Inline elements

  • The Inline elements are those elements, which differentiate the part of a given text and provide it with a particular function.
  • Inline elements do not start with a new line and take width as per requirement.
  • The Inline elements are mostly used inside the block level elements.

<a> <abbr> <acronym> <b> <bdo> <big>

 <br> <button> <cite> <code> <dfn> <em>

 <i> <img> <input> <kbd> <label> <map>

 <object> <q> <samp> <script> <select>

 <small> <span> <strong> <sub> <sup>

 <textarea> <time>  <tt>  <var> 

Example :

<!DOCTYPE html>  
<html>  
<head>  
  <title>Inline Level Elements Example</title>
</head>  
<body>  
    <a href="default.html">Click on link and Inline Elements</a>  
    <span style="background-color:tomato;">this is inline element</span>  
    <p>This p tag is block level element and contain the <span style="background-color:lightblue;">inline element</span>  inside.</p>  
 </body>  
</html>
  Try it Yourself

Prev

HTML Attributes

Next

HTML Formatting