HTML Elements Tutorial for Beginners – Simple Explanation

An HTML element is defined by a start tag, some content, and an end tag. Think of it like a container. The start tag opens it, the content goes inside, the end tag closes it.

HTML Elements

The HTML element is everything from the start tag to the end tag. Like this:

Syntax

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

Here are some real examples:

Example

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

Start Tag	Element Content	End Tag
`<h1>`	My First Heading	`</h1>`
`<p>`	My first paragraph	`</p>`
`<br>`	none	none

Note: Some HTML elements have no content. The <br> element is one example. These are called empty elements. Empty elements do not have an end tag.

Nested HTML Elements

HTML elements can be nested. That just means elements can contain other elements inside them. Think of it like boxes inside boxes inside boxes.

Every HTML document is made up of nested elements. Here is a simple example with four elements: <html>, <body>, <h1>, and <p>.

Let Me Break It Down For You

The <html> element is the root element. It wraps everything. It has a start tag <html> and an end tag </html>. Think of it as the biggest box.

Inside the <html> element, there is the <body> element:

Inside html

<body>

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

</body>

The <body> element defines everything that people actually see on the page. It has a start tag <body> and an end tag </body>.

Inside the <body> element, there are two more elements: <h1> and <p>.

The <h1> element defines a heading. Start tag <h1>, content “My First Heading”, end tag </h1>.

The <p> element defines a paragraph. Start tag <p>, content “My first paragraph”, end tag </p>.

Tip: When you nest elements, make sure to close them in the right order. The last one opened should be the first one closed. Like stacking plates.

Never Skip the End Tag

Some browsers will still display your page correctly even if you forget the end tag. But do not rely on this. It will cause problems sooner or later.

Here is what happens if you forget the closing tag:

See how it still kind of works? But now imagine you have ten paragraphs and you forget one closing tag. The browser gets confused. Styles break. Layouts mess up. Just get into the habit of always writing both the opening and closing tags.

If you use VS Code, it helps you with this. When you type <p>, VS Code automatically adds </p> for you. Very handy.

Empty HTML Elements

Some elements have no content. They are called empty elements. The <br> tag is a good example. It creates a line break. It has no closing tag because there is nothing to close.

Example

<p>This is a <br> paragraph with a line break in the middle.</p>

Try it Yourself

Other common empty elements include <img> (images) and <hr> (horizontal line).

HTML is Not Case Sensitive

HTML tags work the same whether you write them in uppercase or lowercase. <P> means the same thing as <p>. <BODY> is the same as <body>.

But here is the deal. Most developers write tags in lowercase. It is just the standard. It looks cleaner. It is easier to read. And if you ever work with stricter languages like XHTML, they require lowercase.

So just use lowercase for all your tags. Trust me.

HTML Tag Reference

Need to look up what a tag does? There are good free references online. Search for “HTML tag reference” or check out the documentation at developer.mozilla.org.

Here are the tags we covered in this chapter:

Tag	Description
`<html>`	Defines the root of an HTML document. The biggest container.
`<body>`	Defines the visible part of the document. Everything you see.
`<h1>` to `<h6>`	Defines headings. H1 is biggest and most important.
`<p>`	Defines a paragraph of text.
`<br>`	Creates a line break. Empty element, no closing tag.

Note: The best way to really understand nested elements is to practice. Open VS Code. Create a file called elements.html. Try nesting a <p> inside a <div> inside the <body>. Then add more elements. Break it. Fix it. That is how you learn.

What Just Happened? Let Me Explain

An element needs a start tag, content, and an end tag. Except empty elements. They just have a start tag.
Elements can be nested. That means one element inside another element.
The <html> element wraps everything. It is the root.
The <body> element wraps everything you see on the page.
Always write your closing tags. Do not rely on the browser to fix your mistakes.
Empty elements like <br> do not need a closing tag.
Use lowercase for all your tags. It is just better.

Tip: In VS Code, if you select a tag, it will highlight the matching closing tag. Very useful when you are nesting many elements and want to make sure everything is closed properly.