HTML

Etiquetas básicas

1
2
3
4
5
6
7
8
9
10
11
12
# 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

1
2
3
4
5
6
7
8
9
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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

Dejar un comentario

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