Emmet for HTML

What is Emmet?

Emmet is a free and open-source toolkit for text editors that dramatically speeds up HTML and CSS coding by using short abbreviations that expand into full code snippets. It functions like a shorthand language for web development, allowing developers to generate complex code structures with minimal keystrokes, thereby increasing productivity and reducing errors.

Why Emmet is useful for HTML beginners?

Emmet is highly useful for HTML beginners because it acts as a shortcut language that reduces repetitive typing and helps prevent common mistakes, allowing new coders to focus on learning the logic of page structure and hierarchy rather than getting bogged down in syntax.

Key Benefits for Beginners

• Less Repetitive Typing: Instead of manually writing out every opening and closing tag, Emmet lets users type short, CSS-like abbreviations that expand into full HTML code with a single press of the Tab key.

• Fewer Typos and Errors: By automatically generating correct syntax, indentation, and closing tags, Emmet helps beginners avoid common mistakes like forgetting to close tags or mismatching them, which can be frustrating to debug when starting out.

• Focus on Structure and Logic: Emmet shifts the beginner's focus from the mechanical act of typing angle brackets (<>) to understanding the semantic meaning and hierarchy of HTML elements.

• Instant Results: Beginners can quickly generate a full HTML boilerplate with a single character (typing ! and pressing Tab), providing an immediate starting point for building their first web pages.

• Encourages Learning Common Patterns: As beginners use Emmet's intuitive syntax (like . for classes and # for IDs), they naturally start to recognize and apply common HTML patterns and structures more quickly.

• Built-in and Accessible: Emmet is built into most modern code editors like Visual Studio Code and Sublime Text by default, meaning beginners don't need to install extra plugins to start using it right away.

• Saves Time: The time saved on basic, repetitive tasks allows beginners more time to practice building actual projects, learning CSS and JavaScript, and exploring other aspects of web development.

How Emmet works inside code editor?

Emmet works in a code editor by using a small engine (written in JavaScript) that parses a short, CSS-like abbreviation into a full block of HTML or CSS code when the user triggers the expansion (usually by pressing the Tab or Enter key).

How the Process Works

Emmet is built into many modern code editors, such as Visual Studio Code. The workflow is simple:

1. Type an abbreviation: The user types a few characters that represent the desired HTML structure or CSS property, using specific operators for things like nesting, siblings, classes, and IDs. For example, ul>li*3 is an abbreviation for an unordered list with three list items.

2. Trigger expansion: The user presses the designated key, most commonly Tab or Enter, though this can be configured in the editor settings.

3. Emmet expands the code: The editor's Emmet component interprets the abbreviation in real-time and replaces the short text with the complete, properly formatted code snippet.

Basic Emmet syntax and abbreviations

Emmet uses a CSS-like syntax to generate HTML and CSS code rapidly by expanding short abbreviations, typically with the Tab key. This streamlines coding by minimizing repetitive typing.

Basic HTML Abbreviations & Syntax

Basic CSS Abbreviations

Emmet also provides shorthand for CSS properties and values, automatically adding units like px for integers by default.

Creating HTML elements using Emmet

Emmet allows you to create complex HTML structures with simple, CSS-like abbreviations that expand into full code in your text editor. This drastically speeds up the coding process and reduces typing effort.

Core Emmet Operators and Syntax

You can use the following operators to build elements:

• > (Child): Nests elements inside one another.

  • Example: div>ul>li expands to a <div> with a <ul> inside it, which in turn has an <li>.

• + (Sibling): Places elements at the same level.

  • Example: h1+p expands to an <h1> element followed by a <p> element, both as siblings.

• * (Multiplication): Generates multiple elements of the same type.

  • Example: ul>li*5 creates an unordered list with five list items.

• ^ (Climb-up): Moves up one level in the hierarchy before adding the next element.

  • Example: div>h1^p creates an <h1> inside a <div>, then moves back up to the <div> level to add a <p> sibling.

• () (Grouping): Groups complex abbreviations, useful for combining siblings and children, especially with multiplication.

  • Example: (header>ul>li*2)+footer>p creates a header with a nested ul (with two lis), followed by a footer with a nested p, all within an outer implied div or at the same level.

Adding Attributes and Content

• . (Class): Adds a CSS class.

  • Example: p.class-name expands to <p class="class-name"></p>.

• # (ID): Adds an ID.

  • Example: div#main expands to <div id="main"></div>.

• [] (Attributes): Adds custom attributes.

  • Example: input[type=text name=first_name] expands to <input type="text" name="first_name">.

• {} (Text Content): Inserts text inside an element.

  • Example: h1{Hello World!} expands to <h1>Hello World!</h1>.

• $ (Numbering): Used with multiplication to add sequential numbers.

  • Example: ul>li.item$*3 expands to <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul>.

Common Shortcuts

• Boilerplate: Type ! or html:5 and press Tab to generate the full HTML5 document structure.

• Lorem Ipsum: Type lorem or lipsum to generate 30 words of dummy text. You can also specify the number of words, e.g., lorem10.

• Link CSS: Type link:css or link and press Tab to generate a link to a stylesheet.

• Link JS: Type script:src to link a JavaScript file.

Adding classes, IDs, and attributes using Emmet

Emmet uses abbreviations similar to CSS selectors to add classes, IDs, and attributes to HTML elements quickly. After typing the abbreviation, pressing the Tab (or Enter) key expands it into the full HTML code.

Classes and IDs

• Classes are added using the dot notation (.) followed by the class name.

• IDs are added using the hash notation (#) followed by the ID name.

• If no tag name is specified, Emmet defaults to a <div> element.

Custom Attributes

Custom attributes are added using square brackets ([]), similar to attribute selectors in CSS. You can include the attribute name and an optional value inside the brackets.

Combining Selectors

You can combine all of these notations in a single abbreviation to create complex elements with a single keystroke.

• a#main-link.button[href="/about" target="_blank"] expands to:
  <a href="/about" target="_blank" id="main-link" class="button"></a>

Creating nested elements using Emmet

To create nested elements using Emmet, you use the child operator (>) in your abbreviation. Typing the abbreviation and then pressing the Tab key (or Enter, depending on your editor's settings) automatically generates the full HTML structure.

Core Operator: Child (>)

The > symbol indicates a parent-child relationship, nesting the element that follows inside the element that precedes it.

• Example Abbreviation: div>ul>li

• Expands to:html

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

Combining Operators for Complex Structures

You can combine the child operator with other Emmet operators to build more complex and efficient abbreviations.

Practical Examples

• List with multiple items:

  • Abbreviation: ul>li*3

  • Expands to: <ul><li></li><li></li><li></li></ul>

• A card structure:

  • Abbreviation: div.card>h1{Title}+p{Content}

  • Expands to:html

      <div class="card">
        <h1>Title</h1>
        <p>Content</p>
      </div>
    

  • Note: Classes are added with . and text content with {}.

• Complex layout using grouping and climb-up:

  • Abbreviation: div.container>(header>h1)+main>(section>p*2)^footer>p

Expands to:html

<div class="container">
  <header>
    <h1></h1>
  </header>
  <main>
    <section>
      <p></p>
      <p></p>
    </section>
  </main>
  <footer>
    <p></p>
  </footer>
</div>

Repeating elements using multiplication using emmet

To repeat elements using Emmet, you use the multiplication operator (*) followed by the number of times you want the element to be repeated.

Basic Usage

Type the element name, then *, then the number of repetitions, and finally press Tab or Enter to expand the abbreviation.

• Abbreviation: p*3

• Expands to:html

    <p></p>
    <p></p>
    <p></p>
  

Combined with Nesting

The multiplication operator works seamlessly with other Emmet operators like the child operator (>) to create complex structures quickly.

• Abbreviation: ul>li*5

• Expands to:html

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

Adding Item Numbering

You can also number the repeated elements by using the dollar sign ($) within the abbreviation.

• Abbreviation: li.item$*3

• Expands to:html

    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
  

Generating full HTML boilerplate with Emmet

To generate a full HTML boilerplate using Emmet, open an HTML file in your code editor and type a single exclamation mark (!), then press the Tab or Enter key.

Step-by-Step Guide

1. Ensure you are in an HTML file: The file must have the .html extension (e.g., index.html) for Emmet to work correctly.

2. Place your cursor on a new, empty line.

3. Type the Emmet abbreviation: !

4. Expand the abbreviation: Press the Tab or Enter key on your keyboard.

Emmet will instantly expand the abbreviation into the full HTML5 boilerplate, like this:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Your cursor will be automatically placed within the <title> tag, allowing you to immediately add a relevant title to your webpage.

Alternative Methods

• html:5: Typing html:5 and pressing Tab or Enter will produce the same result.

• Editor Settings: In some code editors like VS Code, you can ensure Emmet is correctly set up by checking the settings for "Emmet: Trigger Expansion On Tab".

Conclusion

Emmet is a powerful, time-saving toolkit that has become an essential part of a web developer's workflow by transforming CSS-like abbreviations into full HTML (and CSS) code blocks. It significantly boosts productivity and allows developers to focus on structure and problem-solving rather than repetitive typing.