Normas elementales en HTML
Este tutorial está basado en las recomendaciones del W3C (y II), donde la idea es utilizar CSS siempre que sea posible, pero seguir incluyendo HTML semántico para maximizar la compatibilidad con navegadores antiguos.
Junto con esta guía, te recomiendo que leas los siguientes documentos:
- Conceptos básicos de HTML.
- Videotutoriales de HTML y HTML básico.
- Como hacer buenas páginas en HTML.
- Todos los capítulos del subapartado Crear la página web de este manual.
Etiquetas y elementos HTML son interruptores on / off para los distintos tipos de formateo de texto. A menos que se especifique lo contrario, todo etiqueta de apertura (como <head>) necesita un cierre ( un "off") en su etiqueta de final (</ head>). Ejemplo:
<html>
...
</html>
Siempre que sea posible, incluye las etiquetas de cierre, incluso si no son obligatorias, ya que esto hace que sea más fácil seguir tu propio marcado y que sea más fácil de leer. Además, en el momento en el que estés preparado para dar el salto a XHTML (el lenguaje que está pensado para reemplazar a HTML) te será más fácil, ya que en XHTML todas las etiquetas deben cerrarse.
Con frecuencia verás diseños HTML con código indentado como el que se muestra a continuación, es decir, código tabulado con sangrías, de forma que los bloque de texto se mueven hacia la derecha insertando espacios para separarlos del texto adyacente que forme otras estructuras diferentes. Esto hace que sea más fácil leerlo y comprobar qué etiquetas de cierre se refieren a qué etiquetas. Por ejemplo, esto es claramente erróneo:
<p>
<strong>
texto en negrita
<em>texto en negrita y cursiva
texto sólo en cursiva
</em>
</ p>
Sin embargo, esto es válido:
<p>
<strong>
texto en negrita
<em>
texto en negrita y cursiva
</em>
</strong>
<em>
texto solo en cursiva
</em>
</p>
Etiquetas, elementos y atributos
Ya hemos visto lo que es una etiqueta en HTML, y que hay etiquetas de apertura y (en la mayoría de los casos) etiquetas de cierre. El navegador lee estas etiquetas y crea una representación interna de lo que leyó. Esta representación interna se conoce como un elemento. Entonces, el navegador “decide” cómo mostrar el elemento en la pantalla. Además, no todos los elementos se muestran en pantalla (como el HEAD),y por el contrario algunos elementos siempre existen, incluso si no los creaste en tu código fuente (como el HTML, HEAD o BODY).
Algunos elementos aceptan parámetros adicionales. Por ejemplo, el elemento A puede aceptar el parámetro HREF, que lo convierte en un enlace. Estos parámetros son conocidos como atributos, y se crean así:
<a href="nombre-de-archivo.html">
Ten en cuenta que en HTML, las etiquetas y nombres de atributos se puede escribir en cualquier circunstancia. Algunos diseñadores web tienden a utilizar mayúsculas para destacarlos en el código fuente, otros escriben todo en minúsculas para hacerlos más fáciles de traducir a XHTML más tarde si es necesario. Mi consejo es que adoptes esta segunda opción, lo lógico es con el tiempo acabar creando páginas en XHTML. De todas maneras, cualquiera de las dos formas es correcta en HTML.