Elements

An HTML element is the building block of every web page. Understanding elements is fundamental — everything in HTML is an element.

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

Examples:

<h1>My First Heading</h1>
<p>My first paragraph.</p>
<a href="https://example.com">Visit Example</a>

Start Tag	Content	End Tag
`<h1>`	My First Heading	`</h1>`
`<p>`	My first paragraph.	`</p>`
`<a href="...">`	Visit Example	`</a>`

Nested HTML Elements

HTML elements can be nested — meaning elements can contain other elements. Every HTML document is a nest of elements inside elements.

<!DOCTYPE html>
<html>
<body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

</body>
</html>

Here:

The <html> element is the root — it contains all other elements
The <body> element is inside <html>
The <h1> and <p> elements are inside <body>

Important: Always close elements in the correct order — the last opened element must be the first closed. Wrong: <b><i>text</b></i> — Right: <b><i>text</i></b>

Empty HTML Elements

Some HTML elements have no content and no end tag. These are called empty elements or void elements.

<br>
<hr>
<img src="photo.jpg" alt="Photo">
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

Empty Element	Purpose
`<br>`	Line break
`<hr>`	Horizontal rule / divider
`<img>`	Embed an image
`<input>`	Form input field
`<meta>`	Page metadata
`<link>`	Link external resource (e.g. CSS)

HTML is Not Case Sensitive

HTML tags are not case sensitive. <P> means the same as <p>, and <H1> means the same as <h1>.

<P>This is valid.</P>
<p>This is also valid.</p>

Best Practice: Always write HTML tags in lowercase. The HTML5 standard recommends lowercase, and it is cleaner and more professional.

Do Not Skip End Tags

Some browsers may still display HTML correctly even if you forget end tags — but never rely on this. Missing end tags can cause unexpected errors.

<!-- Wrong (end tag missing) -->
<p>This is a paragraph.
<p>This is another paragraph.

<!-- Correct -->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Common HTML Elements Reference

Element	Description
`<html>`	Root element of the page
`<head>`	Contains meta information
`<title>`	Page title shown in the browser tab
`<body>`	Contains visible page content
`<h1> – <h6>`	Headings (h1 = largest, h6 = smallest)
`<p>`	Paragraph
`<a>`	Hyperlink
`<img>`	Image
`<ul>` / `<ol>`	Unordered / Ordered list
`<li>`	List item
`<table>`	Table
`<div>`	Block-level container
`<span>`	Inline container
`<br>`	Line break (empty element)
`<hr>`	Horizontal line (empty element)
`<strong>`	Bold / important text
`<em>`	Italic / emphasized text

« Previous Lesson Next Lesson »