HTML — The Structure of Every Webpage
HTML is the foundation of the web. Before CSS styling or JavaScript interactivity, every page starts here. This guide covers everything a beginner needs to write clean, semantic HTML.
What is HTML?
HTML stands for HyperText Markup Language. It's the standard language used to create the structure of web pages. Every website you've ever visited — whether it's a simple blog or a complex application — is built on HTML.
HTML isn't a programming language. You can't use it to do calculations or write logic. Instead, it's a markup language — it uses special tags to describe what each piece of content is. Is this text a heading? A paragraph? An image? A link? HTML answers those questions.
When you type a web address into your browser, the browser downloads an HTML file from a server and "renders" it — displaying it visually according to the HTML tags and any attached CSS. If you right-click any webpage and choose "View Page Source", you'll see the raw HTML behind it.
How HTML Tags Work
HTML uses tags to mark up content. A tag is a keyword wrapped in angle brackets: <tagname>. Most tags come in pairs — an opening tag and a closing tag, with content in between:
<p>This is a paragraph of text.</p><h1>This is a main heading.</h1><strong>This text is bold and important.</strong>The closing tag has a forward slash before the tag name. Some tags are "self-closing" — they don't wrap content and don't need a closing tag. Images are the most common example:
<img src="photo.jpg"alt="A dog sitting on a beach"><br><!-- line break --><hr><!-- horizontal rule / divider --><input type="text">Tags can also have attributes — extra information added inside the opening tag. In the image example above, src (the file path) and alt (the description) are attributes. Attributes always follow the format name="value".
Document Structure
Every HTML page follows the same basic structure. This is the minimum a valid HTML5 document needs:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1"><title>My Page Title</title><link rel="stylesheet"href="styles.css"></head><body><h1>Hello, world!</h1><p>This is my first webpage.</p></body></html>Breaking this down: <!DOCTYPE html> tells the browser this is HTML5. <html> is the root that wraps everything, and lang="en" declares the page language. The <head> contains invisible metadata — the page title, CSS links, and meta tags. The <body> contains everything visitors actually see on screen.
The 10 Most Important HTML Tags
1. Headings — <h1> to <h6>
Headings define a page's content hierarchy. <h1> is the main title — use it once per page. <h2> is for major sections, <h3> for sub-sections, and so on. Search engines use heading hierarchy to understand page structure.
<h1>Page Title — Only One Per Page</h1><h2>Major Section Heading</h2><h3>Sub-section Heading</h3>2. Paragraph — <p>
The most common tag on any page. Wraps a block of text. Browsers add automatic spacing between paragraphs. Never use multiple <br> tags as fake paragraph spacing — use proper <p> tags instead.
3. Links — <a>
The anchor tag creates hyperlinks. The href attribute defines the destination. Add target="_blank" to open in a new tab, and always include rel="noopener" with external links for security.
<a href="/about">About Us</a><a href="https://example.com"target="_blank"rel="noopener">External Link</a><a href="mailto:hello@example.com">Email Me</a>4. Images — <img>
Always include both src (file path) and alt (description). The alt text is read by screen readers and shown if the image fails to load. Adding width and height attributes prevents layout shift while loading.
<img src="team-photo.jpg"alt="The Webgrade team at our London office"width="800"height="450">5. Lists — <ul>, <ol>, <li>
Use <ul> for unordered lists (bullet points) and <ol> for ordered lists (numbered). Each item is wrapped in <li>.
6. Divs and Spans — <div>, <span>
<div> is a block-level container with no semantic meaning — used to group elements for layout or styling. <span> is its inline equivalent. Both are generic containers; use semantic tags whenever possible.
7. Forms — <form>, <input>, <button>
<form action="/submit"method="post"><label for="email">Email address</label><input type="email"id="email"name="email"required><button type="submit">Subscribe</button></form>8. Semantic Layout — <header>, <nav>, <main>, <footer>
HTML5 semantic tags describe what sections of a page are, not just how they're styled. This improves accessibility, SEO, and code readability. Use <header> for the top of a page or section, <nav> for navigation links, <main> for the primary content (once per page), and <footer> for closing content.
9. Meta Tags — inside <head>
Meta tags provide information about the page to browsers and search engines. The most important ones are the title, description, and viewport tag. The description appears in Google search results below your page title.
<title>Page Title — Keep Under 60 Characters | Brand</title><meta name="description"content="A clear, compelling description of this page. 150–160 characters."><meta name="viewport"content="width=device-width, initial-scale=1"><meta charset="UTF-8">10. Tables — <table>
Use tables only for tabular data — not for page layout (that's what CSS Grid and Flexbox are for). A proper table has a <thead>, <tbody>, table rows <tr>, header cells <th>, and data cells <td>.
Semantic HTML — Why It Matters
Semantic HTML means choosing tags that describe the meaning of content, not just its appearance. Compare these two approaches:
<div class="header"><div class="nav">...</div></div><div class="main-content"><div class="article">...</div></div><header><nav>...</nav></header><main><article>...</article></main>The semantic version is better for three reasons: screen readers can navigate by landmark regions (header, main, nav), search engines understand the page structure, and the code is more readable for humans too.