Emmet's HTML reference

Emmet is a very cool tool that can help you write HTML very quickly. It's like magic. Emmet is nothing new, it has been around for many years and provides a plug-in for every editor.


Emmet is a very cool tool that can help you write HTML very quickly.

It's like magic.

Emmet is nothing new, it has been around for many years and provides a plug-in for every editor. inVS code, Emmet is integrated out of the box, as long as the editor recognizes a possible Emmet command, it will show you a tooltip.

Emmet in VS Code

If there is no other explanation for what you wrote, and VS Code thinks it must be an Emmet expression, it will preview it directly in the tooltip, which is great:

Emmet preview in VS Code

But until I started researching and writing it, I didn't really know how to use all the intricacies of it, so I had to learn how to use it in depth.

I want to use it in my daily work, so this is what I learned.

Create HTML files from scratch

Types of!You will get a basic HTML boilerplate, you can use:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body> </html>

> And +

  • >Means child
  • +Means the same level

    nav>ul>li
    

    <nav> <ul> <li></li> </ul> </nav>

    div+p+span

    <div></div> <p></p> <span></span>

You can combine them to perform more complex markup. VS Code is great for displaying previews when there is no preview in Emmet code snippets

ul>li>div+p+span

<ul> <li> <div></div> <p></p> <span></span> </li> </ul>

upgrade

use^You can use it at any time to upgrade>Create a child:

ul>li>div+p^li>span

<ul> <li> <div></div> <p></p> </li> <li><span></span></li> </ul>

You can use it multiple times to run "up" multiple times:

ul>li>div+p^^p

<ul> <li> <div></div> <p></p> </li> </ul> <p></p>

multiplier

Any label can be added multiple times*:

ul>li*5>p

<ul> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> </ul>

Group expressions to make them more readable

As the multiplication mixes, things start to get more complicated. What if you want to multiply 2 items together? You put them in parentheses( ):

ul>li>(p+span)*2

<ul> <li> <p></p> <span></span> <p></p> <span></span> </li> </ul>

idwithclassAttributes

idwithclassIt is the most commonly used attribute in HTML.

You can use CSS-like syntax to create HTML code snippets that contain them:

ul>li>p.text#first

<ul> <li> <p class=“text” id=“first”></p> </li> </ul>

You can add multiple classes:

ul>li>p.text.paragraph#first

<ul> <li> <p class=“text paragraph” id=“first”></p> </li> </ul>

Add unique class or ID

idMust be unique on your page at all times.

classIt can be repeated, but sometimes you want to add one to the element.

you can use it$:

ul>li.item$*2>p

<ul> <li class=“item1”> <p></p> </li> <li class=“item2”> <p></p> </li> </ul>

Other attributes

Attributes other than class and id must be used[]parentheses:

ul>li.item$*2>p[style="color: red"]

<ul> <li class=“item1”> <p style=“color: red”></p> </li> <li class=“item2”> <p style=“color: red”></p> </li> </ul>

You can add multiple attributes at once:

ul>li.item$*2>p[style="color: red" title="A color"]

<ul> <li class=“item1”> <p style=“color: red” title=“A color”></p> </li> <li class=“item2”> <p style=“color: red” title=“A color”></p> </li> </ul>

Add content

Of course, you can also fill HTML with content:

ul>li.item$*2>p{Text}

<ul> <li class=“item1”> <p>Text</p> </li> <li class=“item2”> <p>Text</p> </li> </ul>

Add an incremental number to the mark

You can add an incremental number to the text:

ul>li.item$*2>p{Text $}

<ul> <li class=“item1”> <p>Text 1</p> </li> <li class=“item2”> <p>Text 2</p> </li> </ul>

The number usually starts at 1, but you can make it start at any number:

ul>[email protected]*2>p{Text [email protected]}

<ul> <li class=“item10”> <p>Text 3</p> </li> <li class=“item11”> <p>Text 4</p> </li> </ul>

Reference to the tags used in the pagehead

abbreviation Rendered html
Associate <link rel="stylesheet" href="" />
Link: css <link rel="stylesheet" href="style.css" />
Link: Favorites <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Link: rss <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
meta: utf <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta: vp <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
style <style></style>
script <script></script>
Script: src <script src=""></script>

General label reference

abbreviation Rendered html
img <img src="" alt="" />
A kind <a href=""></a>
br <br />
hour <hr />
C <!-- -->
tr + <tr><td></td></tr>
Alcohol+ <ol>
  • ul + <ul>
  • Reference for Semantic HTML Tags

    abbreviation Rendered html
    mn <main></main>
    sect <section></section>
    art <article></article>
    Human Development Report <header></header>
    ftr <footer></footer>
    ADR <address></address>
    power <strong></strong>

    Reference for form elements

    abbreviation Rendered html
    form <form action=""></form>
    Form: Get <form action="" method="get"></form>
    Format: Post <form action="" method="post"></form>
    label <label for=""></label>
    enter <input type="text" />
    enter <input type="text" name="" id="" />
    Input: hide, input: h <input type="hidden" name="" />
    Input: text, input: t <input type="text" name="" id="" />
    Input: search <input type="search" name="" id="" />
    Input: Email <input type="email" name="" id="" />
    Enter URL <input type="url" name="" id="" />
    Input: password, input: p <input type="password" name="" id="" />
    Input: date and time <input type="datetime" name="" id="" />
    Input: date <input type="date" name="" id="" />
    Input: datetime-local <input type="datetime-local" name="" id="" />
    Input: month <input type="month" name="" id="" />
    Input: week <input type="week" name="" id="" />
    Input time <input type="time" name="" id="" />
    Input: tel <input type="tel" name="" id="" />
    type in data <input type="number" name="" id="" />
    Input color <input type="color" name="" id="" />
    Input: check box, input: c <input type="checkbox" name="" id="" />
    Input: radio, input: r <input type="radio" name="" id="" />
    Input range <input type="range" name="" id="" />
    Input: file, input: f <input type="file" name="" id="" />
    Input: submit, input: s <input type="submit" value="" />
    Input: image, input: i <input type="image" src="" alt="" />
    Input: button, input: b <input type="button" value="" />
    Input: reset <input type="reset" value="" />
    button: submit, button: s, btn: s <button type="submit"></button>
    Button: reset, button: r, btn: r <button type="reset"></button>
    Button: disable, button: d, btn: d <button disabled="disabled"></button>
    btn <button></button>
    fieldset: disabled, fieldset: d, fset: d, fst: d <fieldset disabled="disabled"></fieldset>
    fst, fset <fieldset></fieldset>
    select <optgroup></optgroup>
    select <select name="" id=""></select>
    Choice: disable, choice: d <select name="" id="" disabled="disabled"></select>
    Select+ <select name="" id=""><option value=""></option></select>
    Option, select <option value=""></option>
    Table+ <table><tr><td></td></tr></table>
    Text area <textarea name="" id="" cols="30" rows="10"></textarea>
    Thalia <textarea name="" id="" cols="30" rows="10"></textarea>

    More devtools tutorials: