HTML Elements and Tags Explained in Detail

What you will learn

“Element” and “tag” are two of the most common words in web development, and beginners (and many tutorials) mix them up. In this lesson you will learn exactly what each word means, how elements sit inside each other, what void elements are, and why the popular phrase “self-closing tag” is misleading in HTML.

Element, tag and attribute: three different things

• A tag is the piece written inside angle brackets: <p> is an opening tag and </p> is a closing tag.
• An element is the complete building block: the opening tag, the content, and the closing tag together.
• An attribute is extra information written inside the opening tag, such as href="page.html".

<p class="intro">Hello, HTML!</p>

Here is how to read that line:

• <p class="intro"> is the opening tag.
• class="intro" is an attribute (name: class, value: intro).
• Hello, HTML! is the content.
• </p> is the closing tag.
• The whole line, from the first < to the last >, is one paragraph element.

In everyday conversation people say “the p tag” and “the p element” to mean the same thing, and that is fine. When you need to be precise, for example in an interview or when reading documentation, remember: a tag is a part; an element is the whole.

The anatomy of an element

Every element has up to four parts:

1. Opening tag: the element name inside < and >, plus any attributes.
2. Content: text, other elements, or both. Some elements have no content at all.
3. Closing tag: the same name with a / in front: </p>.
4. Attributes: optional name="value" pairs in the opening tag.

<a href="https://example.com" target="_blank">Visit the example site</a>

Rules for attributes:

• They go only in the opening tag, never in the closing tag.
• Separate them with spaces: <a href="…" target="_blank">.
• Write the value in quotes: href="page.html". Double quotes are the convention.
• The order of attributes does not matter.
• Some attributes are boolean: their presence alone turns them on, with no value, for example disabled on an input.

<input type="text" placeholder="Try typing here" disabled>

Nesting: elements inside elements

The content of an element can be other elements. This is called nesting.

<p>I am learning <strong>HTML</strong> step by step.</p>

The <strong> element is a child of the <p> element, and the <p> is its parent. Two elements inside the same parent are siblings. Everything above an element (parent, grandparent…) is an ancestor.

The rule is simple: close the inner element before you close the outer one.

<!-- Correct: strong is closed before p -->
<p>I am learning <strong>HTML</strong>.</p>

<!-- Wrong: the tags overlap -->
<p>I am learning <strong>HTML.</p></strong>

Indent nested elements by two spaces so you can see the structure at a glance:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Good to know: some elements only allow certain content. A paragraph (<p>) can contain text and inline elements such as <strong>, <span> or <a>. It cannot contain a <div>, a heading, a list, or another <p>. If you write one of those inside a paragraph, the browser quietly closes the paragraph early, and your page ends up different from what you typed. You will see exactly what happens in the next lesson.

Void elements: elements with no content

Some elements can never have content, so they never have a closing tag. The HTML specification calls them void elements. The complete list is short:

area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr

You have already used a few of them:

<p>First line<br>Second line</p>

<hr>

<img src="cat.jpg" alt="A grey cat sleeping on a sofa">

<meta charset="utf-8">

Two things to remember:

• Never write a closing tag for a void element. <br></br> and <img></img> are errors.
• Void elements still carry information through attributes. An <img> has no content, but src and alt say what to show.

Try it: press Try it on the <img> example above. You will see a broken-image icon with the alt text next to it. That is expected, because cat.jpg does not exist inside the editor. It also shows why alt matters: when an image cannot load, or a visitor uses a screen reader, the alt text is what they get. Write it as a real description (“A grey cat sleeping on a sofa”), not as “image” or “A sample image”.

“Self-closing tags”: a popular but misleading term

Many tutorials call <br>, <hr> and <img> “self-closing tags”, and you will often see them written with a slash, like <br />. That style comes from XHTML and from JSX (React). In HTML:

• The slash on a void element is optional and ignored. <br> and <br /> are identical. Pick one style and stay consistent; this course uses <br>.
• The slash does not make any other element self-closing.

That second point surprises many beginners. Run this example:

<div style="border: 2px solid tomato; padding: 8px;"/>
<p>Am I inside the box or outside?</p>

You might expect the paragraph to sit outside an empty box. Instead, the browser ignores the /, treats <div> as a normal opening tag, and the paragraph ends up inside the div. The correct code is:

<div style="border: 2px solid tomato; padding: 8px;"></div>
<p>Now the paragraph is outside the box.</p>

So the precise wording is: <br>, <hr> and <img> are void elements. They do not need a closing tag because they cannot have content, not because they “close themselves”.

Optional closing tags: allowed, but don’t rely on them

The HTML specification allows you to leave out the closing tag of a few elements, such as <p> and <li>, when the next element makes it obvious. The browser fills in the gap. So this works:

<p>First paragraph
<p>Second paragraph
<p>Third paragraph

Please do not write HTML like this. It is harder to read, easy to get wrong, and it hides the mistake shown in the “Good to know” box above. Always write the closing tag for every element that has one.

Block and inline elements

Every element has a default way of taking up space on the page.

• Block elements start on a new line and stretch across the full available width. Examples: <p>, <h1> to <h6>, <div>, <ul>, <hr>.
• Inline elements stay inside the flow of a line of text and are only as wide as their content. Examples: <span>, <a>, <strong>, <img>.

<p>A paragraph is a block: it gets its own line.</p>
<p>A <strong>strong</strong> word and a <a href="#">link</a> are inline: they stay in the line.</p>

A useful rule of thumb is that block elements can contain inline elements, but inline elements should not contain block elements. Later, CSS will let you change how any element behaves with the display property, so treat these as the defaults.

Upper case, lower case and quotes

• Tag and attribute names are not case sensitive in HTML: <P>Hi</P> works. Write everything in lower case anyway; it is the universal convention.
• Always put attribute values in quotes. Values with spaces break without them.

Common mistakes

• Forgetting the closing tag, so the rest of the page ends up inside the element.
• Writing a closing tag on a void element, such as <br></br>.
• Overlapping tags: <p><strong>text</p></strong>.
• Believing <div/> closes itself. It does not; only void elements have no closing tag.
• Missing quotes around an attribute value, or mismatched quotes such as href="page.html'.
• Putting attributes in the closing tag. Only the opening tag takes attributes.
• Unhelpful alt text, such as alt="image". Describe what the image shows.

Interview-style questions

What is the difference between an element and a tag? A tag is the markup in angle brackets, such as <p> or </p>. An element is the full structure: opening tag, content, and closing tag (if it has one).

What is a void element? An element that cannot have content and therefore has no closing tag, for example <br>, <hr>, <img> and <input>.

Is <br /> different from <br> in HTML? No. The slash is ignored in HTML. It is required in XHTML and in JSX.

Practice

1. Open the editor with the Practice in Editor button. Add a second paragraph and use <br> to split it into two lines.
2. Add an attribute to the input: change the placeholder text, then add the boolean attribute disabled and see what changes.
3. Write <p>Hello <strong>world</p></strong> and look at the preview. Then fix the nesting.
4. Replace <div style="…"/> with a proper opening and closing pair, and confirm the paragraph moves outside the box.

Recap

• A tag is the markup in angle brackets; an element is opening tag + content + closing tag.
• Attributes go in the opening tag as name="value".
• Elements can be nested, and the inner element must close first.
• Void elements (br, hr, img, input, meta, link and a few more) have no content and no closing tag.
• The trailing slash (<br />) is optional in HTML, and it does not make other elements self-closing.
• Block elements start on a new line; inline elements stay within a line of text.