The Skeleton of an HTML Page

Basic Example

A well-formed HTML page starts with the DOCTYPE. Today, we simply write the following line to indicate that it is HTML5:

html

<!DOCTYPE html>

Next, we find the <html> tag which is the root element of the document. Inside, there are two very important tags: <head> which will contain the title (in the <title> tag), metadata (in <meta> tags), and other information (such as stylesheets, in <style> or <link> tags, see CSS) and the <body> tag, which will contain the visible part of the document, and thus the main content.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title (Appears on the browser tab)</title>
</head>
<body>
    Visible content of the page
</body>
</html>

A More Complete Page

html

<!DOCTYPE html>

 <!-- HTML tag: Root node of the HTML document -->
<html lang="en">

  <!-- Head tag:
       for the document title,
       metadata,
       and additional files (mainly CSS) -->
  <head>

    <!-- Character set used in
         the text editor that edited this file -->
    <meta charset="utf-8" />

    <!-- Document title -->
    <title>Title appearing in the tab</title>

    <!-- Document zoom management -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Linking a stylesheet -->
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

    <!-- Linking a JavaScript file
         ⚠️ according to the HTML spec it should be here... -->
    <script src="main.js"></script>
  </head>

  <!-- Body tag : part of the document displayed in the browser -->
  <body>

    <!-- Linking a JavaScript file
         ⚠️ according to the HTML spec it should NOT be here... but in pratice, one should! -->
    <script src="main.js"></script>
  </body>
</html>

:::

The Skeleton of an HTML Page ​

Basic Example ​

A More Complete Page ​

The Skeleton of an HTML Page

Basic Example

A More Complete Page