Quick Guide To HTML Elements

Today we are discussing html elements. An HTML element consists of a start tag, a content tag, and a closing tag.

HTML elements are the foundation of web design, providing the structure and content for websites and web applications.

By understanding the purpose and function of each HTML element, you can create beautiful and functional web pages that are easy to navigate and use.

HTML Elements

HTML elements are the building blocks of a web page.

They are defined by HTML tags that are used to structure and format content on a web page.

HTML elements can include:

  • Headings.
  • Images.
  • Links.
  • Paragraphs.
  • Lists.
  • Tables.
  • Forms.
  • And more.

Each element has its own set of properties and attributes that define its appearance, behavior, and functionality.

Everything from the start tag to the end tag is an HTML element:

<tagname>Your content will be placed here.</tagname>

Some HTML elements are as follows:

<h1>Mr-examples First Heading</h1>
<p>This Is mr-examples first paragraph.</p>
Start tagElement contentEnd tag
<h1>Mr-examples First Heading</h1>
<p>This Is mr-examples first paragraph.</p>

HTML Elements
HTML Elements


Please keep in mind that certain HTML components, such as the <br> element, contain no content. These are known as “empty elements“. End tags are not present in empty elements!

Nested HTML Elements

There are no restrictions on how elements are nested in HTML (elements can contain other elements).

Nested HTML elements are common to all HTML documents.

There are four HTML elements in the following example (<html>, <body>, <h1> and <p>):


<!DOCTYPE html> <html> <body><h1>This Is second example Heading</h1> <p>My second example paragraph.</p></body> </html>

Example Explained

The <html> element defines the entire HTML document and is the root element.

The start and end tags are <html> and </html> respectively.

Then there is a <body> element within the <html> element:


<h1>This is my third example Heading</h1>
<p>This Is my third example paragraph.</p>


The <body> element specifies the body of the document. It has a <body> start tag and a </body> end tag.

Then there are two more components within the <body> element:

<h1> and <p>:

<h1>Mr-example fourth Heading</h1>
<p>Mr-example fourth paragraph.</p>

Headings are defined by the <h1> element.

There is a start tag <h1> and an end tag </h1>:

<h1>mr-example fifth Heading</h1>

The <p> element represents a paragraph.

It has a starting tag <p> & ending tag </p>:

<p>My fifth paragraph.</p>

You Should Never Ignore the Closing Tag.

Even if you forget the end tag, certain HTML elements will display correctly:

Example <!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <body><p>This is a example paragraph </p><p>This is a example paragraph</p></body> </html>

Nevertheless, please don’t rely on it! You may receive unexpected results if you forget to end the tag!

Empty HTML Elements

Elements in HTML that have no content are referred to as empty elements.

The <hr> element usually appears as a horizontal line that is used to divide content (or indicate a change) on the page.

The <br> tag, which is used to specify line breaks, is an empty element that does not have a closing tag:


<!DOCTYPE html> <html> <body><p>Its a <br> paragraph with a line break.</p> <p>Its a </p><hr> paragraph with a horizontal line break. </body></html>

Example Explanation:

The HTML code provided above demonstrates how to insert a line break and a horizontal rule in between two paragraphs.

  • The code starts with the <html> tag and contains two <p> tags. The text inside the first <p> tag says “Its a” and is followed by the <br> tag. The <br> tag stands for “line break” and inserts a new line in between the text. The text “paragraph with a line break” is placed on a new line after the <br> tag.
  • The second <p> tag contains the text “Its a” and is followed by the <hr> tag. The <hr> tag stands for “horizontal rule” and inserts a horizontal line in between the text. The text “paragraph with a horizontal line break” is placed below the horizontal line.
  • Using <br> and <hr> tags are useful for formatting text and adding visual separation between different parts of the content. For example, <br> tag can be used to add a line break between paragraphs, or to create spacing between text and images. The <hr> tag can be used to divide the content into different sections, or to visually separate headings and subheadings.

Element Img HTML

In HTML, images are embedded using the <img> tag.

In order to use the img tag, two attributes are required:

  • alt – Provides a substitute text for an image, in case it is not visible due to an error

src – Describes the image’s path


<!DOCTYPE html> <html> <body> <img src="https://mrexamples.com/wp-content/uploads/html_images/img_flower.jpg" alt="Flower" width="300" height="250"> </body> </html>

HTML is Not Case Sensitive

HTML tags are not case sensitive: Both<P> and <p> signify the same thing.

Using HTML tags, it does not matter whether they are in lowercase or uppercase.

As far as the HTML standard is concerned, no lowercase tags are required, but Mr Examples recommends that HTML tags be written in lowercase, and requests lowercase for XHTML documents, which have a stricter format.

We always use lowercase tag names at Mr Examples.

HTML Tag Reference

There is additional information about these tags and their attributes in Mr Examples’ tag reference.

<html>Specifies the starting point of a document in HTML
<body>Describes the main part of the document.
<h1> to <h6>Headings in HTML are defined here.

Visit our HTML Tag Reference if you want a comprehensive list of all of the accessible HTML tags.


An HTML element is the building block of a web page. By defining the structure and content of a web page, they provide a way for browsers to interpret and render that content. The HTML element consists of tags, attributes, and content, and can be nested to create complex structures. It is important for web developers to understand HTML elements and syntax in order to create well-structured, accessible, and easily maintainable web pages.

If this article motivated you to learn about modern technologies, do subscribe to our Newsletter for the latest updates on this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *