Warm-Up: Basic Structure

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

Build a valid HTML document skeleton with <!doctype html>, <html>, <head>, and <body>. Include a <meta charset> and <title> in the head, and visible content (like an <h1>) in the body to prove the structure is correct and semantic.

Solution

Overview

This warm-up checks that you can lay out the minimal, standards-compliant HTML document. A strong answer includes the doctype, a language attribute on <html>, a <head> with charset and title, and a <body> containing visible content. It’s about correctness, not styling.

Approach 1 – Basic HTML Skeleton

Start with <!DOCTYPE html> to declare HTML5. Add <html lang="en"> as the root element. Inside <head>, include <meta charset="UTF-8"> and a descriptive <title>. Then place content in <body>, such as an <h1> and a short paragraph, to show the structure is valid and complete.

<html>

<!DOCTYPE html>
  <html lang='en'>
    <head>
      <meta charset='UTF-8'>
      <title>
        My First Page
      </title>
    </head>
    <body>
      <h1>
        Hello, world!
      </h1>
      <p>
        This is my first HTML document.
      </p>
    </body>
  </html>

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  line-height: 1.6;
}

Notes & Pitfalls

Pitfalls

Forgetting the <!DOCTYPE html> declaration can cause browsers to enter quirks mode.
The <title> element must be inside <head>, not <body>.

Techniques

Always define language using <html lang='en'>.
Indent nested elements for readability.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse HTML interview questions Open HTML/CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep