HTML basics: elements that give a page its structure
Every web page you've ever opened is a tree of elements: a heading here, a paragraph there, sections that group them. HTML is how you write that tree down.
The big idea
An HTML element wraps content in an opening and closing tag; elements nest inside each other to give a page its structure and meaning.
See it in code
An element is an opening tag, some content, and a closing tag. h1 is the page's main heading and p is a paragraph. (The class lists are styling; set them aside for now.)
<h1 class="text-5xl font-extrabold text-sky-300">COSMOS</h1>
<p class="text-slate-300">Explore the universe through NASA's real missions and images.</p>Elements appear on the page in the order they're written. The tag name says what the content is: a top-level heading, then a paragraph.
Elements nest. A section groups related content, and a span wraps part of a line so that one piece can be treated differently:
<section class="px-6 py-8 text-center">
<p class="text-sm uppercase tracking-widest text-violet-400">NASA Outreach Program</p>
<h1 class="text-5xl font-extrabold text-sky-300">COSMOS</h1>
<p class="text-slate-300">Explore NASA's <span class="font-semibold text-white">real</span> missions and images.</p>
</section>The indentation mirrors the nesting: the span is inside a p, which is inside the section. Whatever opens inside an element must close inside it too.
Semantic elements name the parts of a page. header, main, section, and footer look like plain boxes, but they tell browsers, search engines, and screen readers what each part is for:
<header class="bg-slate-900 px-6 py-4">
<p class="text-lg font-bold text-violet-300">COSMOS</p>
</header>
<main>
<section class="px-6 py-10 text-center">
<h1 class="text-5xl font-extrabold text-sky-300">COSMOS</h1>
<p class="mt-3 text-slate-300">Explore the universe through NASA's real missions.</p>
</section>
<section class="space-y-3 px-6 py-8">
<h2 class="text-2xl font-bold">What is COSMOS?</h2>
<p class="text-slate-300">COSMOS gathers NASA's pictures, missions, and discoveries in one place.</p>
</section>
</main>
<footer class="px-6 py-6 text-sm text-slate-500">Built with NASA's open data</footer>One h1 names the page; each section gets an h2. The footer sits after main, not inside it, because it belongs to the whole page.
The same tree shows up everywhere documents do. A README, an email, an e-book, and the settings screen in an app are all nested, labelled structure underneath.
Try it yourself
Add a third section to main with its own h2, "Missions", and one paragraph. Then move the footer inside main and ask whether the page still describes itself correctly.
The common mistake
Misspelling a tag name. <haeder> isn't an error; the browser quietly treats it as an unknown element with no meaning. Structure breaks silently, so check tag names when something looks off.
What it unlocks
Structure is half the job. Styling comes from utility classes, extra information from attributes, and scripts reach this same tree as the DOM.