← Back to the HTML Reference
Start Here

HTML Basics

A visual, friendly walkthrough of how web pages are built. No experience needed — by the end you'll read HTML, understand how it fits together, and write your own page in the live editor.

Step 1

What is HTML?

HTML (HyperText Markup Language) is the structure of every web page. It's not a programming language — it's a way of labeling content so the browser knows what each piece is: “this is a heading,” “this is a paragraph,” “this is an image.”

A finished web page is really three layers working together. HTML is always the foundation:

HTML — structure The content & skeleton (headings, text, images)
CSS — style Colors, fonts, layout, spacing
JavaScript — behavior Clicks, animation, interactivity
Analogy: if a web page were a house, HTML is the framing and walls, CSS is the paint and furniture, and JavaScript is the electricity that makes things switch on. You always build the structure first.
Step 2

The anatomy of a tag

HTML is made of elements. Most elements have an opening tag, some content, and a closing tag. The closing tag is just the opening tag with a slash.

<p>Opening tagHello!Content</p>Closing tag

Some elements carry extra information called attributes, written inside the opening tag as name="value":

<a href="https://…"Attribute>Visit site</a>
Self-closing elements have no content and no closing tag — like <img>, <br>, and <hr>. They do their whole job in one tag.
Step 3

Every page starts with the same skeleton

This boilerplate is the starting point for every HTML file. Type it once and you'll soon know it by heart.

<!DOCTYPE html>            <!-- tells the browser: this is HTML5 -->
<html lang="en">
<head>                  <!-- info ABOUT the page (not shown on screen) -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- makes it work on phones -->
  <title>My First Page</title>   <!-- shows on the browser tab -->
</head>
<body>                  <!-- everything you SEE goes here -->
  <h1>Hello, world!</h1>
  <p>My very first web page.</p>
</body>
</html>
Think of it as two rooms inside <html>: the <head> holds behind-the-scenes info (title, character set, links to CSS), and the <body> holds everything the visitor actually sees.
Step 4

The tags you'll use every day

A handful of elements cover most pages. Here's each one — code on the left, the real result on the right.

Headings — <h1> to <h6>, biggest to smallest. Use one <h1> per page.

HTML
<h1>Title</h1>
<h2>Subtitle</h2>
Result

Title

Subtitle

Paragraph — <p> for blocks of text.

HTML
<p>HTML labels content so the
browser knows what it is.</p>
Result

HTML labels content so the browser knows what it is.

Link — <a> with an href. Image — <img> with src and alt.

HTML
<a href="https://example.com">Visit</a>

<img src="cat.jpg" alt="A cat">
Result
Visit
A cat

Lists — <ul> (bulleted) or <ol> (numbered), each item in an <li>.

HTML
<ul>
  <li>Bread</li>
  <li>Milk</li>
</ul>
Result
  • Bread
  • Milk
Want the full menu of every element with live examples? That's the HTML Visual Playground reference — this page is the friendly on-ramp to it.
Step 5

Nesting: elements live inside elements

You put elements inside other elements to build structure. An element inside another is its child; the one around it is the parent. Indent your code so the family tree is easy to see.

<body>                ← parent
  <section>          ← child of body, parent of the h2 + p
    <h2>About</h2>
    <p>Hello there.</p>
  </section>
</body>
Golden rule: close tags in the reverse order you opened them — last opened, first closed. <b><i>hi</i></b> ✓, never <b><i>hi</b></i> ✗.
Step 6

Attributes add information

Attributes live in the opening tag and configure the element. A few you'll meet constantly:

Common attributes
href="page.html"   where a link goes
src="photo.jpg"    an image's file
alt="Description"  text if image fails
id="main"          a unique name
class="card"       a reusable label
Why they matter

id and class are how CSS and JavaScript find an element to style or control.

alt text is read aloud by screen readers — it's essential for accessibility.

Step 7

Block vs. inline elements

Two ways elements take up space. Block elements stack vertically and fill the width. Inline elements sit in the flow of text, side by side.

Block — stacks & fills width

<h1> heading<p> paragraph<div> section

Each starts on a new line.

Inline — flows in a line

This is <a> a link and <strong> bold <span> text all on one line.

They sit within the sentence.

Step 8

Putting it all together: your first page

Here's a complete, real page using everything above — skeleton, headings, a paragraph, a list, and a link, all nested correctly.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Me</title>
</head>
<body>
  <h1>Jordan Parker</h1>
  <p>I'm learning web design!</p>
  <h2>I like</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
  <a href="contact.html">Contact me</a>
</body>
</html>
What the browser shows

Jordan Parker

I'm learning web design!

I like

  • HTML
  • CSS
Contact me
Step 9

Common beginner mistakes

Almost every “why is my page broken?” moment is one of these:

Don't
<p>Forgot to close
<img src="cat.jpg">        no alt text
<b><i>wrong</b></i>       crossed tags
<H1>Loud Caps</H1>         (works, but
                            lowercase is tidy)
Do
<p>Closed properly</p>
<img src="cat.jpg" alt="A cat">
<b><i>right</i></b>
<h1>Calm lowercase</h1>
Habits that save hours: close every tag you open, indent nested elements, always give images alt text, and use lowercase tag names.
Step 10

Now you try — live editor

Edit the HTML on the left and watch the page update on the right instantly. Change the text, add an <h2>, add a list item — you can't break anything.

Live preview
This is exactly how the pros work: write a little HTML, save, refresh, repeat. Try changing <h1> text, or add <p>Another line</p> before </body>.
Where next

Keep going