Loading the Stack...

HTML & Structure: The Skeleton

HTML is the foundation of every web page. It provides the meaning and structure that the browser needs to organize content.

What is HTML?

HTML (HyperText Markup Language) is not a programming language; it's a markup language. It uses tags to label content (like "heading," "paragraph," "link") so the browser knows how to display it and what role it plays.

Every piece of text, every image, and every link on the web exists inside an HTML tag. This tagged structure is then translated by the browser into the Document Object Model (DOM).

The Document Object Model (DOM)

The DOM is the browser's internal, tree-like representation of your HTML document. When JavaScript interacts with a webpage—say, hiding a menu or changing text—it's actually interacting with the DOM.

Example: Simple HTML vs. the DOM

<body>
  <header>
    <nav>...</nav>
  </header>
</body>

The browser reads this, creates nodes for `body`, `header`, and `nav`, and connects them in a hierarchy that code can easily traverse.

Why Semantics Matter

Modern web development uses Semantic HTML (HTML5 tags like `<article>` and `<aside>`) to give meaning to content, not just styling.

<header> / <footer>: Defines introductory or closing content for a section or document.
<nav>: Defines a set of navigation links.
<main>: Contains the dominant content unique to the document.
<article> / <section>: Organizes independent, self-contained content (article) or thematic groups (section).
Accessibility Benefit: Screen readers and search engines rely heavily on these tags to understand the structure of the page.

Structure is only half the battle. Ready to make your skeleton look good?

Continue to CSS & Style →