How You Can Write Super-Fast HTML with Sublime

By: Sunil Kumar |  In: Programmers Guide  |  Last Updated: 2017/11/08

As a web developer, we always try to increase the productivity and keep searching tool that helps us in it.

If you are one of them who write a lot of HTML and CSS then this post is for you.

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called snippets. While snippets are a good way to boost your productivity. All implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

All implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation.

Emmet is developed and optimized for web-developers whose workflow depends on HTML/XML and CSS but can be used with programming languages too.

In this article, we will learn some cool tips to write HTML with amazing speed using Emmet.

Here in this tutorial, I am using Sublime as a Text Editor, But Emmet is also available for many other editions like Adobe DreamWeaver, TextMate, Eclipse, and Notepad++.

Installing Emmet

You can download Emmet from here. If you are using Sublime text like me you can install is directly from Sublime package Installer.

In case you don’t have any idea about package Installer you can learn how to install Package Installer with sublime Under point 2.1.

When you are done with Install Package, open Install package (Tools-> Commend palette-> Install pckage) and type Emmet and choose it from options and it will be installed in seconds. When you are done with installation restart Sublime Text.

NOTE- In below examples Tab key is used to expand the tags. Most of the text editors have the same built-in functionality.

1. Basic HTML Document

What you do if you start creating any HTML project. You write HTML document code itself or copy it from anywhere. But Emmit provides the facility for generating basic HTML document structure easily.

You can generate by simply typing !(exclamation)+Tab or doc+Tab or HTML:4t+Tab and HTML doc will be in front of you

2. Writing Simple HTML tag

To write simple HTML, for example, for a div tag we just type div and hit Tab key. It can be used to create any tag.

3. Assign attribute to an Element

We can assign any attribute like class, id, src etc. using Emmet-

If we want to assign just Id or class we can use # or . as we use in CSS.

As you see that if you just type #firstdiv by default div element will be created. If you want to specify an element you can type section#firstelement

But if you want to assign any other attribute you can specify easily in [] brackets. Suppose we want to assign src attribute to an img tag we can write

4. Creating Sibling Element

Sibling refers to the element at the same nesting level. If you want to create siblings or parallel element you can simply add + between elements.

5. Creating Child Element/Nesting

Emmet uses the syntax similar to CSS, as we can select child element in CSS with the > sign. In Emmet, we use the same syntax to create child element.

6. Grouping

If you want multiple elements inside an element you can achieve it by grouping them with ().

7. Multiplication

If you want to repeat the same element a number of times this will help you. We can generate multiple elements with an asterisk * sign.

Suppose we want to create 6 div with class=”main” we just simply type- .main*6

8. Automatic Numbering

Automatic numbering will help you to easily write different name with auto incremental number. The right syntax for this feature is a dollar $ sign.

Also Read:

9. Dummy text

If you use dummy text by copying from lorem or lipsum or from somewhere else you don’t need to do that if you have Emmet. Emmet can generate lorem ipsum dummy text for you. we simply write lorem. It will generate a 5 to 7 line of Ipsum text.

In Emmet, we can specify how many words to generate. Say, 7 then type lorem7

10. Link shortcut

If you have a favicon, rss or external CSS file you want to add to your document, you can use link tricks for writing them faster.

  • To insert css-  link:css
  • To insert favicon- link:favicon

Conclusion

Emmet is a really brilliant tool to gain productivity for a web developer. You may face some difficulty in starting but once you pick it up it can significantly boost your productivity. You will be able to write HTML and CSS faster than ever before.

Comments


  • I simply want to mention I am very new to blogging and certainly enjoyed you’re web site. Most likely I’m going to bookmark your blog . You really come with remarkable article content. Appreciate it for revealing your web-site.

  • Leave a Comment

    Your email address will not be published.

    *


    Sunil Kumar


    I am the owner of acmeextension. I am a passionate writter and reader. I like writting technical stuff and simplifying complex stuff.
    Know More

    Subscribe to our mailing list


    %d bloggers like this: