Basic HTML Document
A complete HTML5 document with common elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A sample page">
<title>My Awesome Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is a paragraph.</p>
</article>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
Attributes
Various attribute types:
<!-- Different attribute formats -->
<input type="text" name="username" required>
<input type='email' value='user@example.com'>
<input type=checkbox checked disabled>
<!-- Data attributes -->
<div data-user-id="123" data-role="admin"></div>
<!-- Boolean attributes -->
<button disabled>Click Me</button>
<video controls autoplay muted></video>
<!-- Custom attributes and ARIA -->
<div
class="container"
id="main-content"
aria-label="Main content area"
role="main"
data-component="layout">
Content here
</div>
HTML Entities
Named and numeric character references:
<!-- Named entities -->
<p>Copyright © 2025</p>
<p>Less than < and greater than ></p>
<p>Ampersand & and quotes "</p>
<p>Non-breaking space</p>
<!-- Numeric entities -->
<p>Em dash — (decimal)</p>
<p>Euro sign € (hexadecimal)</p>
<p>Emoji 😀 (smiley face)</p>
<!-- Special characters -->
<p>Math: × ÷ ± ≠</p>
Forms
Form elements and input types:
<form action="/submit" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="120">
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select...</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
</select>
<label>
<input type="checkbox" name="subscribe">
Subscribe to newsletter
</label>
</fieldset>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
Semantic HTML5
Modern semantic elements:
<article>
<header>
<h1>Article Heading</h1>
<time datetime="2025-10-26">October 26, 2025</time>
<address>By <a href="/author">John Doe</a></address>
</header>
<section>
<h2>Introduction</h2>
<p>Article content...</p>
</section>
<aside>
<h3>Related Links</h3>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>
</aside>
<footer>
<p>Published under <a href="/license">CC BY</a></p>
</footer>
</article>
Comments and CDATA
HTML comments and CDATA sections:
<!-- This is a single-line comment -->
<!--
Multi-line comment
spanning multiple lines
with various content
-->
<!-- Nested tags in comments: <div></div> -->
<script>
// <![CDATA[
// CDATA wrapped in JavaScript comments (legacy technique)
// JavaScript comments should be highlighted
var x = 1 < 2 && 3 > 2;
console.log("No need to escape < > &");
/* Multi-line comment
inside CDATA */
// ]]>
</script>
Media Elements
Images, video, and audio:
<!-- Images -->
<img src="photo.jpg" alt="Description" width="800" height="600">
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="fallback.jpg" alt="Responsive image">
</picture>
<!-- Video -->
<video controls width="640" height="360" poster="preview.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
Your browser doesn't support video.
</video>
<!-- Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser doesn't support audio.
</audio>
Embedded JavaScript
JavaScript in script tags with proper syntax highlighting:
<!-- Default script tag (JavaScript) -->
<script>
// Single-line comment
const greeting = "Hello, World!";
/* Multi-line comment
explaining the code */
function sayHello(name) {
console.log(`Hello, ${name}!`);
}
// Modern JavaScript features
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
// Async/await
async function fetchData() {
const response = await fetch('/api/data');
return response.json();
}
</script>
<!-- Explicit JavaScript type -->
<script type="text/javascript">
// Traditional inline script
document.addEventListener('DOMContentLoaded', function() {
// Event handler code
console.log('Page loaded');
});
</script>
<!-- Import map (JSON syntax) -->
<script type="importmap">
{
"imports": {
"vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js",
"lodash": "/node_modules/lodash-es/lodash.js"
}
}
</script>
<!-- ES Module -->
<script type="module">
// Module-scoped code
import { helper } from './utils.js';
class MyComponent {
constructor() {
this.name = 'Component';
}
render() {
// Rendering logic
return `<div>${this.name}</div>`;
}
}
</script>