On this page

Basic structure of a document

10 min read TextCh. 1 — HTML Fundamentals

DOCTYPE

The <!DOCTYPE html> declaration tells the browser which version of HTML we are using. In HTML5, this declaration is very simple and always goes on the first line of the document.

The html element

The <html> element is the root element of every web page. All other elements must be descendants of this element. The lang attribute is essential for accessibility.

Head and Body

The <head> contains metadata about the document: title, charset, viewport, links to CSS and scripts. Nothing in the <head> is displayed directly on the page.

The <body> contains all the visible content of the page: text, images, links, forms, etc.

Important meta tags

Meta tags provide information about the page to the browser and search engines:

  • charset="UTF-8" — Character encoding (supports accents, special characters, etc.)
  • viewport — Configures the viewport for mobile devices
  • description — Description for search engines and social media

Semantic structure

In HTML5, we use semantic elements like <header>, <main>, and <footer> instead of generic <div> elements. This improves accessibility and SEO.

Practice

  1. Build a complete document: Create an HTML file with <!DOCTYPE html>, <html lang="en">, <head> (with charset, viewport, title, and description) and a <body> containing at least a <header>, <main>, and <footer>.
  2. Experiment with meta tags: Change the content of the <title> and the meta description, then verify that the browser tab reflects the new title.
  3. Link a stylesheet: Add a <link rel="stylesheet" href="styles.css"> in the <head> and create a styles.css file that changes the background color of the <body>.

In the next lesson, we will look at the most commonly used HTML tags.

Best practice
Always include the lang attribute on the html element for accessibility and internationalization.
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Description of my page">
  <title>Page title</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>My website</h1>
  </header>
  <main>
    <p>Main content</p>
  </main>
  <footer>
    <p>Page footer</p>
  </footer>
</body>
</html>