Getting Started
2 snippetsBasic HTML document structure
Basic Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>Comment
<!-- This is a comment -->Headings
1 snippetsDocument structure and hierarchy
All Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Text
7 snippetsFormatting and organizing text
Paragraph
<p>This is a paragraph.</p>Bold
<strong>Bold text</strong>
<b>Bold text</b>Italic
<em>Emphasized text</em>
<i>Italic text</i>Line Break
Line 1<br>Line 2Horizontal Rule
<hr>Preformatted
<pre>Preformatted
text</pre>Code
<code>const x = 10;</code>Tired of looking up syntax?
DocuWriter.ai generates documentation and explains code using AI.
Links & Images
4 snippetsHyperlinks and media
Link
<a href="https://example.com">Link</a>Link New Tab
<a href="https://example.com" target="_blank">Open in new tab</a>Image
<img src="image.jpg" alt="Description">Image with Link
<a href="/page">
<img src="logo.png" alt="Logo">
</a>Lists
3 snippetsOrdered and unordered lists
Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Ordered List
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>Description List
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>Tables
2 snippetsTabular data
Basic Table
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>Table with Sections
<table>
<thead>
<tr><th>Name</th></tr>
</thead>
<tbody>
<tr><td>John</td></tr>
</tbody>
</table>Forms
5 snippetsUser input elements
Form
<form action="/submit" method="post">
<input type="text" name="username">
<button type="submit">Submit</button>
</form>Input Types
<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="date">
<input type="checkbox">
<input type="radio">Textarea
<textarea rows="4" cols="50"></textarea>Select
<select name="option">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>Label
<label for="email">Email:</label>
<input type="email" id="email">Semantic HTML
5 snippetsMeaningful structure
Article
<article>
<h2>Article Title</h2>
<p>Content...</p>
</article>Section
<section>
<h2>Section Title</h2>
<p>Content...</p>
</section>Header & Footer
<header>
<h1>Site Title</h1>
</header>
<footer>
<p>© 2025</p>
</footer>Nav
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>Main & Aside
<main>
<p>Main content</p>
</main>
<aside>
<p>Sidebar</p>
</aside>