Page structure: the skeleton of every page

The skeleton

Every HTML page follows the same outline. Browsers try to guess when a part is missing, but guessing leads to strange bugs. Write the full skeleton every time. With Emmet in VS Code it takes ten seconds.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sharma Kirana Store | Home</title>
  </head>
  <body>
    <!-- Main content starts here -->
    <h1>Sharma Kirana Store</h1>
    <p>Fresh groceries, open 7 am to 10 pm.</p>
  </body>
</html>

Nesting and indentation

Elements go inside other elements. This is called nesting. The outer element is the parent and the inner ones are its children. A child must close before its parent closes, so the tags never cross each other.

<!-- Right: strong closes before p closes -->
<p>We are open <strong>every day</strong>.</p>

<!-- Wrong: the tags cross each other -->
<p>We are open <strong>every day.</p></strong>

Indentation means adding spaces at the start of a line to show how deep an element sits. The browser ignores these spaces, but people reading your code need them. Use 2 spaces for each level and let your editor tidy the file.

Attributes

An attribute is extra information written inside the opening tag, as name="value". Examples are lang="en", href="about.html" and id="contact". Always put the value in double quotes. Some attributes are boolean (on or off): just writing the name turns them on, as in <video controls>.

Void elements and comments

A few elements can never hold content, so they have no closing tag. They are called void elements: <meta>, <link>, <img>, <br>, <hr> and <input>. Write them as <img src="logo.png" alt="Shop logo">. A slash at the end (<br />) is allowed but not needed.

A comment is a note for developers that the browser does not show. It starts with <!-- and ends with -->. Use comments to label big sections or to explain something unusual.