The basic structure

Every HTML page follows the same skeleton. Here are the essential parts:

<!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>This is my first web page.</p>
</body>
</html>

Try pasting this into the editor to see it rendered instantly. The <!DOCTYPE html> on the first line tells the browser to use modern HTML5 rendering rules — without it, browsers fall back to "quirks mode" which applies decades of legacy bug-compatibility behavior. The lang attribute on <html> helps screen readers pick the right voice and search engines target the right locale. The <meta> tags inside <head>tell the browser the character encoding (so non-ASCII characters render correctly) and the initial mobile viewport (so the page doesn't render zoomed-out on phones).

Essential tags to know

<h1> to <h6> — headings, largest to smallest
<p> — paragraphs of text
<a href="..."> — links to other pages
<img src="..." alt="..."> — images
<ul> and <ol> — unordered and ordered lists
<div> and <span> — generic containers for layout

Use one <h1> per page (the page's main title) and use <h2> through <h6> for nested sections. The visual size of a heading is just a default — change it with CSS. What matters is that the order communicates document structure to assistive tech. Reach for <div> only when no semantic element fits — most layouts have better options like <header>, <main>, <article>, and <footer>.

Adding styles inline

You can add CSS directly to elements using the style attribute. This is a quick way to experiment with colors, fonts, and spacing:

<h1 style="color: navy; font-family: sans-serif;">
  Welcome to my site
</h1>
<p style="color: gray; line-height: 1.6;">
  This paragraph has custom styling.
</p>

Inline styles are great for getting something on the screen fast. Once the page has more than a few elements, move them into a <style> block in <head> or — better yet — a separate .css file referenced with <link rel="stylesheet" href="styles.css">. Inline styles can't be reused, can't use media queries, and override stylesheet-level rules in ways that get confusing fast.

Accessibility basics

Three things give your page a baseline of accessibility for free: lang on <html>, alt on every <img>, and a <label> on every form input. If an image is purely decorative, use alt="" so screen readers skip it cleanly rather than reading the filename. Use real <button> elements for actions and real <a> elements for navigation; click handlers on <div> won't respond to keyboard users or be announced as interactive by screen readers.

Try it yourself

The best way to learn HTML is to write it and see what happens. Open HTML Viewer Cat, paste the examples above, and start experimenting. Change the text, add new tags, break things on purpose — that's how you learn. When you outgrow this primer, the HTML cheat sheet is a flat reference of every tag worth knowing, and common HTML mistakes covers the patterns that look right but quietly break things.