Organize Content with HTML

Markup and structure

You've been editing code and seeing changes in the browser, but let's step back and understand what you're actually looking at. The foundation of every webpage is markup — a way of describing the structure of content. Markup tells the browser what different parts of your page are: this is a heading, this is a paragraph, this is a list, this is an image.

It's important to understand that markup describes structure, not appearance. When you write <h1>, you're saying "this is the main heading" — you're not saying "make this text big and bold." The browser happens to display headings in a large, bold font by default, but the real purpose of markup is to define meaning and hierarchy. Visual styling is the job of CSS, which you'll learn in a later exercise.

HTML — HyperText Markup Language — is the standard markup language for the web. Every website you visit uses HTML. It was created in the early 1990s and it remains the foundation of the web today.

HTML basics

HTML uses tags to define elements. Most tags come in pairs: an opening tag like <p> and a closing tag like </p> (note the forward slash). The content goes between them. Some elements don't need closing tags because they don't contain content — elements like <img /> for images or <br /> for line breaks. These are called self-closing tags.

Tags can also have attributes that provide extra information. An attribute is a key-value pair placed inside the opening tag — for example, <a href="https://example.com"> where href is the attribute that tells the link where to go, or <img src="/photo.jpg" alt="A description"> where src points to the image file.

HTML documents form a tree structure through nesting — elements contain other elements, creating parent-child relationships. A <section> might contain an <h2> and a <p>, which together form a meaningful group. Proper nesting is important for the page to work correctly and for accessibility tools to understand the content.

Not all HTML elements are created equal. There are dozens of native HTML elements built into the language — things like <div>, <section>, <p>, <h1> through <h6>, <a>, <button>, <ul>, <li>, and <img>. Native elements are always lowercase, and browsers understand them without any extra code.

Semantic HTML

Among these, some are more meaningful than others. Semantic HTML elements describe their content: <header> for a page or section header, <nav> for navigation, <article> for self-contained content, <footer> for a footer. These are preferred over generic containers like <div> and <span> because they make code more readable, improve accessibility for screen readers, and help search engines understand your page structure. Semantic HTML also helps AI tools comprehend your code better, which matters when you're directing AI to make changes.

Components in your project

You'll notice that in your project files, not everything looks like standard HTML. You'll see tags with capitalized names — things like <Hero />, <Section />, <ProjectCard />. These are components, and they're a key concept in modern web development. Components are custom, reusable pieces of UI defined by frameworks like Astro and React. They're not native to HTML — they compile down to native HTML when built. The capitalization convention makes it easy to tell them apart from native elements at a glance.

What to focus on

You don't need to memorize every HTML element. In practice, you'll use a small set of them regularly: div, section, h1–h6, p, a, button, ul, li, img. That covers most of what you'll encounter day to day. For everything else, MDN Web Docs is the definitive reference — you can look up any element's syntax, attributes, and examples whenever you need.

The practical mindset for working with HTML is: you're learning to read and understand structure, not to memorize every tag. When you see code in a project, you want to know what's going on — what's a heading, what's a container, what's a link, where components are being used. That understanding is what lets you navigate any codebase and give meaningful direction to AI tools.