HTML Elements, Tags and Attributes Explained

HTML elements, tags and attributes are the building blocks of every page. This lesson shows how tags open and close, how to nest elements correctly, and how attributes add extra details.

What is the difference between a tag and an element?

People often use these words as if they mean the same thing, but there is a small difference.

• A tag is the code in angle brackets, like <p> or </p>.
• An element is the whole thing: the opening tag, the content, and the closing tag.

<p>Our shop opens at 9 am.</p>

Here <p> is the opening tag. </p> is the closing tag. Notice the slash / in the closing tag. "Our shop opens at 9 am." is the content. All three together make one paragraph element. In the browser you simply see the sentence as a paragraph.

Think of an element like a sandwich: two slices of bread (the tags) with the filling (the content) in the middle.

What are void (empty) elements?

Some elements have no content, so they don't need a closing tag. These are called void elements. Common ones are:

• <br> – a line break
• <hr> – a dividing line
• <img> – an image
• <meta> – page information in the head
• <input> – a form field

<p>Lina's Bakery<br>12 Mill Street<br>Leeds</p>
<hr>
<img src="bread.jpg" alt="A fresh sourdough loaf">

The browser shows the address on three lines, then a horizontal line, then the image (if a file called bread.jpg exists in the same folder). You may see <br /> with a slash in older code. It works, but in modern HTML the slash is not needed.

How to nest HTML elements correctly

Nesting means putting one element inside another. For example, you can make one word important inside a paragraph:

<p>Orders must be placed <strong>before 5 pm</strong> the day before.</p>

The <strong> element is inside the <p> element. The rule is simple: close elements in the reverse order you opened them. The last one opened is the first one closed, like stacking boxes.

<!-- Correct -->
<p>This is <em>very</em> good.</p>

<!-- Wrong: the tags cross over -->
<p>This is <em>very good.</p></em>

The second example is wrong because <em> was opened inside the paragraph but closed outside it. The browser may guess and fix it, but the result can be unpredictable.

We call the outer element the parent and the inner one the child. You will see these words a lot when you learn CSS.

Tip: Indent child elements with two or four spaces. Then you can see the family tree of your page at a glance.

What are HTML attributes?

Attributes give extra information about an element. They always go inside the opening tag and are written as name="value".

<a href="https://developer.mozilla.org" title="Mozilla's web docs">Learn more on MDN</a>
<img src="team-photo.jpg" alt="Our five bakers smiling in the kitchen" width="600" height="400">
<p lang="fr">Bonjour et bienvenue !</p>

In the first line, href tells the link where to go and title adds a small tooltip when you hover. In the second line, src tells the image which file to load, and alt describes the image. In the third, lang says this paragraph is in French. You will see a link, an image and a paragraph.

One element can have many attributes. Separate them with a space. The order does not matter.

Some attributes have no value

A few attributes are boolean, which means they are either on or off. Just writing the name turns them on:

<input type="checkbox" checked>

The checkbox appears already ticked because of checked.

Good habits: lowercase and quotes

HTML is not case-sensitive, so <P> works the same as <p>. But the modern standard style is:

• Write tag names and attribute names in lowercase.
• Always put attribute values in double quotes: class="intro", not class=intro.

Quotes are needed when a value has a space, and using them every time means you never forget.

Common mistake: Forgetting the closing quote, like href="about.html>. The browser then reads the rest of your code as part of the value, and big parts of your page can disappear.

Practice exercise

Write a paragraph about your favourite film. Make the film's title important using <strong>, and add a line break with <br> before a second sentence. Then add lang="en" as an attribute on the paragraph.

Hint: the attribute goes inside the opening <p> tag, like <p lang="en">.

Key takeaways

• An element is an opening tag, content and a closing tag together.
• Void elements like <br>, <hr> and <img> have no closing tag.
• Close nested elements in the reverse order you opened them.
• Attributes go in the opening tag as name="value"; use lowercase and double quotes.