HTML5 & CSS 3 Tutorial

Emmet HTML tags Abbreviation Cheat Sheet

Emmet is the number one downloaded Brackets Editor Extension

This Page's Contents

Emmet HTML tags Abbreviation Cheat Sheet

What is Emmett

Emmet is the essential toolkit for web-developers

It is a plugin for many HTML, CSS, XML, XSL & text editors such as

Brackets
Atom
Notepad++
Subline
Web Storm
Build Bootstrap sites with Emmet
Is already installed in Visual Studio
And More

Download from https://docs.emmet.io/ (opens in a new tab)

Emmet HTML tags Abbreviation Cheat Sheet

Enter the Abbreviation then press the tab key

Required Tag: Abbreviation
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>: !
<aside></aside>: aside
<canvas></canvas>: canvas
<blockquote></blockquote>: bq
<bdie></bdi>: bdi
<details></details>: det
<dialog></dialog>: dlg
<figure></figure>: fig
<figcaption></figcaption>: figc
<footer></footer>: ftr
<header></header>: hdr
<main></main>: mn
<mark></mark>: mark
<meter></meter>: meter
<nav></nav>: nav
<prog></prog>: prog
<rp></rp>: rp
<rt></rt>: rt
<section></section>: sect
<summary></summary>: summary
<time></time>: time
<wbr></wbr>: wbr

Emmet html tags NOT Abbreviated Cheat Sheet

The following HTML tags are not abreaviated. Ente4r the name only then tap Tab key

Emmet most used html tags Abbreviation Cheat Sheet

Reqired Tag: Abbreviation
<address></address>: adr
<article></article>: art
<button></button>: btn
<caption></caption>: cap
<colgroup></colgroup>: colg
<datagrid></datagrid>: datag
<datalist></datalist>: datal
<embed></embed>: emb
<fieldset></fieldset>: fset
<fieldset></fieldset>: fst
<footer></footer>: ftr
<header></header>: hdr
<iframe></iframe>: ifr
keygen<keygen></keygen>: kg
<legend></legend>: leg
<object></object>: obj
<optgroup></optgroup>: optg
<output></output>: out
<picture></picture>: pic
<progress></progress>: prog
<strong></strong>: str
<template></template>: tem
<textarea></textarea>: tarea