View Categories

HTML Elements

Table of Contents

An HTML element is a collection of start and end tags with content inserted between them. HTML elements are the building blocks of web pages, representing various types of content such as headings, paragraphs, links, and images.

What Are HTML Elements? #

HTML (Hypertext Markup Language) is the foundation of web development, allowing us to create structured and interactive web pages. In this guide, we’ll explore the important aspects of HTML elements, their syntax, and best practices.

Syntax:

<tagname> Contents... </tagname>

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 is considered best practice to use lowercase tags for consistency.

HTML Element Structure #

ComponentDescription
Opening tagIndicates where the content begins: <tagname>.
Closing tagIndicates where the content ends: </tagname>.
ContentThe actual content inside the opening and closing tags.

Combining these three parts results in a complete HTML element.

Example 1: Basic HTML Element #

In the example below, <p> is the starting tag, </p> is the ending tag, and it contains content between the tags, forming a complete element.

<!DOCTYPE html>
<html>

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

<body>
    <p>Welcome to the website!</p>
</body>

</html>

Nested HTML Elements #

When one HTML element is placed inside another, it’s referred to as a nested element. For example, the <html> tag contains both the <head> and <body> tags, forming a nested structure.

Example 2: Nested HTML Elements

<!DOCTYPE html>
<html>

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

<body style="text-align: center">
    <h1>Website Title</h1>
    <p>Information about the site</p>

</body>

</html>

Importance of the Closing Tag #

It’s important to include the closing tag for an HTML element to ensure that the content displays correctly. Modern browsers are forgiving and might not throw an error if a closing tag is missing, but this can cause issues when additional HTML elements are added later. To avoid complications, always include the closing tag for non-void HTML elements.

Example 3: Missing Closing Tag

<!DOCTYPE html>
<html>

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

<body>
    <h2>Welcome to the Site</h2>
    <p>Hi there!
</body>

</html>

Note: The missing closing tag for the paragraph element is automatically added by modern browsers without showing any error.

HTML Empty Elements #

HTML elements without any content are called empty elements. These elements do not have a closing tag. Common empty elements include <br>, <hr>, <link>, and <input>.

Example 4: Empty HTML Element

<!DOCTYPE html>
<html>

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

<body>
    <h2>Welcome to the Site</h2>
    <br />
    <p>Hello, user.</p>

</body>

</html>

Supported Browsers: #

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Opera
  • Safari

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment