Emmet Abbreviations (VS Code / WebStorm)
| Emmet / Pattern | Result |
|---|---|
| ! | Generate full HTML5 boilerplate |
| div.class#id | Div with class and ID |
| ul>li*5 | UL with 5 LI children |
| div>p+span | Div containing P then Span sibling |
| h1{Hello World} | H1 with text content |
| a[href=#] | Anchor with href attribute |
| input:text | Input type="text" |
| input:email | Input type="email" |
| img[src alt] | Image with src and alt attributes |
| table>tr*3>td*4 | Table: 3 rows, 4 columns each |
| link:css | Link stylesheet tag |
| script:src | Script tag with src attribute |
| meta:vp | Meta viewport tag |
| lorem | Insert Lorem Ipsum paragraph |
| lorem5 | Insert 5-word Lorem Ipsum |
HTML Character Entities
| Entity | Output |
|---|---|
| Non-breaking space |
& | Ampersand & |
< / > | Less than / Greater than < > |
© | Copyright symbol © |
® | Registered trademark ® |
™ | Trademark ™ |
— | Em dash — |
– | En dash – |
… | Ellipsis … |
" | Double quote " |
' | Apostrophe ' |
€ | Euro sign € |
£ | Pound sign £ |
♥ | Heart ♥ |
✓ | Check mark ✓ |
Semantic HTML5 Elements
| Element | Use Case |
|---|---|
<header> | Site or section header |
<nav> | Navigation links block |
<main> | Main content (one per page) |
<article> | Self-contained content (blog post, card) |
<section> | Thematic grouping with heading |
<aside> | Sidebar / tangentially related content |
<footer> | Site or section footer |
<figure> | Image with optional caption |
<figcaption> | Caption for <figure> element |
<details> + <summary> | Native accordion/disclosure widget |
<dialog> | Native modal dialog element |
<time datetime="..."> | Machine-readable date/time |
<mark> | Highlighted / relevant text |
<abbr title="..."> | Abbreviation with tooltip |
Meta Tags & SEO Essentials
| Tag | Purpose |
|---|---|
<meta charset="UTF-8"> | Character encoding (always first) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Responsive viewport (mobile) |
<meta name="description" content="..."> | Page description for search engines |
<meta name="robots" content="index,follow"> | Allow search engine indexing |
<meta property="og:title" content="..."> | Open Graph title (social sharing) |
<meta property="og:image" content="..."> | Open Graph image for link previews |
<link rel="canonical" href="..."> | Canonical URL to prevent duplicate content |
<link rel="preload" as="font"> | Preload critical fonts |