HTML Basics

HTML is the structure of a webpage: the headings, paragraphs, links, and images themselves, before any styling is applied. Every page on the web is built from it.

The basic shape of a page

Every HTML file starts with the same skeleton:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <!-- the visible page goes here -->
</body>
</html>

Everything a visitor actually sees goes inside <body>. The <head> holds information about the page, like its title, that doesn’t render on the page itself.

Headings and paragraphs

Headings run from <h1> (most important) to <h6> (least). A page should have exactly one <h1>. Regular text goes in <p> tags:

<h1>Main Title</h1>
<p>A paragraph of regular text.</p>
<h2>A Subsection</h2>
<p>More text under that subsection.</p>

Links and images

A link uses <a> with an href pointing to where it goes. An image uses <img> with a src pointing to the file, and an alt describing it for anyone who can’t see it:

<a href="https://example.com">Visit example.com</a>
<img src="cat.jpg" alt="A cat sitting on a windowsill">

Lists

An unordered (bulleted) list uses <ul>; a numbered one uses <ol>. Either way, each item is its own <li>:

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Attributes

The extra key="value" pairs inside a tag, like href or src above, are called attributes. Two you’ll use constantly: class, which labels an element so CSS or JavaScript can target it, and id, which does the same but must be unique on the page.

Try it: build a simple page, step by step

Here’s a small profile page, built up one piece at a time. The CSS basics guide picks this same page back up and styles it.

1. Start with the skeleton from earlier, and add a heading and a photo:

<h1>Hi, I'm Jordan</h1>
<img src="photo.jpg" alt="A photo of Jordan smiling outdoors">

2. Add a bio paragraph underneath it:

<p>I'm a hobbyist baker who loves sourdough and terrible puns.</p>

3. Add a list of hobbies, with its own heading:

<h2>Hobbies</h2>
<ul>
  <li>Baking</li>
  <li>Hiking</li>
  <li>Video games</li>
</ul>

4. Add a link out to somewhere else:

<p>See my <a href="https://example.com/recipes">recipe blog</a>.</p>

Put together inside the <body> from the skeleton at the top of this guide, the whole page looks like this:

<h1>Hi, I'm Jordan</h1>
<img src="photo.jpg" alt="A photo of Jordan smiling outdoors">
<p>I'm a hobbyist baker who loves sourdough and terrible puns.</p>
<h2>Hobbies</h2>
<ul>
  <li>Baking</li>
  <li>Hiking</li>
  <li>Video games</li>
</ul>
<p>See my <a href="https://example.com/recipes">recipe blog</a>.</p>

That’s a complete, structured page with no styling yet. The CSS basics guide covers how to style it.

← back to guides