Document Structure

Every HTML page follows the same skeleton. Here it is again with the pieces you'll add most often:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Opening Hours — Corner Bakery</title>
    <meta name="description" content="When the Corner Bakery is open, and how to find us.">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/css/site.css">
  </head>
  <body>
    <h1>Opening Hours</h1>
    <p>Monday to Saturday, 7:00–18:00.</p>
    <script src="/js/site.js" defer></script>
  </body>
</html>

The doctype

<!DOCTYPE html> switches the browser into standards mode. Without it, browsers use quirks mode, which imitates bugs from 1990s browsers and changes how CSS layout works. Always include it.

The html element

The root of the tree. Its lang attribute declares the page's language (en, en-GB, fr, pt-BR, ...). Screen readers use it to pick a voice and pronunciation, browsers use it to offer translation and to hyphenate text, and search engines use it too.

The head

Nothing in the head is shown on the page (except the title, in the tab):

• <meta charset="utf-8"> — the character encoding. Put it first in the head, and save your files as UTF-8 (every modern editor does by default). Without it, characters like é, €, or — can turn into garbage.
• <meta name="viewport" ...> — without it, phones render the page as a zoomed-out desktop page.
• <title> — required. Shown in tabs, bookmarks, history, and as the headline in search results. Make it specific: "Opening Hours — Corner Bakery", not "Home".
• <meta name="description"> — a summary search engines may show under the title.
• <link> — connects other resources: stylesheets, icons, and more.

The body

Everything visible. Scripts are often placed at the end of the body, or in the head with defer — Level 2 explains why.

Optional tags

The standard lets you omit some tags — even <html>, <head>, and <body> — and the parser adds them for you. This is valid but confusing for beginners and many tools. Write them out.

Practice

Write the skeleton of a page for a library's "Events" page in British English (en-GB), with a description and a stylesheet link to styles.css.

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Events — Riverside Library</title>
    <meta name="description" content="Author talks, workshops, and children's story time at Riverside Library.">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Events</h1>
  </body>
</html>