Skip to content

HTML

Learn HTML — the markup language that gives every web page its structure and content.

What you'll learn

  • What HTML is and what tags do
  • The structure of an HTML document
  • Common tags: headings, paragraphs, lists, links, images
  • How attributes add extra information to elements

Concept

HTML

HTML (HyperText Markup Language) is the language that describes the structure and content of a web page. It is not a programming language — it does not loop or branch. It is a *markup* language: you wrap text in tags to say "this is a heading," "this is a paragraph," "this is a link."

Tags and Elements

A tag is a keyword wrapped in angle brackets. Most tags come in pairs — an opening and a closing tag — and the content between them is the element:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Some tags are self-closing — they have no content inside, like images:

<img src="photo.jpg" alt="A cat" />

Document Structure

Every HTML document follows the same skeleton:

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

The <head> holds metadata (title, character encoding, linked stylesheets). The <body> holds everything the user sees.

Attributes

Attributes go inside the opening tag and add extra information. A link needs a destination (href); an image needs a source (src) and alternative text (alt):

<a href="https://example.com">Visit Example</a>
<img src="logo.png" alt="Company logo" />

Semantic HTML

Modern HTML favors semantic tags that describe meaning, not just appearance: <header>, <nav>, <main>, <article>, <footer>. These help screen readers and search engines understand your page's structure.

Example

              <!DOCTYPE html>
<html lang="en">
  <body>
    <header>
      <h1>Recipe Book</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/recipes">Recipes</a>
      </nav>
    </header>

    <main>
      <article>
        <h2>Chocolate Chip Cookies</h2>
        <p>Prep time: <strong>15 minutes</strong></p>
        <ul>
          <li>2 cups flour</li>
          <li>1 cup sugar</li>
          <li>1 cup chocolate chips</li>
        </ul>
        <img src="cookies.jpg" alt="Fresh baked cookies" />
      </article>
    </main>

    <footer>&copy; 2024 Recipe Book</footer>
  </body>
</html>

Semantic tags (header, nav, main, article, footer) describe the page's structure. The ul/li list holds ingredients; the img needs an alt for accessibility.

Try it

  • HTML Entity Encoder

    Encode special characters like < and > so they display as text instead of being parsed as HTML.

  • HTML ↔ Markdown

    Convert HTML to Markdown and back — see how structure maps between formats.

Common mistakes

The mistake

Forgetting to close tags or nesting them incorrectly.

The fix

Every opening tag needs a closing tag, and tags must nest properly: <p><strong>text</strong></p>, not <p><strong>text</p></strong>. Use an HTML validator to catch mismatches.

The mistake

Omitting the alt attribute on images.

The fix

Always include alt text. It is read by screen readers and shown when the image fails to load. Use empty alt (alt='') only for purely decorative images.

Related Resources

Related Snippets

Related Cheatsheets

Practice HTML

2 exercises

Practice HTML

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors