Skip to main content

Command Palette

Search for a command to run...

Understanding HTML Tags and Elements

Published
2 min read

1. What HTML is and why we use it

HTML stands for HyperText Markup Language.

HTML is not a programming language.
It’s a markup language, which means it’s used to structure content.

We use HTML to:

  • Create the structure of a webpage

  • Tell the browser what is a heading, paragraph, image, link, etc.

  • Build the basic skeleton of any website

2. What an HTML tag is

An HTML tag is a keyword wrapped in angle brackets (< >) that tells the browser what something is.

Example:

<p>

4. What an HTML element means

An HTML element is the complete set:

  • Opening tag

  • Content

  • Closing tag

Example:

<h1>Welcome</h1>

This entire line is one HTML element, not just the tag.

5. Self-closing (void) elements

Some HTML elements don’t need a closing tag.

These are called self-closing or void elements.

Examples:

<br>
<img>
<input>
<hr>

Why?
Because they don’t wrap content — they just do one job.

Example:

<img src="photo.jpg">

There’s nothing to close because there’s no content inside.

6. Block-level vs inline elements

Block-level elements:

  • Start on a new line

  • Take up full width

Examples:

<div>
<p>
<h1>

Think of block elements as big boxes stacked vertically.

Inline elements:

  • Stay in the same line

  • Take only needed space

Examples:

<span>
<a>
<strong>

Inline elements are like words inside a sentence.

7. Commonly used HTML tags

Some tags you’ll see all the time:

  • <html> – root of the document

  • <head> – page info (title, links)

  • <body> – visible content

  • <h1> to <h6> – headings

  • <p> – paragraph

  • <a> – link

  • <img> – image

  • <div> – container

  • <span> – inline container

  • <ul>, <ol>, <li> – lists