# HTML Explained: The Skeleton Every Website Is Built On

## Introduction

Every website you have ever visited is, underneath, an HTML document. HTML (HyperText Markup Language) is not a programming language — it has no logic, no loops, no variables. It is a way of describing structure: this is a heading, this is a paragraph, this is a link, this is a list. Everything else — CSS for styling, JavaScript for behaviour — builds on top of that structure.

## Tags, elements, and nesting

HTML is made of tags in angle brackets. Most come in pairs: an opening tag, content, and a closing tag.

```html
<article>
  <h1>The Practical Developer</h1>
  <p>Practical tutorials, tools, and tips for developers.</p>
  <a href="https://practicaldevblog.blogspot.com/">Visit the blog</a>
</article>
```

`<article>` groups a self-contained piece of content, `<h1>` is the main heading, `<p>` is a paragraph, and `<a>` is a link whose destination lives in the href attribute. Elements nest inside each other like boxes — and like boxes, they must be closed in the right order, innermost first.

## Semantic HTML: meaning, not just boxes

Older pages wrapped everything in generic `<div>` tags. Modern HTML uses semantic tags that say what content is, not just how it should look:

```html
<header>...</header>
<nav>...</nav>
<main>
  <section>...</section>
  <aside>...</aside>
</main>
<footer>...</footer>
```

This matters for two practical reasons. Screen readers use these landmarks to help blind users navigate a page, and search engines use them to understand what a page is about. Writing semantic HTML is therefore both an accessibility practice and an SEO practice — for free, from the same tags.

## Forms: the interactive half of HTML

Forms are how users send information to a website — and they are pure HTML until the server (like PHP, from the previous post) takes over:

```html
<form action="/search" method="get">
  <label for="q">Search:</label>
  <input type="search" id="q" name="q" required>
  <button type="submit">Go</button>
</form>
```

`<label>` ties the text to the input (clicking the label focuses the field), required blocks empty submissions, and type="search" gives phones the right keyboard. Good forms are mostly about these small details.

## Takeaway

HTML is structure, not logic: headings, paragraphs, links, lists, and forms, nested properly. Semantic tags add meaning that helps both people using screen readers and search engines find their way around — and every framework, from React to Vue, ultimately renders down to this.

Originally published at https://practicaldevblog.blogspot.com/2026/10/html-explained-skeleton-every-website.html