HTML

Etiquetas básicas

# Estructura:
<body>, <section>, <article>, <nav>, <aside>, <header>, <footer>, <h1>..<h6>, <details>, <summary>
# aside se aconseja para barras lateras, textos explicativos, bloques destacados...

# Semántica:
<a>, <p>, <form>, <img>, <table>, <ol>, <ul>, <dl>, <code>, <small>, <cite>, <quote>, <abbr>, <mark>, <dfn>, <data>, <time>, <var>, <address>, <figure>, <figcaption>

# Estilo:
# Ojo que tanto <div> como <span> no siguen una estructura jerárquica (aún cuando se aniden)
 <div>, <span>

<!-- Comentario -->

Etiquetas obsoletas

<b> -> font-style:bold / <strong>
<i> -> font-style:italic / <em>
<u> -> text-decoration:underline
<acronym> -> <abbr>
<tt>, <xmp>
<applet> -> <object>
<center>, <font>, <big>
<frame>
# atributos: align, background, bgcolor 

Caracteres referenciados

Lista completa (W3C)

Los más habituales:

# espacio en blanco
&nbsp;

# acentos -> acute
&Aacute; &oacute

# acentos invertidos -> grave
&egrave;

# tilde, ñ
&atilde; &ntilde;

# ampersand, copyright, grado
&amp; &copy; &deg;

# dolar, euro
&dollar; &euro;

# flechas -> arrow
&leftarrow; &uparrow; &rightarrow; &downarrow; 

Ejemplo de página básica

<!DOCTYPE html>
<head>
   <meta charset="UTF-8" />
   <title>Título de la página</title>
   <style>...</style>
</head>
<body>
  <header>
    <h1>Título cabecera (Nombre del sitio web)</h1>
  </header>
   
  <nav>
    <header>
      <h2>Título navegación</h2>
    </header>
    <ul>... </ul>
  </nav>
   
  <article>
    <header>
      <h1>Título del artículo</h1>
      <h2>Subtítulo del artículo</h2>
    </header>
     
    <section>
      <h3>Título de la sección</h3>
    </section>
    
    <footer>
      <h4>Título del pie del artículo</h4>
    </footer>
  </article>
   
  <aside>
    <h2>Título del texto explicativo</h2>
     
    <section>
    </section>
  </aside>
   
  <footer>
     Pie de página
  </footer>
</body>

Referencias

“Dive into HTML5”, por Mark Pilgrim.

Text level semantics

Smashing Magazine:

HTML5 semantics
Designing a HTML5 layout from scratch

MDN HTML Developer Guide:

Using HTML sections & outlines

Obsolete things to avoid

HTML5Doctor:

Details & summary elements

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *