Your first HTML page

lesson 2-1 · ~9 min · 3/30

Elements, tags, and attributes

HTML exists because a browser receiving plain text could not tell a heading from a paragraph from a button — markup makes the structure explicit so the browser, screen readers, and search engines can all act on it. Everything you will ever ship on the web, from a dashboard to a checkout page, is delivered as this markup, so the syntax below is worth over-learning.

HTML is written as elements. An element usually has three parts:

<p>Hello, web!</p>

<p> is the opening tag: the element's name (p, for paragraph) in angle brackets.
Hello, web! is the content.
</p> is the closing tag: same name with a forward slash.

Tags can carry attributes, extra settings written as name="value" inside the opening tag:

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

Here href is an attribute of the a (anchor, a link) element. A few elements have no content and no closing tag, like <img> and <br>. These are called void elements.

The page skeleton

Every HTML file follows the same skeleton:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, web!</h1>
    <p>My first paragraph.</p>
  </body>
</html>

<!DOCTYPE html> tells the browser this is modern HTML.
<head> holds information about the page: the tab title, the character set, and later your CSS. Nothing inside it is drawn on the page.
<body> holds everything the user actually sees.

Elements nest: the p sits inside body, which sits inside html. Indenting nested elements two spaces is a convention, not a requirement, but do it anyway. Your future self will thank you.

Quiz

Where does the text shown in the browser tab come from?

This sandbox renders your HTML live. Below the first paragraph, add an <h2> that says About me, then add one more paragraph of your own under it. Watch the preview update as you type.

Problem

You open a paragraph with <p>. What exactly do you type to close it?