HTML Basics

The language used to describe what's on a page and how it's structured — not what it looks like.

What is it?

Before a page can be styled or made interactive, something has to say what's actually on it: here's a heading, here's a paragraph, here's a picture, here's a link. That description of content and structure is written in a language called HTML (HyperText Markup Language).

HTML doesn't care about colors, fonts, or spacing — that's a separate job, handled by CSS. HTML's only job is to say what each piece of content is and how the pieces relate to each other: this text is the main heading, this block is a list, this image belongs here, this text is a link to another page.

You write HTML using tags — short instructions wrapped in angle brackets, like <p> for a paragraph. Most tags come in a pair: an opening tag and a matching closing tag, with content in between. An opening tag, its closing tag, and everything between them together form an element. Tags can also carry extra information called attributes — for example, an image tag needs an attribute telling the browser which image file to show.

Using tags that describe the actual meaning of content — a heading tag for a heading, a button tag for a button — rather than generic tags for everything, is called semantic HTML, and it matters more than it might seem: it's what lets screen readers, search engines, and other tools understand your page, not just display it.

Explain like I'm 10

HTML is like the labeled outline of a document — 'this is the title,' 'this is a bullet list,' 'this is a footnote' — written before anyone has decided what font or color anything will be.

Examples

A minimal page

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

Every HTML page has this same basic shape: a declaration of what kind of document it is, then a head with page metadata, then a body with the visible content.

Attributes and semantic elements

<img src="cat.jpg" alt="A sleeping orange cat">

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<button type="submit">Send</button>

src and alt are attributes on the image tag, providing extra detail the tag alone doesn't carry. nav and button are semantic elements — they tell the browser and assistive tools what role this content plays, not just how it looks.

How it works

When a browser receives an HTML document, it reads through the tags from top to bottom and builds an internal tree structure out of them — each element becomes a node, nested inside whichever element contains it. That internal tree is what the browser actually uses to render and later lets JavaScript modify; the original HTML text is just the starting blueprint for building it.

Why does it exist?

HTML exists to separate what content is from how it looks and how it behaves. By having one dedicated, simple language just for structure and meaning, browsers, search engines, screen readers, and countless other tools can all agree on how to interpret any page on the web, regardless of who built it or what it's styled to look like.

When to use it

Every webpage needs HTML — it's the one layer that's never optional. Reach for the semantically correct tag whenever one exists: a button for something clickable that performs an action, a heading tag for a real heading, a list for a genuine list — rather than styling a generic element to merely look the part.

When not to use it

HTML isn't the place to control appearance (that's CSS) or behavior (that's JavaScript). Reaching for extra HTML tags purely to force a visual effect, instead of using CSS for that job, tends to produce confusing, hard-to-maintain markup.

Common mistakes

  • Using a generic element styled to look like a button instead of an actual button element, which breaks keyboard and screen-reader support.

  • Forgetting to close tags, which can cause the browser to misinterpret how content is nested.

  • Treating an image's alt attribute as optional decoration text rather than a real description used by screen readers.

Practice exercises

  1. Easy:

    Write a minimal HTML page with a title, one heading, and one paragraph.

  2. Medium:

    Build a simple page with a navigation bar (nav), a list of three items, and an image with meaningful alt text.

  3. Hard:

    Take a page built with only generic div elements and rewrite it using semantic tags (header, nav, main, button, footer) where appropriate, and explain each change.

Interview questions

What is HTML responsible for, and what is it not responsible for?

HTML describes the structure and meaning of content on a page — headings, paragraphs, links, images. It is not responsible for visual styling, which is CSS's job, or interactive behavior, which is JavaScript's job.

What's the difference between a tag, an element, and an attribute?

A tag is the bracketed instruction itself, like <p> or </p>. An element is the opening tag, its content, and its closing tag together, forming one unit in the page. An attribute is extra information placed inside an opening tag, such as src or href, that gives the browser more detail about that element.

What is semantic HTML, and why does it matter?

Semantic HTML means choosing tags that describe what content actually is — <nav> for navigation, <button> for a clickable action — instead of generic tags styled to look the part. It matters because screen readers, search engines, and browsers use that meaning to decide how to present or announce the content, not just how to draw it.

What does the `<!DOCTYPE html>` declaration do, and what happens if it's missing?

It tells the browser to parse and render the page using the modern HTML standard. Without it, some browsers fall back to quirks mode, an older, less consistent rendering mode kept for backward compatibility, which can subtly change how things like box sizing are calculated.

What's the difference between the `<head>` and `<body>` of a document?

The <head> holds information about the page itself — its title, linked stylesheets, metadata — none of which is rendered as visible content. The <body> contains everything the user actually sees on screen.

Why does the `alt` attribute on an `<img>` matter, beyond being read aloud by screen readers?

It also serves as the text shown in place of the image if the file fails to load, and search engines use it to understand what the image depicts since they can't 'see' the pixels themselves.

What is a void element, and why don't tags like `<img>` or `<br>` have closing tags?

A void element can never contain content or children, so HTML doesn't require — or allow — a separate closing tag for it. <img src="cat.jpg"> is complete on its own; there's nothing for a closing tag to wrap around.

If you forget to close a `<p>` tag before opening another one, does the browser throw an error?

No — HTML parsers are deliberately forgiving. The browser follows a defined error-recovery algorithm: certain elements, like <p>, are automatically closed when an incompatible tag appears, so the page still renders, just not necessarily with the structure you intended.

Given `<ul><li>A<li>B</ul>` with no closing `</li>` tags, how many list items does the browser actually render?

Two. The HTML parser's error-recovery rules automatically close an <li> element as soon as another <li> starts, so the missing closing tags don't merge or drop items — they're inferred.

Why is a `<div>` with a click handler a worse choice than an actual `<button>` for a clickable action?

A <button> comes with built-in keyboard behavior for free: it's reachable via Tab, and pressing Enter or Space activates it, and it's announced as a button to screen readers. A plain <div> has none of that by default — you'd have to manually reimplement focus, keyboard activation, and the accessible role yourself.

What's the difference between an element's `id` and its `class` attribute?

An id is meant to identify one specific element uniquely within the page, while a class is meant to be reused across many elements that share a role or style. id is also used for in-page links (#section) and is typically the fastest way to look an element up.

What happens if two elements on a page share the same `id`?

The HTML is invalid, but browsers won't refuse to render it — document.getElementById and CSS #id selectors will simply match only the first one in the document, silently ignoring the duplicate, which makes this kind of bug easy to miss.

What's the difference between a block-level element and an inline element?

A block-level element, like <p> or <div>, starts on its own line and takes up the full available width by default. An inline element, like <span> or <a>, flows within the surrounding text and only takes up as much width as its content needs. CSS's display property can override this default for any element.

Why does heading order (`<h1>` through `<h6>`) matter, beyond making text bigger?

Screen readers let users jump between headings to navigate a page's structure, the way a sighted user might scan for section titles. Skipping levels or using headings purely for their font size, rather than to reflect actual document structure, breaks that navigation.

What does the default `type` of a `<button>` inside a `<form>` do, and why does it surprise people?

An unset <button> defaults to type="submit", meaning clicking it submits the enclosing form and reloads or navigates the page. Developers who just want a button to run some JavaScript often need to explicitly set type="button" to avoid that unintended submission.

What's the difference between hiding content with an HTML comment versus hiding it with CSS?

Content inside an HTML comment (<!-- ... -->) is never parsed into the page at all — it doesn't exist as an element. Content hidden via CSS is still a real element in the page; it's just not visually shown (or, depending on the technique, still present for screen readers or layout).

You need a piece of text that, when clicked, takes the user to a different page. Should you use `<a>` or `<button>`?

<a href="...">. Anchors are for navigation — they update the URL, work with right-click/open-in-new-tab, and are announced as links. <button> is for triggering an action on the current page, like submitting a form or opening a modal, and has none of that navigation behavior built in.

Why does the browser build a tree out of HTML tags instead of just keeping the raw text around?

A tree lets the browser (and later, JavaScript) know exactly which elements are nested inside which, so it can figure out layout, apply styles based on structure, and target individual elements — none of which is possible while the page is still just a flat string of text.

What's wrong with writing an entire page's content using only `<div>` and `<span>` elements?

Nothing renders incorrectly, but the page loses all semantic meaning — screen readers can't identify headings, landmarks, or buttons, search engines can't tell what's important, and other developers lose the structural hints that tag names like <nav> or <h1> normally provide.