What Is HTML? How Web Pages Get Their Structure

HTML stands for HyperText Markup Language. It gives web content a structure: this is a heading, this is a paragraph, this is a link, and these items belong in a list. Your browser uses that markup when presenting a page. Learning HTML starts with recognizing those relationships, rather than memorizing a screen full of symbols.

Imagine a community garden notice. It needs a title, an introduction, a list of things to bring, and a link to more information. HTML identifies each part. Fonts, colors, and interactive features can come later. This guide explains the underlying document, so you can read a small piece of markup and understand what it means. MDN’s HTML overview describes this structural role.

What are tags, elements, and attributes?

A tag is a marker written with angle brackets. In <p>Bring a watering can.</p>, <p> starts a paragraph and </p> ends it. The element is the whole paragraph, including its content and those markers. The slash identifies the closing tag.

Elements can contain other elements. A paragraph might contain a link or an emphasized phrase. Nest them like boxes: close the inner element before closing its container. Indentation makes that relationship easier for a person to follow, even though indentation itself does not create the structure.

Some elements are void elements, meaning they cannot contain child content and have no closing tag. An image uses <img>, for example, rather than a pair of tags wrapped around a picture. MDN’s syntax guide explains these building blocks.

Attributes add information inside a starting tag. A link’s href identifies its destination. The lang attribute declares a language, while class groups elements for selection by CSS or JavaScript. An id identifies one element and should be unique within the document. Attribute values are commonly written in quotation marks, such as class="notice". Giving something a class does not automatically change its appearance. See MDN’s global attribute reference for attributes available across HTML elements.

What does a small HTML document look like?

Here is a complete, deliberately plain example. It has no scripts, tracking, form submission, or external resources. The link jumps to another part of the same document. You can read it from the outer container inward: document, body, main content, then individual headings and paragraphs.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Garden morning</title>
</head>
<body>
  <main>
    <h1>Garden morning</h1>
    <p>Join us for a morning outdoors.</p>
    <p><a href="#bring">What to bring</a></p>
    <h2 id="bring">What to bring</h2>
    <ul>
      <li>A watering can</li>
      <li>A sun hat</li>
    </ul>
  </main>
</body>
</html>

The opening doctype tells the browser to use standards mode. The html element encloses the document, with head followed by body. The head holds information about the page, including its character encoding and document title. That title commonly appears in the browser tab; it is separate from the visible h1 heading.

The body holds the page’s content. Here, main identifies the main content area. The language declaration says the document is in English, helping tools choose suitable pronunciation and processing. The WHATWG HTML standard defines the document root and metadata elements.

If you want to experiment, save the example in a plain-text file with an .html extension and open it in a browser. Change the garden title and one list item, save again, and reload. Keep the original nearby so you can compare what changed. This is a small reading exercise, not a requirement to choose hosting or publish a website.

Why does semantic HTML matter?

Semantic HTML expresses what content means. Use headings for headings, lists for collections of items, and navigation elements for major navigation sections. A div is a generic container; it is useful when no more meaningful element fits, but it does not identify a heading or a button by itself.

For the garden notice, ul describes an unordered list and each li contains one item. Use ol when the sequence matters, such as numbered instructions. Heading levels describe organization: the page title can be an h1, with major sections under h2. Choose levels for the outline instead of choosing whichever produces the font size you want. MDN’s element reference groups the available elements by purpose.

How are HTML, CSS, and JavaScript different?

CSS controls presentation, including typefaces, spacing, colors, and layout. The sample still looks like a page without an author-written stylesheet because browsers provide default styles. Those defaults explain why its headings look different from its paragraphs. Changing a heading’s color with CSS does not change its meaning as a heading. See MDN’s explanation of CSS and browser styles.

JavaScript supplies programmable behavior. A garden page might use it to filter upcoming events or update a message after an interaction. HTML supplies the content and controls those features work with. You do not need JavaScript merely to follow an ordinary link. MDN’s JavaScript introduction explains that additional layer; start with the document before adding behavior.

How does HTML help accessibility?

Good structure helps people who navigate differently. Screen-reader users can move among headings, and native buttons provide built-in keyboard operation. A clickable generic container may look like a button while lacking that behavior. Use a link for a destination and a button for an action, then make the wording describe its purpose.

Give informative images useful alternative text, and use an empty alt attribute for purely decorative images. Associate form labels with their inputs. Keep the content in a sensible reading order. These choices provide a stronger starting point, although HTML alone cannot guarantee an accessible page. Contrast, focus visibility, and the behavior of interactive components still need attention. MDN’s accessible HTML guide explains why native elements matter.

What should you check first when learning?

Read your page as an outline before judging its appearance. Can you identify the title, sections, paragraphs, and lists? Next, trace where each element starts and ends. Finally, check the attributes: does each link point where intended, and does each identifier have a clear purpose? Small, understandable examples make these checks easier than copying a large finished layout.

For optional offline study, browse beginner HTML and CSS books on Amazon. Look for current coverage of semantic elements and accessibility. A book is optional; the free references above are enough to begin.