Scribd
Upload
23 views

Basic HTML Document1 Auto Key Strokes in Sublime Text

The document discusses how Emmet can be used to generate basic HTML document structure and tags. It explains how to assign attributes, create sibling and child elements, group elements, multiply elements, add automatic numbering, insert dummy text, and create links using shortcuts. The conclusion states that Emmet boosts productivity for web developers.

Uploaded by

Paul Katema
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

Basic HTML Document1 Auto Key Strokes in Sublime Text

The document discusses how Emmet can be used to generate basic HTML document structure and tags. It explains how to assign attributes, create sibling and child elements, group elements, multiply elements, add automatic numbering, insert dummy text, and create links using shortcuts. The conclusion states that Emmet boosts productivity for web developers.

Uploaded by

Paul Katema
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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 Emmet 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.

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.

You might also like