Escribiendo código HTML de forma rápida con Emmet

Emmet es una herramienta realizada para los desarrolladores web, el objetivo de esta herramienta es agilizar la escritura del código HTML y código CSS.

Esta herramienta puede ser agregada en diferentes IDE´S para el desarrollo web, a continuación te presentamos una lista de dichos IDE´S:

IDE´S principales:

  1. Sublime Text
  2. Atom
  3. Coda
  4. Eclipse/Aptana
  5. TextMate 2
  6. Espresso
  7. Chocolat
  8. Komodo Edit
  9. Notepad++
  10. PSPad
  11. Textarea
  12. CodeMirror
  13. Brackets
  14. NetBeans
  15. DreamWeaver
  16. Visual Studio Code

IDE´S Online:

  1. JSFiddle
  2. JS Bin
  3. CodePen
  4. ICEcoder
  5. Divshot
  6. Codio
  7. Codeanywhere
  8. SourceLair
  9. Litmus

Otros IDE´S:

  1. Visual Studio Code
  2. SynWrite
  3. WebStorm
  4. PhpStorm
  5. Vim
  6. HTML-Kit
  7. HippoEDIT
  8. CodeLobster PHP Edition
  9. TinyMCE
  10. EverEdit
  11. EditPlus
  12. Emacs
  13. WeBuilder

A continuación se te presenta ejemplos de implementación de Emmet:

1.- Para crear una estructura HTML

Hay que escribir html:5 y luego presionar la tecla Tab en el teclado.

2.- Para crear una etiqueta div con atributos class=”miclase” y id=”miID”:

Hay que escribir div.miclase#miID y luego presionar la tecla Tab en el teclado.

3.- Para crear hijos de etiquetas:

div>span.item

4.- Para crear una colección de elementos puedes usar * e indicar un número :

ul.menu>li.item*5

5.- Para enumerar elementos usar el símbolo $:

div.item$*3

Aquí puedes ver más ejemplos :https://docs.emmet.io/cheat-sheet/

De igual forma te dejamos videos en una “Mini serie” de 5 videos:

 

Contenido relacionado: