NOA Labs

HTML Introduction

What HTML is, the anatomy of an element, and the document structure every HTML page starts from.

What is HTML?

HTML (HyperText Markup Language) is the markup language that defines the structure and content of every web page. It isn't a programming language — there's no logic, no variables, no loops — it's a system of elements that tell the browser what each piece of content is: a heading, a paragraph, a list, an image, a link.

HTML
<h1>Welcome</h1>
<p>This is a paragraph of text.</p>

Browsers read HTML top to bottom and build the DOM (Document Object Model) — an in-memory tree representation of the page — which CSS then styles and JavaScript can manipulate. HTML, CSS, and JavaScript are the three foundational technologies of the web, each with a distinct job: HTML for structure, CSS for presentation, JavaScript for behavior.

Anatomy of an element

Most HTML elements consist of an opening tag, content, and a closing tag:

HTML
<tagname attribute="value">Content goes here</tagname>
  • <p> — the opening tag
  • attribute="value" — optional attributes that configure the element (e.g. href, class, id)
  • </p> — the closing tag

Some elements are void elements — they never wrap content and have no closing tag:

HTML
<img src="cat.jpg" alt="A sleeping cat">
<br>
<input type="text">

Document structure

Every valid HTML page follows the same skeleton:

HTML
<!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>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>
  • <!DOCTYPE html> — tells the browser this is HTML5. It must be the very first line. Without it, older browsers can fall back to "quirks mode," where layout and box-model rules behave inconsistently.
  • <html lang="en"> — the root element wrapping the entire document. The lang attribute matters for accessibility (screen readers use it to pick the right pronunciation) and SEO.
  • <head> — metadata that isn't rendered directly on the page: character encoding, the viewport setting, the page <title>, linked stylesheets, and <meta> tags for SEO/social previews.
  • <body> — everything the visitor actually sees: text, images, forms, buttons, links.

The <head> in more detail

Tag Purpose
<meta charset="UTF-8"> Declares the character encoding so text (including non-English characters and emoji) renders correctly. Should always be the first thing inside <head>.
<meta name="viewport" ...> Tells mobile browsers to render the page at device width instead of zoomed-out desktop width — essential for any responsive layout.
<title> The text shown in the browser tab and used as the default link text in search results.
<link rel="stylesheet" href="..."> Loads an external CSS file.
<script src="..."></script> Loads an external JavaScript file (often placed at the end of <body>, or loaded with defer, so it doesn't block page rendering).

Elements vs. tags vs. attributes

These three words get used loosely, but they mean specific things:

  • A tag is the markup itself: <p> or </p>.
  • An element is the tag plus its content: <p>Hello</p>.
  • An attribute is extra information inside the opening tag: <a href="/about">About</a> — href is the attribute, /about is its value.

Comments

HTML
<!-- This is a comment and is not rendered by the browser -->
<p>Visible text</p>

Comments are useful for leaving notes for other developers (or your future self) directly in the markup.

A complete minimal page

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NOA Labs — Minimal Page</title>
</head>
<body>
    <header>
        <h1>NOA Labs</h1>
    </header>

    <main>
        <p>Learning HTML starts with understanding structure, not decoration.</p>
        <a href="https://noalabs.dev">Visit NOA Labs</a>
    </main>

    <footer>
        <p>&copy; 2026 NOA Labs</p>
    </footer>
</body>
</html>

This is a fully valid HTML5 document — it has a doctype, a language, encoding, a title, and structured content. Every page you build, no matter how complex, starts from this same skeleton.

Common mistakes

  • Forgetting <!DOCTYPE html>, which can silently trigger quirks-mode rendering in some browsers.
  • Omitting the viewport <meta> tag, causing mobile browsers to render a shrunk-down desktop layout instead of a responsive one.
  • Nesting elements incorrectly (e.g. a <div> inside a <p>) — block-level elements generally shouldn't be nested inside inline or text-level elements.
  • Using <br> to create visual spacing between sections instead of CSS margins — <br> should only represent an actual line break within content (like a poem or address), not layout spacing.