HTML Intro

Written by nick • 30.05.2025

#html #basics

This tutorial will introduce you to how an HTML page is structured.

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 — 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 styles

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

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>

7. Next steps

Try modifying the title, changing the background color, or switching the font in the CSS. But hey, you successfully created your very first HTML page! ✨