DevAcademy
LearnHTMLElements & Tags
BeginnerHTML

Elements & Tags

Understand the difference between tags and elements, and learn about opening tags, closing tags, and self-closing (void) elements.

Reading Time

14 min

Lesson

Lesson 4 of 27

Tags vs Elements

A tag is the markup itself, like <p> or </p>. An element is the tag plus its content: <p>Hello</p> is a paragraph element made up of an opening tag, the content, and a closing tag.

Anatomy of an Element

<p>This is a paragraph.</p>
<!--
^   ^                    ^
opening  content       closing
tag                       tag
-->
Output

Opening and Closing Tags

Most HTML elements have an opening tag and a matching closing tag, with the closing tag prefixed by a forward slash. Content placed between them becomes the element’s content.

Void (Self-Closing) Elements

Some elements have no content and therefore no closing tag. These are called void elements — common examples include <img>, <br>, <hr>, and <input>.

Void Elements

<img src="photo.jpg" alt="A photo" />
<br />
<hr />
<input type="text" />
Output

Common Void Elements

TagPurpose
<img>Embeds an image
<br>Inserts a line break
<hr>Inserts a horizontal rule
<input>Creates a form input field
<meta>Provides document metadata

Nesting Elements

Elements can contain other elements. When nesting, closing tags must close in the reverse order they were opened, like closing brackets.

Correct vs Incorrect Nesting

<!-- Correct -->
<p>This is <strong>very</strong> important.</p>

<!-- Incorrect: tags cross each other -->
<p>This is <strong>very</p></strong>
Output

Tags Are Case-Insensitive

HTML tags can be written in uppercase or lowercase (<DIV> and <div> both work), but lowercase is the universal convention and is required by stricter formats like XHTML.

Never Skip Closing Tags

Forgetting to close a non-void element can cause the browser to render the rest of the page incorrectly, since everything after it may be treated as nested content.

Best Practice

Always close every non-void tag, even if the browser would tolerate leaving it open. It keeps your markup predictable and easy to debug.

Interview Questions

Quick Quiz

1. What is the difference between a tag and an element?

2. Which of these is a void element?

3. When nesting elements, in what order must closing tags appear?

PreviousNext