Estructura del documento HTML
A continuación veremos la estructura de un documento HTML y las etiquetas más comunes que le componen, es decir, así construiremos la base de nuestros documentos html.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título del documento</title>
</head>
<body>
<!-- Acá va el contenido de a página -->
</body>
</html>Cada línea del documento tiene etiquetas, todas empiezan con < y terminan con >, pero hay un par que se ven extrañas, veamos una a una de qué trata.
| Línea | Explicación |
|---|---|
| 1 | <!DOCTYPE html> Esta etiqueta le indica el tipo de documento que va a interpretar el explorador. |
| 2 | <html lang="es"> Inicio del documento html, el atributo lang indica el idioma de la web, en nuestro caso, el código "es" indica que está en español. |
| 3 | <head> Inicio de la cabecera del documento, en esta sección se le indican las características del documento y se puede usar también para cargar hojas de estilos y archivos javascript que contenga nuestro código interactivo, la mayoría de las veces se cargan acá las librerías que usaremos. |
| 4 | <meta charset="UTF-8"> Las etiquetas "meta" sirven para indicar metadatos sobre diversas características de nuestra web, esta en particular le dice al explorador que use la codificación de caracteres UTF-8 (para ponerlo simple, permite usar acentos, la ñ y otros caracteres especiales) |
| 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> Sirve para decirle al explorador Microsoft Internet Explorer que ejecute la web en modo edge, es decir, como un documento HTML5 que es la forma por defecto como lo ejecuta Microsft Edge, por ponerlo simple: se usa por compatibilidad con Internet Explorer, la tendencia actual es no usar esta etiqueta debido a que pronto será descontinuado. |
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> En términos simples: se usa para que en móviles la web tenga como máximo de ancho el ancho del dispositivo y no tenga zoom |
| 7 | <title>Título del documento</title> Acá indicamos el título de nuestra web |
| 8 | </head> Con esta etiqueta de cierre indicamos que termina la sección de cabecera |
| 9 | <body> Acá es donde comienza el cuerpo de nuestra página, todo lo que pongamos acá será lo que mostremos en nuestra web, excepto los comentarios. |
| 10 | <!-- Acá va el contenido de a página --> Esto es un comentario, no es visible en nuestra página, como desarrolladores nos sirve para poner notas de lo que queramos, lo ideal es que esté relacionado con lo que sigue al comentario. Para empezar un comentario escribimos <!-- no olvides cerrarlo con --> |
| 11 | </body> Con esta etiqueta de cierre indicamos que termina la sección del cuerpo |
| 12 | </html> Con esta etiqueta de cierre indicamos que termina nuestro html |
Así de simple