Estructura básica de un documento HTML 5

En este capítulo del curso de HTML por fin vamos a ver cómo se escribe un documento HTML, al menos de forma básica.

Lo primero es declarar el documento, es decir, los documento HTML van a ser leído por navegadores, al declararlo indicamos al navegador que tipo de documento es y que versión, así podrá leerlo bien y sin cometer errores, si lo declaramos mal, más de un navegador cometerá errores al mostrar el documento en la pantalla.

Cada versión de HTML se declara de forma distinta, pero yo solo voy a hablar sobrw HTML5 que es la última versión, ya que veo inútil mostrar como se declaraba HTML en versiones anteriores.

En HTML5 un documento se declara así:

<!DOCTYPE html>

Luego se declara el idioma y el país:

<html lang=»Es-es»>

Luego se escribe el Head: Lo dejaremos vacío por ahora.

<head></head>

Luego escribiremos:

<body></body>

…y por último cerraremos el documento con:

</html>

Con esta última etiqueta se indica al navegador que el documento termina ahí.

Al final nos quedará lo siguiente:

<!DOCTYPE html>

<html lang=»Es-es»>

<head></head>

<body></body>

</html>

Explicando un poco las etiquetas de la estructura básica

La primera declara el documento en HTML5.

Lego el idioma y el país: En este caso castellano, España.

<html lang=»Es-es»>

El <head></head> se usará para meter etiquetas dentro, así:

<head>

<title>Documento1</title>

<style></style>

</head>

En el Head se puede introduccir más etiquetas y metadatos que se irá viendo a lo largo del curso de HTML, las aquí expuestas son las más básicas, simplemente la etiqueta <title>Documento1</title> con el nombre Documento1, no se verá al abrirlo con el navegador dentro del documento en sí, sino que se verá arriba de todo, junto con el Favicon del documento, que en este caso no tiene.

La etiqueta <style></style> se usa para  introducir los estilos en CSS, por lo que por ahora la dejaremos vacía y no hará falta ni ponerla si no se desea.

Por último introducieremos etiquetas dentro del body(<body></body>):

Como por ejemplo un titular o heading y un párrafo, de la siguiente manera:

<body>

<h1>Título visible</h1>

<p>Esto es un párrafo.</p>

<p>Esto es un segundo párrafo.</p>

</body>

Al final nuestro documento quedará así:

<!DOCTYPE html>

<html lang=»Es-es»>

<head>

<title>Documento1</title>

<style></style>

</head>

<body>

<h1>Título visible</h1>

<p>Esto es un párrafo</p>

<p>Esto es un segundo párrafo</p>

</body>

</html>

Si quieres copia y pega el código anterior en tu editor de texto, guardalo como .html y abrelo con el navegador, ya podrás ver el resultado y modificarlo como quieras.

 

Notas importantes:

1. En HTML las mayúsculas y minúsculas importan, usa siempre minúsculas excepto en la declaración del document y versión de HTML como has visto en el ejemplo anterior.
2. Las etiqueas HTML se abren y cierran menos contadas excepciónes, por ejemplo: <body>(se abre la etiqueta) y </body>(se cierra), una etiqueta sin cerrar aplicará su condicón hasta que sea cerrada, es decir, si abres un párrafo y no lo cierras, se aplicará esa condición hasta que el navegador encuentre la etiqueta que lo cierre, lo que ocasionará defecto en su lectura y además nos lleva al tercer punto:
3. Los navegadores leen los documentos al mismo tiempo que los ejecuta y además lo hace de izquierda a derecha y de arriba abajo, tal como leemos las personas(al menos las lenguas occidentales). Esto explica el punto 2.
4. Un ejemplo de etiquetas que no se cierran es <hr>, prueba a introducirlo en tu documento de HTML y luego abrelo con el navegador, observa que cambia.