tutorialstonight logo
A Platform To Learn To Code

HTML ELEMENTS



HTML Elements are individual components of HTML which is used to define the structure of a web page or HTML document. It consists of a starting tag,attributes,contents and ending tag.

Syntax:

<tag> You content... </tag>

Here is the syntax of the HTML attribute.(Take your mouse pointer to the specific part of the element below and it will show what part is that of the element.)

<p class="my_class">I am a paragraph.</p>

Syntax explanation:

  • First part <p> specifies starting tag of the element.
  • Within the starting tag we have a class which is an attribute of the element. Its not necessary that attribute is class only it could be style,title,id etc.We will study the HTML attribute in the next chapter.
  • Next we have my_class which is the value of the attribute.
  • Within the starting tag and ending tag we insert our content.
  • In the last </p> represent closing of elements.


HTML elements list

HTML has a number of elements. Some of the elements are listed below:

  • HTML headings denoted by <h1>, <h2>, <h3>, <h4>, <h5> and <h6> .
  • A Paragraph denoted by <p>.
  • A line break denoted by <br>
  • Anchor element denoted by <a>.
  • An image, denoted by <img>.
  • A list denoted by <ol> (ordered list), <ul>, (ordered list) and <li> (list element).

Example

Run the code

Every element that starts must be closed except empty elements.

HTML empty element

There are few HTML elements which are empty also known as void elements.

Void elements have no content and are self closing. It has only attributes. Few empty elements are <br> ,<hr>,<img> etc.

Example:

Example

Run the code

Example

Run the code

Example

Run the code

Difference in HTML Elements and Tags

HTML element is combination of starting tag,attribute, content and ending tag whereas HTML tags are markup to start or end the tag.

In the following table the first column and third column specify tag and combining all three we have an HTML element.

Starting tag Content Ending tag
<p> I am a paragraph </p>
<h1 style="color:green"> I am the heading </h1>
<pre> I am content of pre tag </pre>
<hr>
<br>