HTML Elements

HTML elements are the building blocks of an HTML document. An element usually consists of a start tag, content, and an end tag. Browsers use HTML elements to structure and display content on a web page.

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>

Example of HTML Elements

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

HTML Element Structure

Start Tag	Content	End Tag
<h1>	My First Heading	</h1>
<p>	My first paragraph	</p>
<br>	None	None

Nested HTML Elements

HTML elements can be nested inside other elements. This means that elements can contain other elements.

Example

<!DOCTYPE html>    
<html>
<body>

<h1>My Page</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try this code

Empty HTML Elements

Some HTML elements do not have any content. These elements are called empty elements and they do not have a closing tag.

<br> inserts a line break.
<hr> creates a horizontal line.
<img> displays an image.
<input> creates an input field.

Example

<p>This is a paragraph.<br>
This text is on a new line.</p>

<hr>

<img src="https://via.placeholder.com/150" alt="Example Image">

<input type="text" placeholder="Your name">

Try this code

HTML Block and Inline Elements

Block-level Elements

Block-level elements start on a new line and take up the full width available.

<div>
<p>
<h1> to <h6>
<section>

Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary.

<span>
<a>
<img>
<strong>

HTML Elements are Not Case Sensitive

HTML tags are not case sensitive. However, it is recommended to use lowercase tags for better readability.

<H1>Heading</H1>
<h1>Heading</h1>

Why HTML Elements are Important?

They define the structure of a web page
They help browsers understand content
They improve accessibility
They work together with CSS and JavaScript