En el primer post de este manual, os introducíamos al HTML con el identificador DOCTYPE. Algo esencial para identificar el HTML con el que está escrito nuestra pagina.
Para seguir este manual con un poco de sentido a la hora de escribir un documento HTML, os explicaremos la estructura básica que este documento tiene que tomar tras la identificación del DTD. La estructura básica de toda web, tiene que contener estas etiquetas <html>, <head>, <title> y <body>. Cada una muy importante en su función, y es más que recomendable memorizarlas, y no dejarnos ninguna.
Así pues, la estructura de cualquier web, como mínimo tiene que tener esta estructura:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body></body>
</html>
Bien, pues ahora que ya vemos más o menos la estructura de cualquier documento HTML, y antes de explicaros la utilidad de cada etiqueta, vamos a ver como quedaría si le damos cierto contenido, y seguro que ya deduciréis el uso de cada etiqueta. Veamos como queda:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Este es el título de la pagina</title>
</head>
<body>
Entre estas etiquetas va el cuerpo de nuestra pagina.
</body>
</html>
Por si os ayuda, en la siguiente pagina, podréis ver el resultado de estas pocas líneas: DEMO
Visto un claro ejemplo del funcionamiento de los tags básicos del HTML, veamos para que sirve cada uno de ellos.
Tag <html>
El tag <html> es el encargado de decirle al navegador de que a partir de esa línea, lo que se va a encontrar es texto HTML. Ésta, es la etiqueta más externa de cualquier documento, por ello también se la nombra como la etiqueta raíz. Y a pesar de ser el elemento raíz, siempre, antes de la etiqueta <html> debemos indicar el elemento DOCTYPE.
Tag <head>
La etiqueta <head> es la que se encarga de contener los elementos de cabecera de nuestra web, como puede ser el título. Esta etiqueta incluirá scripts, las rutas a las hojas de estilos, los meta tags, y otra mucha información.
Los siguientes tags, son los que podemos encontrar dentro de esta etiqueta: <base>, <link>, <meta>, <script>, <style>, y <title>. Más adelante nos adentraremos en todas estas etiquetas, por ahora no serán necesarias.
Tag <title>
La etiqueta <title> será el encargado de definir el título de nuestro documento. Esta etiqueta es esencial, ya que será la que se vea en la parte superior del navegador informando de la web que estamos visitando. Además, será el nombre que se guarde si la añadimos a nuestros favoritos y será también este título el que motores de búsqueda como Google nos muestre en sus resultados.
Tag <body>
Esta etiqueta, <body>, es la que define el cuerpo del documento HTML. Es decir, es la que indica el comienzo o el fin de un documento que contiene texto, enlaces, imágenes, tablas, listas, etc. Dentro de esta etiqueta tendremos que poner todo nuestro código HTML, y todo aquello que queramos mostrar por pantalla.
