HTML Coding for the Agitated

From the first part of this tutorial, you are already familiar with the general overview of Emmet, as well as a very short (yet powerful) sample of what Emmet can do for you and your workflow. Are you antsy already to get your hands dirty? Welcome to Part 2!

Before we begin, from this point, I will assume the following about you:

• You have your favorite text editor or IDE with the Emmet support and/or plugin installed. Windows Notepad and Mac\’s TextEdit don\’t count.
• You got some familiarity with HTML and CSS.
• You love learning \”shortcut\” tools and techniques, such as Markdown, for example.
• You want to be cool by coding HTML and CSS (and everything else related?) faster without mistakes and hassles.
• You are tired of copying/pasting the same HTML/CSS every single time throughout your markup.
• You are an antsy procrastinator in need of a quicker way to get your website projects done.

In this section, we will be covering some basics in coding HTML using Emmet:

• The DOCTYPEs
• Classes, IDs, (Text) Content
• Attributes
• Nesting

Originally, I was going to cover more than the ones above, but I really want everyone to understand Emmet little by little, so I\’m breaking these up into few pieces. I\’m afraid that if I add a whole lot more that some people may get confused or left behind, so to be fair, let\’s go slow.

Open your text editor right now. I am using Brackets, therefore, whatever I post in my code samples are the output created by Brackets. Your text editor may be a little different from mine, but other than that, they\’re all the same.

Let\’s begin!

The DOCTYPEs

The first thing that we\’re going to cover is the beginning of every HTML markup that we\’re about to code. If we were writing this using the usual HTML, it would probably take some ten seconds to a minute (depending on how fast you type anyway). With Emmet, it would take you less than a second to just a few seconds to write your entire HTML structure (again, depending on how fast you type). Remember the sample from the previous part of this tutorial?

Emmet covers all types of DOCTYPEs that you can use, depending on which HTML DOCTYPE you\’re most comfortable with. Here are the following DOCTYPE abbreviations that you can use, along with the HTML output after you press the Tab key.

• HTML5: exclamation point ! or html:5
  
• XHTML Transitional: html:xt
  
• XHTML Strict: html:xs
  
• HTML 4 Transitional: html:4t
  
• HTML4 Strict: html:4s
  

The DOCTYPEs should always be your first step to your coding using Emmet. The next thing you need to do is to fill in the blanks with the next steps. Let\’s proceed.

Classes, IDs, (Text) Content

Say you want to write your container structure using the div tag. When you type it in HTML, it would look something like this:

So, how would you write that header title (along with the class and the ID and the text in between)? If you\’re familiar with CSS, it\’d be very easy to write it in Emmet. It will look like this:

Let\’s break the example down:

• Our HTML element here is div and the ID is container.
• Emmet will automatically assume that your HTML element is div if you only put in an ID or a class, like the one at the bottom example of the code sample above. It only makes sense because div by itself doesn\’t really do anything until you add a CSS definition to it.

The rule also applies to classes, but be careful with this one. Be sure you add an HTML element next to your class if you\’re defining some other element aside from div.

Did you know that you can even write your text content using Emmet too? Let\’s say we want to write the following paragraph below:

To write your text content using Emmet, you will need the curly brackets {} like how you would write your CSS:

Let\’s get fancy for a bit?

You can combine what you\’ve learned so far like this, for example:

Attributes

We know that there are some HTML elements, like links and images, have their own specific attributes. Say for example, we want to post an image or a link in our content. We can write both of them using brackets [...] next to the element.

Time to get fancy again!

Speaking of links, you can link text using the curly brackets for the text content, like this, for example:

Nesting

Now we know that it\’s very easy to write one line of code using Emmet that we can write every single line of it using Emmet\’s powerful abbreviations like we were writing CSS. But what if we want to write a section or a chunk of HTML code faster with just one line of Emmet code? We can do that too!

Say we want to write this faster below:

Let\’s break this example down for a bit:

• We have a div with an id called container.
• Inside our div, we have three HTML elements (p, span, a), in which the prior two have classes of cuties and linkie.

How do we write all that in one single line? We write them this way:

The Emmet line above is a good example of Nesting. The greater than sign > tells Emmet to nest our paragraph, span, and link elements as children of our div. This one single line just saved us three lines of HTML coding in our markup.

The Three Types of Nesting

There are three types of nesting HTML elements using Emmet. Let\’s take a look at them below:

• Child Operator (>)
  We use the greater than sign to instruct Emmet to add a number of HTML elements as children of the primary element indicated. The example above is an example of Emmet using the child operator. here it is again:
  
• Sibling Operator (+)
  Using the plus sign, we are telling Emmet to place a number of HTML elements next to each other on the same level. In this example, say we want to add a header h1 with a class of title in our little div section. Here\’s how we write it:
  
• Climb-Up Operator (^)
  The child operator descends. The climb-up operator using ^ is in a way, the opposite of that. We are telling Emmet to climb up one level in our little Emmet tree. In this example, say we want to add a blockquote with a memorable quote from Sakura Kinomoto and Syaoran Li from the manga/anime series, Card Captor Sakura, and we want to put it right at the bottom of our paragraph element. Here\’s how we\’re going to do it:
  

Let\’s sum it up!

I\’m pretty sure that by this point, you\’re already confused. That\’s fine, because this is a good time to start practicing, play around with what you\’ve learned so far, and check the results. Once you do, and then you review the results, you\’ll eventually understand how each of these functions and operators work.

On the next part of our Emmet tutorial, we will be covering more basic stuff, and as you can see, it can get a little bit more complicated. That\’s why we\’re doing this little by little. I hope you enjoy this tutorial and feel free to leave a comment or contact me if you have any feedback for me. Thank you very much!