ShortHands
HTML Shorthands are abbreviated notations used primarily in editors like VS Code with Emmet enabled. They allow developers to quickly generate full HTML structures from a compact syntax. Instead of typing full HTML tags manually, you write a short command and the editor expands it into complete code. This significantly speeds up development and reduces errors when building UIs or layouts
html:5 : Generates the basic HTML5 boilerplate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html> ! : Quick shortcut to generate HTML5 base structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>div : Creates a basic <div> element.
.class : Creates a <div> with a class attribute.
#id : Creates a <div> with an ID attribute.
ul>li*3 : Generates an unordered list with 3 list items.
nav>ul>li*4>a : Creates a navigation menu with 4 links inside list items.
section.content>h2.title+p : Creates a section with a class, a heading, and a paragraph.
form:post>input:text+input:password+button:submit : Creates a login form with username and password fields and a submit button.
table>thead>tr>th3 ^^tbody>tr2>td*3 : Creates a table with a header (3 columns) and two body rows (3 columns each).
img:src : Generates an image tag with src and alt attributes.
input:checkbox : Creates a checkbox input.
input:radio : Creates a radio input.
a:link : Generates an anchor (<a>) tag with an empty href.
button:submit : Creates a button element for form submission.
label[for=id] : Creates a label linked to a specific form field.
.wrapper>.header+.content+.footer : Creates a layout structure with wrapper, header, content, and footer sections.
Last updated