Elements, attributes, forms, semantic tags & best practices
Language<!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="Page description">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<h1>Hello World</h1>
<script src="app.js"></script>
</body>
</html><h1> to <h6> Headings
<p> Paragraph
<br> Line break
<hr> Horizontal rule
<strong> Bold (semantic)
<em> Italic (semantic)
<b> <i> Bold / Italic (visual)
<mark> Highlight
<del> Strikethrough
<ins> Inserted text
<sub> <sup> Subscript / Superscript
<code> Inline code
<pre> Preformatted text
<blockquote> Block quotation
<abbr> Abbreviation
<a href="url"> Hyperlink
<span> Inline container
<div> Block container<!-- Unordered list -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- Ordered list -->
<ol type="1"> <!-- 1, A, a, I, i -->
<li>First</li>
<li>Second</li>
</ol>
<!-- Description list -->
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
<!-- Table -->
<table>
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>30</td></tr>
</tbody>
</table><form action="/submit" method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<input type="email" placeholder="Email">
<input type="password">
<input type="number" min="0" max="100">
<input type="date">
<input type="file" accept="image/*">
<input type="range" min="0" max="100">
<input type="checkbox"> Agree
<input type="radio" name="size" value="s"> Small
<input type="hidden" name="csrf" value="token">
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<textarea rows="4"></textarea>
<button type="submit">Submit</button>
</form><header> Page/section header
<nav> Navigation links
<main> Main content (once per page)
<article> Self-contained content
<section> Thematic grouping
<aside> Sidebar content
<footer> Page/section footer
<figure> Image + caption container
<figcaption> Figure caption
<details> Collapsible content
<summary> Details heading
<time> Date/time
<dialog> Modal dialog
<template> Hidden template<!-- Image -->
<img src="photo.jpg" alt="Description"
width="300" loading="lazy">
<!-- Responsive image -->
<picture>
<source media="(min-width:800px)" srcset="lg.jpg">
<img src="sm.jpg" alt="Photo">
</picture>
<!-- Video -->
<video controls width="640">
<source src="movie.mp4" type="video/mp4">
</video>
<!-- Audio -->
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<!-- Iframe -->
<iframe src="page.html" width="600" height="400"></iframe><!-- Essential meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Page description">
<!-- Open Graph (social) -->
<meta property="og:title" content="Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="image.jpg">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<!-- Preload / Preconnect -->
<link rel="preload" href="font.woff2" as="font">
<link rel="preconnect" href="https://api.com">< < less than
> > greater than
& & ampersand
" " double quote
' ' apostrophe
non-breaking space
© © copyright
® ® registered
™ ™ trademark
— — em dash
– – en dash
… … ellipsis
← ← left arrow
→ → right arrow