Part 2: HTML5 Document Skeleton: DOCTYPE, html, head, and body

Part 2 Technology Updated September 12, 2026

HTML5 Document Skeleton: DOCTYPE, html, head, and body

Every compliant HTML page starts with a standardized boilerplate. Understanding each structural element ensures your site renders properly across all devices and browsers.

1. The Universal HTML5 Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mastering Modern HTML5 - Devify</title>
</head>
<body>
    <header>
        <h1>Welcome to Modern Web Engineering</h1>
    </header>
    <main>
        <p>Your main article or application interface begins here.</p>
    </main>
    <footer>
        <p>&copy; 2026 Devify Platform. All rights reserved.</p>
    </footer>
</body>
</html>

2. Breakdown of the Root Elements

  1. <!DOCTYPE html>: Informs modern web browsers to render the document in standard mode rather than legacy quirks mode.
  2. <html lang="en">: The root element enclosing all content. The lang attribute is essential for screen readers and search engines to detect the primary language.
  3. <head>: Houses non-visual metadata, title tags, stylesheet links, and preconnect hints.
  4. <body>: Contains all visual content rendered in the browser viewport.

3. Best Practices

  • Always declare the lang attribute on <html> for accessibility compliance (WCAG 2.1).
  • Avoid placing visual tags (like <h1> or <div>) inside the <head> tag.
  • Keep the DOCTYPE at line 1 with zero preceding whitespace.
Previous Topic HTML Elements
Next Topic Part 3: The Head Anatomy: Meta Viewport, Charset, and Favicons