HTML Elements

Last Updated : 07 Nov, 2025

HTML elements are the building blocks of a webpage. They define the structure and content of a web document, such as headings, paragraphs, images, and links. Each element is represented by a start tag, content, and an end tag.

_p_class_text_hello_world_p_

Every HTML element begins with an opening tag and ends with a closing tag.
Elements can contain text, attributes, or other nested elements.
Some elements are self-closing (e.g., <br>, <img>).
The browser reads elements to render the page visually.
Proper nesting of elements ensures valid and accessible HTML.

HTML

<!-- HTML code to illustrate HTML elements -->

<!DOCTYPE html>
<html>

<head>
    <title>HTML Elements</title>
</head>

<body>
    <p>Welcome to GeeksforGeeks!</p>
</body>

</html>

Syntax:

<tagname >Your Contents... </tagname>

Some Key Points About HTML Elements

1. Syntax:

An opening tag indicates where the content begins: <tagname>.
A closing tag indicates where the content ends: </tagname>.
The actual content resides between the opening and closing tags.

2. Case Sensitivity:

HTML tags are not case-sensitive. For example, <B> and <b> both represent bold text.
However, it’s a best practice to use lowercase tags for consistency and readability.

Nested HTML Elements

Nested HTML Elements occur when one element is placed inside another, creating a hierarchical structure. This structure is crucial for organizing content on web pages effectively, ensuring that different elements relate logically and visually to each other.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML Elements</title>
</head>

<body style="text-align: center">
    <h1>GeeksforGeeks</h1>
    <p>Computer science portal</p>

</body>

</html>

Here, the <html> tag contains the <head> and <body>. The <head> and <body> tag contain other elements so it is called a nested element.

Necessary to Add an End Tag

For non-empty HTML elements, if you forget to add a closing or end tag, modern browsers may automatically add it in some cases.

However, this can cause issues when you add additional HTML elements later on. Therefore, it is best practice to always include the closing tag for non-void HTML elements.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML Elements</title>
</head>

<body>
    <h2>Welcome To GeeksforGeeks</h2>
    
    <p>Hi Geeks!

</body>

</html>

Output: This Image is showing the Browser's Developer Tools and you can see that the missing closing tag of the paragraph element in the above-written code is automatically added by the browser without showing any error.

add

HTML Empty Element

HTML Elements without any content i.e., that do not print anything are called Empty elements. Empty HTML elements do not have an ending tag. For instance. <br>, <hr>, <link>, <input> etc are HTML elements.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Empty HTML Elements</title>
</head>

<body>
    <h2>Welcome To GfG</h2>
    <br />
    <p>Hello Geeks.</p>

</body>

</html>

Block-Level Elements and Inline Elements

In HTML, elements are broadly categorized into two main types based on how they display in the document layout: block-level elements and inline elements.

1. Block-Level Elements

Block-level elements typically start on a new line and take up the full width available to them, regardless of their actual content width. This means they stack vertically and can contain other block-level elements as well as inline elements. Here are some examples of block-level elements:

Examples

<div>: A general-purpose container for other elements.
<p>: Defines a paragraph.
<h1>, <h2>, ..., <h6>: Heading elements of different levels.
<ol>, <ul>: Ordered and unordered lists.
<table>: Defines a table.
<form>: Used for HTML forms to collect user inputs.
<section>, <article>, <nav>, <aside>, <header>, <footer>: Semantic elements that define areas of a webpage.

2. Inline Elements

Inline elements do not start on a new line; they appear on the same line as adjacent content, as long as there is space. They only take up as much width as their content requires. Inline elements are typically used within block-level elements to add content or style. Here are some examples of inline elements:

Examples

<span>: A general-purpose inline container for phrasing content.
<a>: Creates hyperlinks.
<img>: Embeds an image.
<strong>, <b>: Used for strong emphasis and bold text, respectively.
<em>, <i>: Used for emphasis and italic text, respectively.
<br>: Inserts a line break within text.
<input>: Creates interactive controls for forms.

To know more about Block-Level Elements and Inline Elements, refer to this article.

HTML Elements in Web Development

N

Improve

Article Tags :

Explore