More HTML Coding for the Agitated
Don\’t forget to bookmark this Emmet cheatsheet for your reference!
It\’s been awhile since the last time I\’ve updated, so hopefully this would make up for the somewhat long wait. Ready to learn more?
Last time, we\’ve covered the following:
- The DOCTYPEs
- Classes, IDs, (Text) Content
- Attributes
- Nesting
In this next part, we will be covering the following topics:
- Grouping
- Implicit Tag Names
- Multiplication
- Numbering
- Lorem Ipsum Generator
Chances are, by the time you get to this point, you are already confused. Very confused. The last portion (Nesting) must have intimidated you and are probably having second thoughts of going back to regular HTML coding. I also admit that Emmet can get things a lot more complex than it already is, but the only thing is, you just need to get used to it. Practice with your text editor, play around, and see what you come up. When you figure things out, you\’ll realize that Emmet can be seriously a powerful asset to your coding arsenal.
Alright, let\’s start!
Grouping
Before I start with this section, I will assume that you are any one of the following:
- Writing all of that in one line just to create a huge chunk of HTML syntax is just way too confusing. (Like what the EFF?!)
- You\’re wondering to yourself, \”why am I still learning more Emmet when I\’m already confuzzled about the last part? What was it called again?\”
- You just want a cleaner, nicer way to create one whole chunk of HTML code in your syntax.
Now that we\’re at it, let\’s begin.
Let\’s take a look at the below example:
Now, if we were going to write all that in Emmet using Nesting, it would look something like this:
There are two short lines for this one, but what about if you want to write more than just these two chunks of code, not only that you will be getting confused with the nesting symbols you\’re using, but you will be getting confused with the placements of the elements you just added in your nested Emmet code. The last thing that you want to happen at this point is for you to have another headache and anxiety to get your code done cleanly.
This is where Emmet\’s feature, known as Grouping, comes in. If you don\’t mind using some basic algebraic expressions, you wouldn\’t have much of a problem writing code using the Grouping method.
Let\’s go back to that same example above. This is how we\’re going to write it using Grouping.
Just add the parentheses around the sibling groups of HTML elements and you should be getting a very clean, well-generated HTML code after you press the Tab key.
Let\’s try another example. We want to write the following HTML using Emmet:
Using Grouping, we will write all of that this way:
On the above example, we haven\’t gotten through one of the operations yet (namely the asterisk * ), but we will, later in this section.
Implicit Tag Names
What (the heck) are Implicit Tag Names? These are HTML tags that don\’t function as themselves, and that they need a parent tag for its usage (and vice versa). The following tags are Implicit Tag Names:
li– for bothulandoltr– for bothtable,tbody,thead, andtfoottdfortr
-
optionforselectandoptgroup
Here are a few examples:
On the above examples, you\’ve noticed some certain special characters used there that you may not be familiar with. We\’re going over those right now.
Multiplication
Let\’s say, you want to make a navigation menu of five menu items. You know, like this:
In Emmet, you would write it like this:
That\’s it! Pretty straightforward, right? The multiplication operator is the asterisk *, followed by the number of times you want that element to be generated. This is a very helpful feature for creating a list of links, a navigational menu, you get the picture.
Numbering
Would you like to go fancy on the Multiplication with some class or ID numbering? Let\’s take this sample HTML below:
The numbering operator is $, followed by the multiplier * and the number of times you would like to have your elements multiplied.
In this instance, we will write our HTML sample code above with Emmet this way:
Like said before, play around with what you\’ve learned, mix and match. Check out the results of each of your awesome Emmet skills. Use all of the basic HTML features you just learned from this part and the previous part. You would be surprised how much power you can have when you get yourself used to writing your HTML syntax using Emmet.
Lorem Ipsum Generator
Emmet has made us become powerful HTML coders, so much that it also gave us the power to create super-fast dummy text in a matter of less than a second. You only need to type one of these two words: lorem or lipsum and then press the Tab key.
Again, use this \”generator\” word in addition to your Emmet commands to supply your syntax with some handy dummy text that you can replace with the real text much later. You won\’t even have to go to a separate lorem ipsum website to generate any text when you can always use this Emmet keyword. Easy, right?
Let\’s sum it up!
And that\’s it for the most basic of the basic HTML syntax writing using Emmet. Were you happy that you have gone through the lessons? I sure am!
Here\’s the thing with Emmet. It is a very helpful tool for the anxious procrastinators in us, especially if we\’re tired and weary of using copying and pasting just to do some repeat HTML coding. You don\’t have to use Emmet when you write your markup. After all, that\’s why Emmet is released as a plugin for today\’s most popular/widely used text editors.
I use basic Emmet when I can and just \”fill in the blanks.\” I do try to mix and match with Emmet when I can, and then check the results of them. It helps with learning and getting used to Emmet with this method.
Thank you for joining in! I really do hope you\’ve learned many things with Emmet and then consider using it as part of your arsenal of skills. More tutorials like this to come much later! Please stay tuned!