Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
HTML is not that much fun after a certain time; writing tags, nested tags again and again for different sections, is a boring and…
Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
HTML is not that much fun after a certain time; writing tags, nested tags again and again for different sections, is a boring and time-consuming task. Imagine writing the opening tag and then writing the closing tag. Why can’t it close automatically?. To make our lives easier, developers introduced a tool called Emmet.
What is Emmet
Emmet is a toolkit that uses abbreviations to speed up the process of writing code. Emmet is a shortcut language for HTML. We can simply write an abbreviation, then hit tab, and it automatically converts it into a tag.
Emmet is fun!
Here, we can use any HTML element, such as body head h1 br etc., and this tool is intelligent enough to differentiate whether it is a self-closing tag or needs to be closed.
Basic Syntax and Abbreviations
Emmet is a really fun tool to use. Let me show you how you can play with Emmet and save your time.
Generate the HTML document
We have written HTML documents (boilerplate code) hundreds of times before actually making a web page.
<html>
<head>
<title></title>
</head>
<body></body>
</html>Do we have to type all this every time? Answer is NO! We can use an Emmet shortcut ! to generate a boilerplate code.
A “!” can transform into HTML document
Generate the Lorem Ipsum
Writing lorem ipsum is the best way if we want a few random words to act as a content copy.
Tadaaa! 10 words of lorem ipsum
Nesting abbreviation using “>”
Nesting is useful when we know what we need inside that element, for example: Need 10 lorem-ipsum words inside a p tag. For this, we use > opearator which tells Emmet that it needs to be nested.
Lorem ipsum inside p tag
Using “*” to multiply the elements
The best example for this would be list items inside an ordered/unordered list. If we need more than one list items we can use this as shown below
mutliplied list-item
Adding Class or IDs
Adding classes or ID’s to any element is really easy. There are two symbols that we use to differentiate between them.
- For class, we use
.followed by classname - For id, we use
#followed by id-name
Adding classname inside div
Similarly, we can use # to add id-name.
Adding Attributes to an element
Adding attributes using Emmet is also very easy; for this, we need to write attributes inside [] and then hit tab. Use it when there is more than one attribute for an element, such as:
Multiple attributes for an element
Conclusion
Writing code without any tools is also fine, but after a few days or months, these elements don’t feel that interesting to write. We are developers, we’re here to write logic to solve a problem; we are not here to write div element 1000 times in a webpage. To make development easier and enjoyable, these tools really save a lot of time.
메타데이터
- post_id
- a91fbf2c536f
- slug
- emmet-for-html-a-beginners-guide-to-writing-faster-markup-a91fbf2c536f
- url
- https://medium.com/@yugSaini/emmet-for-html-a-beginners-guide-to-writing-faster-markup-a91fbf2c536f
- canonical_url
- https://medium.com/@yugSaini/emmet-for-html-a-beginners-guide-to-writing-faster-markup-a91fbf2c536f
- author_url
- https://medium.com/@yugSaini
- status
- ok
- fetched_at
- 2026-07-13 06:23:13
