HTML: The Structure of Every Page
Tags, elements, and semantic structure — how to give a page meaning and content.
HTML gives content its meaning
HTML — HyperText Markup Language — is not a programming language. It's a markup language: a way of labelling content so the browser knows what each part is. "This is a heading. This is a paragraph. This is a link." Those labels are called tags, and they're the foundation of every web page on earth.
A tag wraps content with an opening and closing form. The closing tag has a slash. Together, a tag plus its content is called an element:
<h1>Welcome to my site</h1>
<p>This is a paragraph of text.</p>Here <h1> opens a top-level heading and </h1> closes it. The browser renders the content between them as a big, bold heading. Get the mental model right and HTML becomes simple: you're labelling pieces of content so the browser can display them appropriately.
The skeleton every page needs
Every HTML document follows the same basic structure. This boilerplate sets up the page correctly for all browsers:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>My first web page.</p>
</body>
</html>Two regions matter. The <head> holds information about the page that the user doesn't directly see — the title shown in the browser tab, the character encoding, and the all-important viewport tag that makes your site work on mobile. The <body> holds everything visible on the page itself. Everything you build goes inside the body.
The everyday tags
A handful of tags do most of the work. Headings come in six levels, from <h1> (most important) to <h6>. Use exactly one <h1> per page — both for clarity and because search engines treat it as the page's main topic:
<h1>Main title</h1>
<h2>A section</h2>
<p>Paragraphs hold your body text.</p>
<ul>
<li>An unordered list item</li>
<li>Another item</li>
</ul>
<a href="https://codaiman.com">A link to another page</a>
<img src="photo.jpg" alt="A description of the photo">Two of these have attributes — extra information inside the opening tag. The link's href says where it goes; the image's src says which file to show and alt gives a text description (vital for accessibility and SEO). Attributes are how you configure an element's behaviour.
Semantic HTML: tags with meaning
You could build an entire site from <div> tags (a generic container), but modern HTML offers semantic tags that describe their purpose. These make your code readable, your site accessible to screen readers, and your pages friendlier to search engines:
<header>Top of the page — logo and navigation</header>
<nav>The menu of links</nav>
<main>
<section>A distinct section of content</section>
<article>A self-contained piece, like a blog post</article>
</main>
<footer>Bottom of the page — copyright, contact</footer>Reaching for <header>, <nav>, <main>, and <footer> instead of generic divs is a mark of a professional. It tells both humans and machines what each region of your page means — and that meaning is exactly what search engines reward.
Build your first page
Combine everything into a tiny personal page. Type this into the playground and watch it render:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About Mehul</title>
</head>
<body>
<header>
<h1>Mehul Koshti</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I'm learning web development at CWS.</p>
</section>
<section>
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS (coming next!)</li>
</ul>
</section>
</main>
<footer>
<p>Made with HTML</p>
</footer>
</body>
</html>It's functional but plain — black text on a white background. That's exactly right: HTML's job is structure and content, nothing more. Making it beautiful is the job of CSS, which is next.
Finished "HTML: The Structure of Every Page"?
Mark this chapter complete so you can pick up exactly where you left off. Your progress saves locally — sign in to sync across devices.
Was this chapter clear?