HTML (HyperText Markup Language) is the language used to create the structure of webpages. Every website you've ever visited — from Google to YouTube to your bank's website — is built with HTML at its core.

Think of a webpage like a house:

• HTML is the skeleton — the walls, floors, and rooms
• CSS is the decoration — paint, furniture, and style
• JavaScript is the electricity — things that move and respond

Without HTML, there's nothing to style or make interactive. It's the foundation everything else builds on.

What is an HTML Tag?

An HTML tag is a keyword surrounded by angle brackets. Tags tell the browser what type of content something is.

html

<p>

This is a tag. The p stands for "paragraph." When the browser sees this, it knows: "The content that follows is a paragraph."

Most tags come in pairs — an opening tag and a closing tag:

html

<p>This is a paragraph.p>

•  is the opening tag — it starts the paragraph
•  is the closing tag — it ends the paragraph (note the /)
• Everything between them is the content

Tag vs Element: What's the Difference?

These terms are often used interchangeably, but they mean slightly different things.

Tag: Just the markup itself — 

 or 

Element: The complete package — opening tag + content + closing tag

html

<h1>Welcome to My Siteh1>

In this example:

• Opening tag: 
• Closing tag: 
• Content: Welcome to My Site
• Element: The entire thing: 

• Welcome to My Site

When someone says "add a paragraph element," they mean: write the opening tag, the content, and the closing tag together.

Self-Closing (Void) Elements

Some elements don't have content. They stand alone.

html

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

These are called void elements or self-closing elements. There's nothing to put between an opening and closing tag, so there's no closing tag at all.

• <br> — Line break
•  <hr> — Horizontal rule (a line across the page)
•  <img> — Image
•  <input> — Form input field

You might also see them written with a slash:

<br /> or <img />

. Both are valid. The slash is optional in HTML5.

Block-Level vs Inline Elements

HTML elements behave differently depending on their type.

Block-Level Elements

Block elements take up the full width available and start on a new line.

html

<div>I'm a block element.div>
<p>I'm also a block element.p>
<div>I start on a new line.div>

Each element stacks vertically, one on top of the other. Block elements are like boxes that want their own row.

Common block elements: 

<div>, <p>, <h1> through <h6>, <ul>, <ol>, <li>, <section>, <article>, <header>, <footer>

Inline Elements

Inline elements take up only as much width as they need and don't start a new line.

<p>This is <strong>boldstrong> and this is <em>italicem> text.p>

Result: This is bold and this is italic text.

The <strong> and <em> elements sit within the flow of text. They don't break onto new lines. 

Common inline elements: <span>, <strong>, <em>, <a>, <img>, <code>

The Key Difference

Commonly Used HTML Tags

Text Content

<h1> through <h6> — Headings. <h1> is the largest and most important, <h6> is the smallest.

<h1>Main Titleh1>
<h2>Section Titleh2>

<p> — Paragraph. The workhorse of text content.

<p>This is a paragraph of text.p>

<strong> — Bold/important text.

<strong>This is important.strong>

<em> — Italic/emphasized text.

<em>This is emphasized.em>

<br> — Line break. Forces text to a new line without starting a new paragraph.

Line one<br>Line two

Structure

<div>  — Generic block container. Used for grouping and layout.

<div class="card">Content goes herediv>

<span> — Generic inline container. Used for styling parts of text.

<p>This word is <span class="highlight">highlightedspan>.p>

 <header> — Page or section header.

<footer> — Page or section footer.

<section> — Thematic grouping of content.

<article> — Self-contained content (like a blog post).

Links and Media

<a> — Hyperlink. The href attribute specifies the destination.

<a href="https://google.com">Visit Googlea>

 <image> — Image. The src attribute specifies the image file. The alt attribute provides alternative text.

<img src="photo.jpg" alt="A description of the photo">

Lists

<ul>  — Unordered (bullet) list.

<ol>  — Ordered (numbered) list.

<li>  — List item (used inside  or ).

<ul>
  <li>First itemli>
  <li>Second itemli>
  <li>Third itemli>
ul>

A Simple HTML Example

Let's put it together:

DOCTYPE html>
<html>
  <head>
    <title>My First Pagetitle>
  head>
  <body>
    <h1>Hello, World!h1>
    <p>This is my first webpage. It has a <strong>bold wordstrong> and an <em>italic wordem>.p>
    
    <h2>My Favorite Thingsh2>
    <ul>
      <li>Coffeeli>
      <li>Codeli>
      <li>Sleepli>
    ul>
    
    <p>Learn more at <a href="https://example.com">this linka>.p>
  body>
html>

What each part does:

• <!DOCTYPE html> — Tells the browser this is HTML5
•  <html> — The root element that wraps everything 
• <head> — Contains metadata (not visible on the page) 
• <title> — The text shown in the browser tab 
• <body> — Contains everything visible on the page
•  The rest — Headings, paragraphs, lists, and a link

Try It Yourself: Inspect HTML in Your Browser

Every browser has developer tools that let you see the HTML of any webpage.

1. Right-click on any webpage
2. Select "Inspect" or "Inspect Element"
3. Look at the Elements panel

You'll see the actual HTML that builds the page. Try hovering over elements — the browser will highlight them on the page.

This is the best way to learn. Find a website you like, inspect it, and see how it's structured.