Probando las funciones de EMMET

Vamos a ver un ejemplo de uso de las expresiones más habituales en Emmet.

Uso básico.

Al escribir en Emmet:

p{Estos párrafos muestran el mismo texto, pero no están copiados y pegados. Inserté las etiquetas usando la expresión de emmet: p*3}*3

Obtenemos:

Estos párrafos muestran el mismo texto, pero no están copiados y pegados. Inserté las etiquetas usando la expresión de emmet: p*3

Estos párrafos muestran el mismo texto, pero no están copiados y pegados. Inserté las etiquetas usando la expresión de emmet: p*3

Estos párrafos muestran el mismo texto, pero no están copiados y pegados. Inserté las etiquetas usando la expresión de emmet: p*3

Elementos anidados

Si queremos indicar que un elemento está anidado dentro de otro usamos el carácter >. Por ejemplo, la expresión header>h1 nos construye esto: <header><h1></h1></header>

Si escribimos ul>li*5, obtenemos:


		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	

Contenido de etiquetas

Si queremos añadir contenido a alguna etiqueta usamos las llaves {} a continuación de la etiqueta.
La expresión ul>li{Elemento}*5 devuelve:


<ul>
	<li>Elemento</li>
	<li>Elemento</li>
	<li>Elemento</li>
	<li>Elemento</li>
	<li>Elemento</li>
</ul>

Iteración de repeticiones

También podemos usar el signo de dólar $ como variable numeral de las repeticiones que indiquemos.
La expresión ul>li{Elemento $}*5 devuelve:


	<ul>
		<li>Elemento 1</li>
		<li>Elemento 2</li>
		<li>Elemento 3</li>
		<li>Elemento 4</li>
		<li>Elemento 5</li>
	</ul>

Clases e id

Si queremos asignar una clase o un id a un elemento, usamos la expresión etiqueta.nombre_de_clase o eitqueta#nombre_id.
La expresión div.contenedor>header#cab_home.portada nos devuelve:


	<div class="contenedor">
		<header id="cab_home" class="portada"></header>
	</div>

Concatenación de etiquetas

El operador + permite colocar etiquetas una al lado de la otra.
La expresión div.contenedor>header.cabecera+section.contenido+footer.pie devuelve:


<div class="contenedor">
	<header class="cabecera"></header>
	<section class="contenido"></section>
	<footer class="pie"></footer>
</div>

Otras expresiones

También podemos usar

Ejemplo

El siguiente código nos muestra:

div.contenedor>header.cabecera>h1{Cabecera del sitio}+img.logo[title="Imagen de cabecera del sitio"]+nav>ul.menu>(li.list-menu>a{Enlace $})*5^^+h2.lema{Mi lema del sitio}^+section.principal>article.noticia*5^+footer.pie
<div class="contenedor">
	<header class="cabecera">
		<h1>Cabecera del sitio</h1>
		<img src="" alt="" class="logo" title="Imagen de cabecera del sitio">
		<nav>
			<ul class="menu">
				<li class="list-menu"><a href="">Enlace 1</a></li>
				<li class="list-menu"><a href="">Enlace 2</a></li>
				<li class="list-menu"><a href="">Enlace 3</a></li>
				<li class="list-menu"><a href="">Enlace 4</a></li>
				<li class="list-menu"><a href="">Enlace 5</a></li>
			</ul>
		</nav>
		<h2 class="lema">Mi lema del sitio</h2>
	</header>
	<section class="principal">
		<article class="noticia"></article>
		<article class="noticia"></article>
		<article class="noticia"></article>
		<article class="noticia"></article>
		<article class="noticia"></article>
	</section>
	<footer class="pie"></footer>
</div>