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.
<div></div>.class : Creates a <div> with a class attribute.
<div class="class"></div>#id : Creates a <div> with an ID attribute.
<div id="id"></div>ul>li*3 : Generates an unordered list with 3 list items.
<ul>
<li></li>
<li></li>
<li></li>
</ul>nav>ul>li*4>a : Creates a navigation menu with 4 links inside list items.
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>section.content>h2.title+p : Creates a section with a class, a heading, and a paragraph.
<section class="content">
<h2 class="title"></h2>
<p></p>
</section>form:post>input:text+input:password+button:submit : Creates a login form with username and password fields and a submit button.
<form action="" method="post">
<input type="text" name="" id="">
<input type="password" name="" id="">
<button type="submit"></button>
</form>table>thead>tr>th3 ^^tbody>tr2>td*3 : Creates a table with a header (3 columns) and two body rows (3 columns each).
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>img:src : Generates an image tag with src and alt attributes.
<img src="" alt="">input:checkbox : Creates a checkbox input.
<input type="checkbox" name="" id="">input:radio : Creates a radio input.
<input type="radio" name="" id="">a:link : Generates an anchor (<a>) tag with an empty href.
<a href=""></a>button:submit : Creates a button element for form submission.
<button type="submit"></button>label[for=id] : Creates a label linked to a specific form field.
<label for="id"></label>.wrapper>.header+.content+.footer : Creates a layout structure with wrapper, header, content, and footer sections.
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>Last updated