La Estructura del Documento HTML

La definición de un documento HTML requiere de una estructura formada a través de las etiquetas relacionadas a esta, que involucra su respectivo anidamiento entre ellas como el orden de aparición para ser reconocidas por el navegador web.
En este artículo mostraremos la definición de la estructura del documento HTML. Los documentos HTML requieren de una estructura de etiquetas requieridas; tanto en anidamiento como en orden de aparición en el documento.
Un documento HTML luce de la siguiente forma:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="view" content="width=device-width, initial-scale=1.0">
<meta name="author" content="webmaster exasoluciones">
<meta name="keywords" content="tutorial, html, css, javasript">
<meta name="description" content="Tutorial de Diseño Web">
<meta name="robots" content="index,follow">
<title>Mi Primera Página</title>
<base href="/">
<link rel="stylesheet" href="archivo.css">
<script type="text/javascrpt" src="archivo.js"></script>
</head>
<body>
</body>
</html>
Repasemos los más importantes:
Declaración del tipo y versión HTML
Antes de cualquier etiqueta es necesario establecer la declaración doctype que define el tipo y versión de documento HTML que és y se declara de la siguiente manera para el HTML 5:
<!doctype html>
La etiqueta principal
El Documento HTML como tal, inicia con la etiqueta de apertura <html>
y termina con la etiqutas de cierre </html>
. Todas las demás etiquetas son contenidas aquí. nada va fuera de estas.
Así, las etiquetas <html>
y </html>
son el contenedor principal de todas las etiquetas que conforman el documento HTML.
<!doctype html>
<html>
...
</html>
El encabezado y el cuerpo del documento
Dentro de las etiquetas <html>
y </html>
se anidan solo dos etiquetas para complementar la estructura del documento: Las etiquetas <head>
y <body>
como se muestran a continuación:
<!doctype html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Las etiquetas <head>
y </head>
son el contenedor de las etiquetas para establecer información del Documento HTML pero estas no serán mostradas por el navegador web.
Las etiquetas <body>
y </body>
son el contenedor del contenido visible de la Página Web, es decir, es lo que si se mostrara en el navegador web del visitante.
Las etiquetas dentro del Encabezado
Dentro de las etiquetas <head>
y </head>
se integran las etiquetas que establecen y aportar información al Documento HTML.
Entre las etiquetas que se establecen en este contenedor puden ser exclusivas o no. A las etiquetas exculisivas se les llama etiquetas de cabecera.
Los meta datos del Documento
El término meta proviene de la meta-información (metadata del inglés) que significa que aporta información a un documento digital, que en este caso, aporta información al documento HTML.
Las etiqueta <meta>
son etiquetas de cabecera, es decir, solo pueden estar contenidas en entre las etiquetas <head>
y </head>
que es el encabezado del documento HTML.
Las etiquetas <meta>
son etiquetas simples, es decir, no existe su etiqueta de cierre y por lo tanto no puede contener nada y pero su funcionalidad se centra en sus atributos y respectivos valores y combinación entre ellas.
La Codificación de Caracteres
Para establecer la codificación de caracteres en un documento HTML debemos establecer la etiqueta <meta>
con el atributo charset
con el valor establecido en "UTF-8"
anidada en la etiqueta <head>
como se muestra a continuación:
<meta charset="UTF-8">
La ventana Gráfica
La ventana gráfica es el área visible que será mostrada a traves del navegador web del usuario. Y es necesario configurarla para la página web sea adapte a los diferentes dispositivos desde donde se esta visualizando. Esto significa que, no es lo mismo visualizarla desde un dispositivo movil como un telefono intenligente o tableta, a visualizarla desde una computadora laptop o de escritorio.
Para configurar el documento para que se adapte al ancho del dispositivo desde donde se esta visualizando se establece con el atributo viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto le da instrucciones al navegador de como controlar las dimensiones y escalas de la página.
La parte de width=device-width
establece que el ancho de la página siga el ancho de la pantalla desde donde se esta visualizando, la cual variará dependiento del dispositivo.
La parte de initial-scale=1.0
establece el nivel de zoom inicial, que es cuando el navegador carga la página por primera vez.
Datos del Autor
Para establecer al autor del documento lo hacemos de la siguiente manera:
<meta name="author" content="exasoluciones">
Motores de Búsqueda
Para ayudar a los motores de búsqueda y faciliten la indexación de nuestras páginas web establecemos varias etiquetas de meta datos como el autor, las palabras clave y descripción del contenido, etc.
Para establecer las palabras claves del contenido del documento:
<meta name="keywords" content="tutorial, html, css, javascript">
Para establecer la descripción del contenido del documento:
<meta name="description" content="Tutorial de Diseño Web">
Para establecer los permisos de indexación a los motores de búsqueda se establecen los valores index
y follow
: en donde el valor index establece el permiso de indexación y el valor follow establece que siga los enlaces contenidos en el documento para continuar la indexación.
<meta robots="index,follow">
Si se desea lo contrario los valores son noindex y nofollow.
<meta robots="noindex,nofollow">
El título del documento
Otra etiqueta de encabezado es la etiqueta <title>
que establece el título del documento, el cual solo debe contener texto y solo debe existir una sola vez esta etiqueta en el documento.
Aunque su contenido no es mostrado en la ventana gráfica, si se muestra en la barra de título del navegador web.
<title>Mi Primera Página</title>
Establecer el titulo al documento HTML es estrictamente requerido por las siguiente razones:
- Es el título que mostrara la barra de título en la ventanta o pestaña del navegador web.
- Asigna este título de la página cuando se agrega a Favoritos o Marcadores del navegador web.
- Los motores de búsqueda indexaran la página con este título.
Los motores de búsqueda mostrarán entre 50 y 60 caracteres del título en sus resultados, así que, es importante que el título no sea ni muy corto ni muy extenso, lo sufiente como para que sea descriptivo al contenido que mostrará el documento como página web.
La URL Base del Documento
La etiqueta <base>
especifica la dirección url base que se utilizará para todas las direcciones url relativas contenidas dentro del Documento, así como también el target predetermitado.
Solo puede haber un elemento <base>
en un Documento HTML y solo debe establecerce dentro de las etiquetas <head>
y </head>
.
<base href="/">
<base href="https:www.exasoluciones.com/pagina.html">
Nota: Si eres nuevo evita por el momento esta etiqueta hasta que comprendas del uso de direcciones URL absolutas y relativas.
Recursos Externos
La etiqueta <link>
establece una inclusión relacional entre el documento html y un recurso externo.
Un uso frecuente de esta etiqueta, es para enlazar una hoja de estilos externa o un favicon del sitio web.
La etiqueta <link>
es una etiqueta simple o vacía, lo que significa que no tiene contenido, pero si atributos para su funcionalidad.
<link rel="stylesheet" href="archivo.css">
La etiqueta <script>
se utiliza para incrustar código ejecutable o datos; usualmente se utiliza para incrustar código JavaScript o hacer inclusión referencial a un archivo externo con código JavaScript para el documento HTML. Pero también se puede usuar para otros lenguajes de programación.
Para incrustar código internamente en el documento se realiza de la siguiente manera:
<script type="text/javascript">
alert("Mensaje");
</script>
Para la inclución referencial de un archivo externo se realiza de la siguiente manera:
<script type="text/javascript" src="archivo.js"></script>