Skip to content
Alebat

Guía Básica del Uso de Emmet para HTML5

Emmet es una herramienta que permite escribir código HTML de manera más rápida usando atajos y expansiones. Aquí te doy una pequeña guía con los principales atajos para HTML5 que te ayudarán a acortar el tiempo de desarrollo.

1. Estructura básica de un documento HTML

  • Atajo: !
  • Expansión:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

2. Crear etiquetas rápidamente

Puedes escribir solo el nombre de la etiqueta y Emmet lo completará automáticamente:

  • Atajo: div
  • Expansión: <div></div>

3. Añadir clases y ids

  • Clases: div.container se expande a <div class="container"></div>
  • Ids: div#main se expande a <div id="main"></div>
  • Combinación: div#main.container se expande a <div id="main" class="container"></div>

4. Anidar elementos

Utiliza el símbolo > para crear elementos anidados:

  • Atajo: div>ul>li
  • Expansión:
<div>
  <ul>
    <li></li>
  </ul>
</div>

5. Múltiples elementos

Usa el símbolo + para añadir varios elementos de nivel superior:

  • Atajo: header+main+footer
  • Expansión:
<header></header>
<main></main>
<footer></footer>

6. Crear listas

Usa el símbolo * para crear múltiples elementos:

  • Atajo: ul>li*3
  • Expansión:
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

7. Añadir texto a etiquetas

Utiliza {} para incluir texto dentro de una etiqueta:

  • Atajo: h1{Bienvenidos a mi sitio}
  • Expansión: <h1>Bienvenidos a mi sitio</h1>

8. Atributos personalizados

Usa [] para añadir atributos:

  • Atajo: a[href="https://ejemplo.com"]
  • Expansión: <a href="https://ejemplo.com"></a>

9. Agrupar código

Puedes agrupar secciones usando () para generar estructuras más complejas:

  • Atajo: div>(header>h1{Título})+main+p{Contenido}+footer>p{Pie de página}
  • Expansión:
<div>
  <header>
    <h1>Título</h1>
  </header>
  <main>
    <p>Contenido</p>
  </main>
  <footer>
    <p>Pie de página</p>
  </footer>
</div>

10. Ejemplo completo

  • Atajo: div.container>header#main-header>h1.title{Página de Inicio}+nav>ul>li.item$*3>a[href="#"]{Enlace $}+section.content>article.post$*3>h2{Título Post $}
  • Expansión:
<div class="container">
  <header id="main-header">
    <h1 class="title">Página de Inicio</h1>
    <nav>
      <ul>
        <li class="item1">
          <a href="#">Enlace 1</a>
          <section class="content">
            <article class="post1">
              <h2>Título Post 1</h2>
            </article>
            <article class="post2">
              <h2>Título Post 2</h2>
            </article>
            <article class="post3">
              <h2>Título Post 3</h2>
            </article>
          </section>
        </li>
        <li class="item2">
          <a href="#">Enlace 2</a>
          <section class="content">
            <article class="post1">
              <h2>Título Post 1</h2>
            </article>
            <article class="post2">
              <h2>Título Post 2</h2>
            </article>
            <article class="post3">
              <h2>Título Post 3</h2>
            </article>
          </section>
        </li>
        <li class="item3">
          <a href="#">Enlace 3</a>
          <section class="content">
            <article class="post1">
              <h2>Título Post 1</h2>
            </article>
            <article class="post2">
              <h2>Título Post 2</h2>
            </article>
            <article class="post3">
              <h2>Título Post 3</h2>
            </article>
          </section>
        </li>
      </ul>
    </nav>
  </header>
</div>

Consejos adicionales

  • Multiplicación de clases e ids: Usa . para añadir múltiples clases, o # para ids.
  • Atajos de imágenes y links: Emmet te permite crear imágenes y links rápidamente, como img o a[href="#"].

Usar Emmet te ayudará a mejorar tu productividad al escribir HTML5. ¡Experimenta con diferentes combinaciones para hacer tu flujo de trabajo más eficiente!