Text and headings
<h1>Main heading</h1>
<h2>Sub heading</h2>
<h3>Section heading</h3>
<p>A paragraph of text.</p>
<strong>Important text</strong>
<em>Emphasised text</em>
<br> <!-- line break -->
<hr> <!-- thematic break -->Use headings to describe the document structure: a main heading, sections and subsections. Choose levels in order and use CSS to change their size. <strong> marks importance and <em> marks emphasis. <br> creates a line break within content; use paragraphs and margins for separate blocks.
Links and images
<a href="https://example.com">Visit example.com</a>
<a href="/about">Internal link</a>
<a href="mailto:hi@example.com">Email link</a>
<img src="photo.jpg" alt="Description"
width="300" height="200">Link text should describe its destination. The relative URLs above are placeholders; replace them with paths that exist or full HTTPS URLs when using the viewer. Give informative images descriptive alt text and decorative images alt="". Image dimensions let the browser reserve space while loading.
Lists
<!-- Unordered list -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- Ordered list -->
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>Use <ul> when order does not matter and <ol> for sequences such as instructions. A nested list belongs inside a <li>.
Tables
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #777; padding: 8px; }
</style>
<table>
<caption>Team members</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Engineer</td>
</tr>
<tr>
<td>Bob</td>
<td>Designer</td>
</tr>
</tbody>
</table>Use tables for related rows and columns of data. The caption names the table, and scope="col" identifies column headers. Use CSS for borders and spacing.
Forms
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"
placeholder="Your name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"
placeholder="Your message"></textarea>
<button type="submit">Send</button>
</form>Match each label’s for value to the field’s id. A placeholder is a hint, not a label. Input types such as email and tel can offer suitable mobile keyboards. This example has no submission endpoint; a working form also needs a destination or JavaScript to handle the data.
Page structure
<header>Site header</header>
<nav>Navigation links</nav>
<main>
<article>
<h1>Article title</h1>
<p>Article content</p>
</article>
<aside>Sidebar</aside>
</main>
<footer>Site footer</footer><main> contains the page’s main content. <article> groups content that can stand alone, <aside> holds related material, and <nav> identifies a major set of navigation links.
Common attributes
id: an identifier that must be unique in the document.class: one or more class names, commonly used by CSS and JavaScript.style: CSS declarations applied to one element.href: a link destination.src: the URL of an image, script or other resource.alt: alternative text for an image.title: advisory text, often shown as a mouse tooltip. Do not rely on it as the only label.placeholder: a short hint inside an empty form field.
Check the result
Open an example in the editor and change it to suit your page. Use the mistakes guide to check markup, or the HTML basics guide to build a complete document from these elements.