Estructura básica de una página HTML
En su mayor parte una página HTML está escrita mediante etiquetas o tags. Existen etiquetas de apertura y de cierre; por ejemplo, si queremos comenzar a escribir un nuevo párrafo deberemos declarar la etiqueta <p> y cuando terminemos de escribir el texto del párrafo deberemos decírselo al navegador usando la etiqueta de cierre </p>.
Toda página html debe comenzar con la etiqueta <html>; esto permitirá indicar al navegador que lo que escribiremos se encontrará en dicho lenguaje.
La declaración de tipo de documento DOCTYPE es una parte fundamental de todas aquellas páginas que quieran cumplir los estándares HTML. Dicha declaración indica qué versión de HTML estaremos usando en la página, de forma que los navegadores pueden saber qué sintaxis y gramática se usará. En HTML5 el DOCTYPE a incluir en cada página se escribe así:
Si estamos usando HTML 4 el DOCTYPE es un poco más complejo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Debemos tener en cuenta que este elemento ha de ser el primero del documento. No debe ser precedido por ningún caracter (salto de línea, espacio, etc).
Luego de estas declaraciones debemos dividir las páginas HTML en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página (metadatos), como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes. La estructura básica de una página HTML5 consiste en las siguientes etiquetas:
Los atributos en HTML se emplean para poder especificar ciertas características que poseerá la etiqueta o bien para ofrecer más información sobre la misma. Los atributos se colocan después del nombre de la etiqueta y antes del signo > final. Cada atributo contiene siempre un valor encerrado entre comillas dobles (“).
El atributo lang de la etiqueta html define el idioma de la página. Otro atributo es el atributo charset de la etiqueta <meta>. La declaración del charset es obligatoria en HTML5. Dentro de esta etiqueta se establecerá el juego de caracteres que aceptará la página, en nuestro caso será el juego UTF-8 que acepta acentos y ñ.
Colocar el atributo lang dentro de la etiqueta html es muy importante ya que ayuda a los motores de búsqueda como Google y para los programas de voz usados por personas con dificultades visuales.
Dentro de HTML hay etiquetas que se autocierran (por ejemplo la etiqueta <br>). Estas etiquetas no tienen contenido por lo tanto deberían autocerrarse de esta forma <br/> sin embargo en HTML5 estas dos formas son válidas:
Etiquetas
Colocando un título en el documento
Cada documento HTML necesita de un título. Aquí, de ejemplo, se mostrará uno:
Se puede cambiar el texto de Mi primera página Web por cualquier otro. El texto del título va entre el tag de apertura <title> y el tag de cierre </title>.
La etiqueta meta
Otro elemento que se puede colocar en la cabecera es la etiqueta <meta>. La etiqueta <meta> tiene varios fines. Uno de ellos consiste en indicar la descripción del contenido de la página (es decir qué información ofrece), por esta misma razón no debe contener más de 160 caracteres. Por ejemplo, en el caso de la index.html de un centro veterinario sería el siguiente:
Otra utilidad de la misma etiqueta es identificar las palabras clave relacionadas con la página. Colocando palabras claves en la página podemos hacer que las personas encuentren más fácilmente las páginas usando un motor de búsqueda. La recomendación más extendida es la de no superar un total de 256 caracteres, incluidos los espacios en blanco.
Ejemplo de una página index de una veterinaria: