Document Structure

<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

This example omits DOCTYPE. Browsers can still parse the HTML, but the page may use quirks mode.

The recommended version begins with:

<!DOCTYPE html>

4. The Root html Element

The html element is the root of an HTML document. The head and body are normally its direct child elements.

<html lang="en">
    <head>
        <title>Example Page</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

Why Use the lang Attribute?

The lang attribute identifies the language of the document or an individual element.

<html lang="en">

For a document primarily written in Odia, the language tag can be set to:

<html lang="or">

Use an appropriate language tag for the actual content. Language information helps assistive technologies, search systems and other tools interpret text correctly.

5. Understanding the head Element

The head element contains document metadata, the page title, stylesheet references, certain scripts and other information about the document.

Example

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>HTML Learning - Codementrix</title>
    <meta name="description"
          content="Learn HTML with practical examples.">
</head>

Important Elements in head

<title> defines the document title.
<meta> provides metadata such as character encoding and description.
<link> connects external resources, commonly stylesheets.
<style> contains embedded CSS.
<script> can load or contain JavaScript.
<base> can define a base URL for relative URLs and a default browsing context for links.

Not every possible element is valid inside head. Use elements according to their defined HTML content rules.

6. Understanding the body Element

The body contains the main content of the webpage, including headings, paragraphs, images, links, forms, tables and other content elements.

<body>
    <header>
        <h1>Codementrix</h1>
    </header>

    <main>
        <h2>Learn HTML</h2>
        <p>Practice building webpages.</p>
    </main>

    <footer>
        <p>Copyright 2026 Codementrix</p>
    </footer>
</body>

The header, main and footer elements are examples of semantic elements. You will study them in detail in a later section.