Writing Your First HTML Document

Every web page you have ever visited — whether a news article, a social media feed, or an online store — begins as a plain text file containing HTML. Understanding what that file is, how it is structured, and how a browser transforms it into something visual is the essential first step in learning web development. In this topic you will build a complete, valid HTML document from scratch, line by line, so that each piece of the structure makes sense before you add the next.

What is an HTML Document?

An HTML document is, at its core, nothing more than a plain text file. There is no special binary format, no proprietary encoding, and no software required to create one beyond the simplest text editor. On Windows you could use Notepad; on macOS you could use TextEdit (in plain-text mode); on any platform you could use a dedicated code editor such as VS Code. The key point is that the file stores only characters — the letters, numbers, punctuation, and angle-bracket tags that make up HTML — and nothing else.

What makes an HTML file different from an ordinary .txt file is its file extension and the tags written inside it. When you save a file with the .html extension, a web browser knows to read it as a web page. The browser scans the tags and uses them as instructions: this text should be a large heading, this text should be a paragraph, this should be a clickable link, and so on. The tags themselves are never shown to the visitor; only the rendered result is displayed.

You will also frequently encounter the filename index.html. This is a widely observed convention rather than a technical requirement of HTML itself. When a web server receives a request for a folder rather than a specific file — for example, a visitor navigating to https://example.com/ — the server automatically looks for a file called index.html inside that folder and serves it as the default page. Using index.html as your main filename means your pages will work correctly under this convention without any extra server configuration.

The DOCTYPE Declaration

The very first thing that must appear in any HTML file is the DOCTYPE declaration. It looks like this:

<!DOCTYPE html>

This single line carries significant meaning. It tells the browser — before the browser reads a single tag — that the document is written in HTML5, the current standard for web pages. Without it, many browsers fall back into a mode called quirks mode, in which they attempt to imitate the inconsistent rendering behavior of very old browsers from the 1990s. In quirks mode, layouts can break, spacing can be wrong, and certain modern features may not work as expected. Placing <!DOCTYPE html> on the first line switches the browser into standards mode, ensuring modern, predictable rendering.

A few important rules about the DOCTYPE declaration:

• It must appear on the very first line of the file, before everything else — including blank lines and spaces.
• It must appear before the opening <html> tag and before any other content whatsoever.
• It is not an HTML tag in the usual sense — it is a declaration to the browser. Notice it uses an exclamation mark and has no closing counterpart.
• It is not case-sensitive: <!DOCTYPE html>, <!doctype html>, and <!Doctype HTML> are all equivalent, though the all-uppercase convention shown here is the most widely used style.

The Root <html> Element

Immediately after the DOCTYPE declaration comes the opening <html> tag. This is called the root element because it is the ancestor of every other element in the document — every tag you write will be nested somewhere inside it. Think of it as the outer container that holds the entire page.

<!DOCTYPE html>
<html>

</html>

The </html> closing tag marks the absolute end of the document. Nothing meaningful should be written after it. Every element you will ever add — the <head>, the <body>, and all content within them — lives between these two tags.

You will sometimes see the opening tag written as <html lang="en">. The lang attribute tells browsers and assistive technologies such as screen readers what human language the page is written in. Using lang="en" for English is considered good practice and improves accessibility, but it does not affect whether the document is structurally valid.

The <head> Element

Inside the <html> element there are two direct children: <head> and <body>. The <head> element comes first. It is a container for metadata — information about the page rather than content that appears visually on the page itself.

Two tags you will place inside <head> immediately are:

• <title> — The text inside this tag appears in the browser's tab and in the title bar of the window. It is also the text search engines display as the clickable link in search results. Every HTML document should have exactly one <title> tag.
• <meta charset="UTF-8"> — This tag declares the character encoding of the document. UTF-8 is a standard encoding that supports virtually every character in every human language, including accented letters, punctuation, and symbols. Without this tag, a browser may guess the encoding incorrectly and display garbled text — especially for characters outside basic English. Note that <meta> is a void element: it has no closing tag.

The <head> element can also hold links to stylesheets, scripts, and other metadata, but for a minimal valid document the title and charset declaration are the most important starting points.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My First Page</title>
  </head>

</html>

The <body> Element

After the closing </head> tag and still inside <html>, you place the <body> element. This is where all visible page content lives — every paragraph, heading, image, link, list, form, and anything else a visitor actually sees and interacts with in the browser window.

Some key rules about <body>:

• It opens after </head> and closes before </html>.
• A valid HTML document contains exactly one <body> element. Having multiple <body> tags is invalid and will produce unpredictable rendering.
• Any content you place outside <body> (but inside <html>) may still be displayed by some browsers due to error-correction behavior, but it is invalid HTML and should be avoided.

Writing "Hello, World!"

The traditional first program in any programming language is "Hello, World!" — a minimal example that proves your environment is set up correctly and produces a visible result. In HTML, you achieve this by placing a heading tag inside the <body>:

<h1>Hello, World!</h1>

The <h1> tag defines a top-level heading — the most prominent level of heading in HTML. Browsers render it in large, bold text by default. Using a heading here is not strictly required; you could use a <p> paragraph tag instead and the page would still work. But the heading is visually satisfying as a first result and demonstrates that your structure is correct.

Once you have typed your content, save the file as index.html (make sure your text editor is not secretly adding a .txt extension), then open it by double-clicking the file or dragging it into a browser window. If the words Hello, World! appear as a large heading on a white background and the browser tab shows My First Page, your document is valid and working correctly.

Putting It All Together: The Complete Basic Structure

With all the pieces assembled, a complete, valid, minimal HTML5 document looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Reading through this document from top to bottom, you can trace the exact nesting order that every valid HTML page follows:

• <!DOCTYPE html> — Declares the HTML5 standard to the browser.
• <html> — Opens the root element that wraps the entire document.
• <head> — Opens the metadata section (invisible to the visitor).
• <meta charset="UTF-8"> — Declares character encoding.
• <title> — Sets the browser tab text.
• </head> — Closes the metadata section.
• <body> — Opens the visible content section.
• <h1> — A visible heading the visitor will see.
• </body> — Closes the visible content section.
• </html> — Closes the root element, ending the document.

Notice the indentation used in the example above. HTML does not require indentation — a browser will render the page identically whether it is neatly indented or written on a single line. However, consistent indentation makes the hierarchical structure of the document immediately visible to a human reader. When you can see at a glance that <head> and <body> are children of <html>, and that <meta> and <title> are children of <head>, it is much easier to catch mistakes such as a missing closing tag or an element placed in the wrong section. Developing the habit of indenting your code from the very beginning will save you considerable debugging time as your pages grow more complex.

This template is not just a learning exercise — it is the foundation you will return to every time you start a new HTML file. Every web page in this course, and in professional web development practice, begins with exactly this structure. Mastering it now means every future topic builds on a solid, correct base.