HTML Elements

Learn what HTML elements are, understand their structure, and explore common elements used to build web pages.

What is an HTML Element?

An HTML element is a building block of an HTML document. It defines a particular part of the content or structure of a web page.

HTML elements are represented using tags. Many elements contain an opening tag, content, and a closing tag.

Simple Definition: An HTML element is a complete HTML structure consisting of tags and content that represents a part of a web page.

Basic Structure of an HTML Element

<tagname>Content</tagname>

Example:

<p>This is a paragraph.</p>

Part	Example	Purpose
Opening Tag	`<p>`	Marks the beginning of the element.
Content	`This is a paragraph.`	Represents the content of the element.
Closing Tag	`</p>`	Marks the end of the element.

Opening Tag and Closing Tag

Most HTML elements have both an opening tag and a closing tag.

<h1>Welcome to HTML</h1>

Opening Tag

<h1> tells the browser that a heading element is starting.

Closing Tag

</h1> tells the browser that the heading element has ended.

Nested HTML Elements

HTML elements can be placed inside other HTML elements. This is called nesting.

<div>

    <h1>Welcome</h1>

    <p>
        Learn HTML at CIIT Institute.
    </p>

</div>

In this example, the <h1> and <p> elements are nested inside the <div> element.

Important: Proper nesting is important for clean and predictable HTML structure.

Empty HTML Elements

Some HTML elements do not contain content and do not require a separate closing tag. These are commonly called empty or void elements.

<br>

<hr>

<img src="image.jpg" alt="Example Image">

Element	Purpose
`<br>`	Creates a line break.
`<hr>`	Creates a thematic horizontal rule.
`<img>`	Displays an image.

Common HTML Elements

Element	Example	Purpose
`<h1>`	`<h1>Title</h1>`	Creates a main heading.
`<p>`	`<p>Text</p>`	Creates a paragraph.
`<a>`	`<a href="#">Link</a>`	Creates a hyperlink.
`<img>`	`<img src="image.jpg" alt="Image">`	Displays an image.
`<ul>`	`<ul>...</ul>`	Creates an unordered list.
`<ol>`	`<ol>...</ol>`	Creates an ordered list.
`<table>`	`<table>...</table>`	Creates a table.
`<form>`	`<form>...</form>`	Creates a form.
`<div>`	`<div>Content</div>`	Creates a generic block container.
`<span>`	`<span>Text</span>`	Creates a generic inline container.

HTML Elements with Attributes

HTML elements can contain attributes that provide additional information about the element.

<a href="https://example.com">
    Visit Website
</a>

Here, the href attribute specifies the destination of the hyperlink.

Block and Inline Elements

HTML elements can be broadly described as block-level or inline elements based on their normal layout behavior.

Block-Level Elements

These normally start on a new line and occupy the available width.

Examples: <div>, <p>, <h1>, <section>

Inline Elements

These normally flow within the surrounding text.

Examples: <span>, <a>, <strong>

Complete Example

<!DOCTYPE html>

<html>

<head>

    <title>HTML Elements Example</title>

</head>

<body>

    <h1>CIIT Institute</h1>

    <p>
        Learn HTML step-by-step.
    </p>

    <a href="#">
        Learn More
    </a>

    <hr>

    <div>

        <span>
            HTML Elements
        </span>

    </div>

</body>

</html>

Output

CIIT Institute

Learn HTML step-by-step.

Learn More

HTML Elements

Important Points

HTML elements are the building blocks of HTML documents.
Most elements have opening and closing tags.
Elements can be nested inside other elements.
Some elements are empty or void elements.
HTML elements can contain attributes.
Proper nesting helps maintain a clear document structure.

Practice Exercise

Create a heading using <h1>.
Create a paragraph using <p>.
Add a link using <a>.
Add an image using <img>.
Add a horizontal rule using <hr>.
Place a paragraph inside a <div>.

Summary

HTML elements are the fundamental building blocks of web pages. They define content and structure using tags. Elements can be nested, can contain attributes, and may be either normal elements with opening and closing tags or empty elements such as <br> and <img>.

← Previous: Basic HTML Next: HTML Attributes →