HTML ELEMENTS

❮ Prev Next ❯

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

<h1>I am h1 heading.</h1>
<p>I am first paragraph.</p>
<br>
<img src="rabbit.jpg" alt="Rabbit">

▶ Run the code

Note: 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 elements. It has only attributes. Few empty elements are <br> ,<hr>,<img> etc.

Example:

<p>This a paragraph with line <br> break at the word line.</p>

▶ Run the code

<p>I am first paragraph.</p>
<hr>
<p>I am second paragraph.</p>

▶ Run the code

<img src="flower.jpg">

▶ 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>

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

❮ Prev Next ❯