HTML File and Basic Document Structure

Learn the required skeleton every HTML document needs and what each core structural tag does.

Every HTML file follows a standard skeleton — a small set of required elements that tell the browser how to interpret the file and where the visible content belongs.

The .html file

An HTML document is simply a plain text file saved with the .html (or .htm) file extension. You can write one in any text editor — no special software is required. When a browser opens a file with this extension (or a server sends it with the right content type), it knows to interpret the text as HTML rather than displaying it as plain text.

The DOCTYPE declaration

<!DOCTYPE html> must be the very first line of an HTML document. It is not technically an HTML tag — it's a declaration that tells the browser "interpret this document using the modern HTML5 standard." Without it, older browsers can fall back into a compatibility mode called "quirks mode" that renders pages inconsistently.

The root, head, and body

After the DOCTYPE, the entire document is wrapped in an <html> element — the root element that contains everything else. Inside it, the document splits into exactly two main parts:

• <head> — metadata about the page: its title, character encoding, linked stylesheets, and other information not directly displayed as page content • <body> — the actual visible content of the page: headings, text, images, links, and everything a visitor sees

Common head elements

Inside <head>, a few elements appear in almost every page. <meta charset="UTF-8"> tells the browser which character encoding to use so text (including special characters and symbols) displays correctly. <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures the page scales properly on mobile devices. <title> sets the text shown in the browser tab and used as the default bookmark name.

The lang attribute on the <html> tag (e.g. <html lang="en">) declares the primary language of the page's content. This helps screen readers choose the correct pronunciation rules and helps search engines serve the page to the right audience.

The standard HTML5 skeleton

<!DOCTYPE html> must always be the first line, with nothing before it. <html> is the single root element — everything else nests inside it. <head> holds metadata; <body> holds visible content — a page needs exactly one of each.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <!-- visible page content goes here -->
</body>
</html>

Code Examples

A complete, minimal, valid HTML5 document containing every required structural piece plus one visible heading. Expected result: A browser tab labeled "SampleApp" and a page body showing one large heading: "Hello SampleApp". Even though this page has almost no content, it is still a fully valid HTML document because it includes DOCTYPE, html, head (with a title), and body.

The <title> text ("SampleApp") appears in the browser tab, not on the page itself — only content inside <body> is visible in the page area.

A more realistic document head that adds an SEO description meta tag and links an external CSS stylesheet. Expected result: The same visible heading and paragraph as before, but now styled according to rules defined in styles.css, and with a browser tab reading "SampleApp — Learn to Build". Metadata tags like <meta name="description"> don't render on the page but influence how search engines display the page in results.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SampleApp</title>
</head>
<body>
    <h1>Hello SampleApp</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn engineering fundamentals online.">
    <title>SampleApp — Learn to Build</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to SampleApp</h1>
    <p>Practical lessons for every engineering branch.</p>
</body>
</html>

Important Rules

<!DOCTYPE html> must be the first line of every HTML document.

There must be exactly one <html> root element wrapping the entire document.

A document must have exactly one <head> and one <body>, in that order, both nested inside <html>.

The lang attribute on <html> should match the page's actual content language for accessibility and SEO.

Where this shows up

Right-click any website and choose "View Page Source" — you will find this exact skeleton (DOCTYPE, html, head, body) at the top of nearly every professionally built page on the internet, from small blogs to large-scale applications.

<html> <body><h1>Oops</h1></body> </html> <!DOCTYPE html> <html lang="en"> <head><title>Oops</title></head> <body><h1>Fixed</h1></body> </html>

Omitting the DOCTYPE and the <head>/<title> can trigger quirks-mode rendering in some browsers and leaves the page without a proper tab title, hurting both consistency and accessibility.

Putting visible content like <h1>Hello</h1> inside <head> Placing all visible content inside <body>, keeping <head> reserved for metadata only

Content placed in <head> is generally not displayed by the browser as part of the page — visible content belongs exclusively inside <body>.

[Identify the Error] What is wrong with this HTML document? <html lang="en"> <head> <title>My Page</title> </head> <body> <h1>Hello</h1> </body> </html> A. The <title> tag is not allowed inside <head>. B. The document is missing the <!DOCTYPE html> declaration at the top. C. The <body> tag should come before the <head> tag. D. The lang attribute is invalid and will cause an error.

B. The document is missing the <!DOCTYPE html> declaration at the top. — The document is missing <!DOCTYPE html> as its very first line. Without it, browsers may render the page in quirks mode instead of standards-compliant HTML5 mode. The <title> inside <head>, the head-before-body order, and the lang attribute are all correct as written.

Write a complete, valid HTML document with the title "My First Page" and a single paragraph in the body that says "This is my first HTML page."

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Page</title> </head> <body> <p>This is my first HTML page.</p> </body> </html>

Start with <!DOCTYPE html>, then build out html/head/body with the required meta tags.