HTML Intro

Written by nick

30.05.2025

#html #basics

Basic HTML structure
The <!DOCTYPE html> declaration
The <html> tag
The <head> section
Adding style
Recap and full example

1 Basic HTML structure

Every HTML page starts with a specific structure. Here's the minimal skeleton of a modern HTML5 document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>

  <body>
    <!-- Your content will go here -->
  </body>
</html>

Let's go over each part to understand what it's doing!

2 The <!DOCTYPE html> declaration

This tells the browser that we are writing HTML5. It's required at the very top of every HTML document.

<!DOCTYPE html>

3 The <html> tag

This is the root of every HTML document. Everything, like the <head> and the <body>, lives inside this tag.

<html lang="en">
  ...
</html>

The lang="en" part tells the browser (and screen readers) that the page content is in English. It's good for accessibility and SEO (Search Engine Optimization).

4 The <head> section

The <head> tag contains information about the page that isn't displayed directly on the screen. This includes the page title, meta tags, links to stylesheets, and more.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>

Here's what each part does:

<meta charset="UTF-8">: Makes sure your page supports all characters (like emojis 😄 and accents é).
<meta name="viewport" ... >: Makes your page responsive on phones and tablets.
<title>: This sets the browser tab title. It also helps search engines understand your page.

5 Adding style

You can make your page look nice using CSS. There are two ways to add CSS:

Option 1: Write CSS directly inside the HTML file

Add a <style> tag inside the <head>. This is good for small pages or quick demos.

<head>
  ...
  <style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        color: #333;
    }
  </style>
</head>

Option 2: Link to an external CSS file

If you want to keep your CSS clean and separate, create a file named style.css and link to it like this:

<head>
  ...
  <link rel="stylesheet" href="style.css">
</head>

Your style.css might look like this:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

This keeps your HTML cleaner, and is preferred when you work on bigger sites.

6 Recap and full example

Here's a complete example of a simple HTML page that includes a <title>, two <meta> tags, and a bit of inline CSS styling:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to HTML</title>

    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        color: #333;
      }
    </style>
  </head>

  <body>
    <h1>Hello, HTML!</h1>
    <p>This is a basic HTML page with some CSS styling.</p>
  </body>
</html>

Hey, you successfully created your very first HTML page! You may wonder: What now? How about you try to change the body background color? <3