CASO 1Elemento con un id
div#principal
Resultado
<div id="principal"></div>Emmet es un plugin incorporado por defecto o que se puede incorporar a muchos de los editores de código. Permite que la parte mecánica de la programación, que es escribir los tags o palabras reservadas suponga mucho menos esfuerzo y tiempo
Ejemplos de códigos emmet para una etiqueta.
CASO 2Elemento con una clase
div.destacado
Resultado
<div class="destacado"></div>CASO 3Elemento con varias clases
div.destacado.destacado-alerta
Resultado
<div class="destacado destacado-alerta"></div>CASO 4Elemento con clases e id
div.destacado.destacado-alerta#principal
Resultado
<div class="destacado destacado-alerta" id="principal"></div>CASO 5Elemento con contenido
div{contenido}
Resultado
<div>contenido</div>CASO 6Resumen de lo anterior
div.destacado.destacado-alerta#principal{contenido}
Resultado
<div class="destacado destacado-alerta" id="principal">contenido</div>CASO 7Elemento con atributo y valor
a[href="emmet.io"]{emmet}
Resultado
<a href="emmet.io">emmet</a>CASO 8Elemento con varias parejas de atributo/valor
a[href="emmet.io" title="Emmet"]{emmet}
Resultado
<a href="emmet.io" title="Emmet">emmet</a>CASO 9Resumen de lo anterior
a[href="emmet.io" title="Emmet" target="_blank"].destacado.destacado-alerta#principal{contenido}
Resultado
<a href="emmet.io" title="Emmet" target="_blank" class="destacado destacado-alerta" id="principal">contenido</a>