A complete HTML document
This example contains a page title, a heading and a paragraph:
<!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><!DOCTYPE html> selects standards mode. The lang attribute declares the page language for tools such as screen readers. Inside <head>, the charset sets the text encoding and the viewport tag tells mobile browsers to use the device width. Visible content goes in <body>.
Headings, text and links
<h1>to<h6>mark heading levels.<p>marks a paragraph.<a href="…">creates a link.<img src="…" alt="…">displays an image with alternative text.<ul>and<ol>contain unordered and ordered lists.
Use an <h1> for the main title, then <h2> for sections and <h3> for subsections. Choose heading levels by their place in the document; CSS controls their visual size. Use elements such as <main>, <nav> and <footer> where they describe the content. A <div> is a container with no such meaning.
Add some CSS
The style attribute applies CSS to one element:
<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>For styles used by several elements, put CSS in a <style> block in the head and select elements by tag or class. A separate stylesheet also works when its URL is accessible. An imported HTML file does not give the viewer access to other local files; the file-opening guide explains that limit.
Make the page usable with a keyboard and screen reader
Give informative images meaningful alt text and decorative images an empty alt="". Pair form inputs with labels. Use <button> for actions and <a href="…"> for navigation so they have built-in keyboard behaviour. These are starting points; also check contrast, focus and the reading order.
Try a change
Open the example, change the heading and add a second paragraph. Then add a link and check where it goes. Use the HTML cheat sheet for more examples or check common mistakes if the result looks wrong.