From the course: Emmet: Fast and Efficient Web Coding

Basic Emmet syntax

From the course: Emmet: Fast and Efficient Web Coding

Start my 1-month free trial

Basic Emmet syntax

“

- [Instructor] If you are already familiar with CSS you'll find it really easy to start using Emmett. One of my favorite things about Emmet is that it uses CSS-like Selector syntax. This is something any developer already knows and feels comfortable using. So you'll be able to get up and running and be much faster at coding right away. Emmet abbreviation syntax is similar to CSS selectors with shortcuts, for IDs, classes, custom attributes, element nesting, and so much more. You write CSS like abbreviations. You'll place your cursor at the end of the abbreviation and press the Tab key, which is the easiest method. Or you can use the interactive abbreviation, which is Command + Option + Return on the Mac, or Control + Alt + Enter on the PC. In certain applications, the shortcut may be another key combination. So you'll need to check what that is if your editor is not supporting what I just mentioned. Emmet expands p into an opening and closing paragraph tag. Notice that there's no need to create the angle brackets. It's so much simpler just typing p, and then having the text expand into a code block. Your blinking insertion point is simply waiting for you to add some text. Some tags will automatically be expanded with the necessary attributes like the a tag, a is turned into a href with the equal and the quotations waiting for input. And then a closing tag is automatically added. The tab stops inside each empty attribute and it's just waiting for you, to fill that in, with whatever information is necessary. There are a slew of other more complex ways in which you can utilize Emmett. We will be looking at them throughout this course. We're just literally scratching the surface here. You can see that Emmett has value and saves time, even with this brief introduction. Just wait until you see what else you can do and get ready to harness some serious time-saving techniques.

Contents