Este artículo forma parte del Curso HTML5 desde cero.
Haz click aquí para ver el índice.
Contenido del artículo
Estructura básica
Todo documento HTML5 tiene una estructura básica sobre la que trabajamos, y es la siguiente:
Las versiones anteriores a HTML5 pueden mostrar un código ligeramente diferente, pero la estructura básica lleva siendo la misma muchos años:
- Cabecera o header
- Cuerpo o body
- Pié de página o footer
Etiqueta <!DOCTYPE>
La primera línea de un documento HTML5 consta siempre de la etiqueta DOCTYPE, y es la que le indica al navegador qué tipo de documento es. Para que veas cómo ha cambiado esta etiqueta, te muestro en primer lugar cómo definíamos un documento HTML en XHTML 1.0:
Ahora, un ejemplo de cómo escribimos correctamente la primera línea de un documento HTML5 a día de hoy:
¡Vaya cambio! Esta simplificación ha sido posible mayormente por los stándares y la aceptación de lenguaje HTML5.
Etiqueta <html> … </html>
La etiqueta <html> es la que contiene el resto de etiquetas de lenguaje (a excepción de la que ya hemos visto). Es decir, dentro de las etiquetas <html> (apertura) y </html> (cierre) podremos indicar al navegador mediante más etiquetas el uso de la caché, la codificación, el autor de ldocumento, las palabras claves, etcétera.
manifest
El atributo manifest permite activar la caché, que permite a las aplicaciones web ejecutarse sin estar online (sin conexión). La caché es utilizada habitualmente para guardar ciertos datos en el navegador o en el propio servidor web por diversos motivos:
- Trabajar sin conexión
- Aumentar la velocidad de carga de una página web, ya que algunos archivos ya estarán guardados en el ordenador de usuario.
- Reducir la petición de datos o información al servidor web, ya que sólo se descargan los archivos o información modificada.
Un ejemplo: la primera vez que visitas la página Let’s Webbing tu navegador descarga toda la información: imágenes, textos, listado de blogs (título, descripción, etc). Pero gracias a la caché, la segunda vez que accedes a esta página web, o cuando simplemente cambias de un artículo a otro, hay ciertos archivos que no se vuelven a descargar. El logotipo, que es un archivo que no cambia, se ha guardado en tu navegador. Así la página web carga más rapido y te es más cómo navegar en ella.
Aquí un ejemplo de un documento HTML5 con la caché activada. Fíjate dónde se añade el atributo manifest y que tienes que indicar un nombre de archivo de caché:
Etiqueta <head> … </head>
Después de las etiquetas que hemos visto se añade la etiqueta <head> … </head>, que se utiliza básicamente como contenedor de las etiquetas que te voy a mostrar a continuación:
Etiqueta <title> … </title>
Sirve para indicar el título del documento. Es la única etiqueta del header visible por el usuario. No obstante, es tan importante para el usuario como para los buscadores, ya que estos ultimos utilizarán este título para indexar la página.
Etiqueta <meta>
Sirve para definir los metadatos del documento. Son datos que no se muestran al usuario pero necesarios tanto que el navegador pueda hacer ciertas acciones (recargar la página correctamente u obtener valores de visualización) así como para los buscadores, dado que esta etiqueta puede indicarle las palabras clave, descripción del contenido, autor, etc.
Estructura básica de esta etiqueta: <meta atributo=»valor»>. Veamos ejemplos con los atributos más utilizados:
- charset: Permite establecer el conjunto de caracteres que ha de utilizar el navegador para visualizar correctamente el documento.
- name y content: Permiten definir pares de datos. Es decir, en name indicaremos qué dato vamos a darle, y en content el valor de ese dato.
- http-equiv: Tiene un formato de escritura parecido al anterior, y es algo complicado de explicar. Se suele utilizar para indicar datos como qué juego de caracteres utiliza el documento (content-type), la hoja de estilos «preferida» para el documento (default-style) o incluso para establecer un intervalo de refresco automático de documento (refresh).
Seguro que si te pongo un ejemplo lo entiendes mejor:
Etiqueta <link> … </link>
Permite realizar la carga y establecer la relación entre el documento actual y otro externo. Se utiliza habitualmente, por ejemplo, para cargar hojas de estilo CSS. No os obligatorio que esta etiqueta se encuentre en la cabecera del documento, pero es lo más habitual y recomendado. Su estructura es la siguiente:
<link href=»valor» hreflang=»valor» media=»valor» rel=»valor» sizes=»valor» types»valor«></link>
Parece complicado, pero no te preocupes. Repasemos algunos de sus atributos:
- href: Indicamos la URL donde se encuentra ese recurso externo.
- hreflang: Para indicar el lenguaje del recurso externo (si está en español, inglés, etc.). Te dejo el listado de los idiomas y el valor que tendrías que poner en este atributo: https://www.w3schools.com/tags/ref_language_codes.asp
- rel: Sirve para indicar el tipo de relación entre el archivo HTML y el recurso externo. Puede ser: alternate, author, help, icon, license, next, prefetch, prev, search ó stylesheet.
- type: Sirve para espeficiar el tipo MIME. Algo complicado de resumir, pero según lo que indiquemos es una forma de indicar el tipo de contenido (texto, audio, vídeo, etc) siguiendo un stándar. No te compliques, según avancemos con los ejemplos lo irás entendiendo.
- media: Con éste indicamos para qué tipo de dispositivo está enfocado el documento. Puede ser:
- all – para cualquier medio.
- aural – para dispositivos sintetizadores de voz.
- braille – dispositipo de tipo braille.
- handhelp -dispositivo de mano, de pantalla pequeña o ancho de banda limitado.
- projection – dispositivo tipo proyector.
- print – dispositivo de impresión.
- screen – dispositivo tipo pantalla de ordenador.
- tty – dispositivo tipo teletipo (caracteres de tamaño fijo).
- tv – dispositivo tipo televisión.
Añadamos esta etiqueta a nuestro ejemplo anterior:
Etiqueta <script> … </script>
Esta etiqueta nos permite añadir códigos script en nuestor archivo HTML, por ejemplo JavaScript. Este código se puede insertar directamente entre las etiquetas <script> y </script>, o bien llamando a un archivo externo para llamar a otro documento/archivo externo, que especificaremos usando los atributos.
Veamos como utilizaríamos esta etiqueta, usando todos sus atributos posibles:
- <script type=»valor» src=»URL» charset=»valor» async></script>
ó - <script type=»valor» src=»URL» charset=»valor» defer></script>
ó - <script type=»valor»>aquí pondríamos el código, por ejemplo JavaScript</script>
Te explico las diferencias según los atributos:
- async: sólo se puede utilizar cuando el script es externo, indicando la ruta en el atributo src, y provoca que el navegador cargue este script «en cuanto le sea posible», sin importar si ha terminado de cargar el documento o no.
- defer: igual que el anterior, solo se puede utilizar cuando el script es externo, indicando la ruta en el atributo src, y en este caso obliga al navegador a cargar este script una vez que el documento html ha cargado por completo.
- type: De nuevo, especifica el tipo MIME del script. Es decir, le decimos al navegador si el script que va a cargar está basado en JavaScript (text/javascript) o está basado en Visual Basic (text/vbscript). Hay más tipos pero en el 99% de los casos usarás siempre text/javascript.
De nuevo, añadamos esta etiqueta a las etiquetas que ya tenemos en nuestro ejemplo:
En este último ejemplo he añadido código javascript que muestra el texto Hola Mundo en la página web, y como verás lo he añadido dentro de las etiquetas <body></body>.
Etiqueta <body> … </body>
Esta etiqueta se coloca siempre dentro de la etiqueta <html> … </html>, y sirve para definir el cuerpo del documento web, y su contenido será lo que el navegador mostrará al usuario. En esencia, es la etiqueta contenedora del resto de etiquetas que aportan contenido al documento.
¡A practicar!
Con lo que has leído y aprendido haz la siguiente tarea:
- Recupera el código que creaste en el módulo anterior (con las noticias encontraras por internet) y realiza las siguientes tareas:
- Añade la estructura básica de HTML5 y pon el código de la noticia dentro del cuerpo del documento: <body>AQUI</body>
- Dentro de las etiquetas <head></head> añade información relevante sobre la noticia, como el título, el autor, las palabras clave, etc.
- Imagina que tienes un archivo que mejora el diseño de la noticia (una hoja de estilo CSS), cuyo nombre es estilo.css y se encuentra en la misma ruta que tu archivo HTML. Usa la etiquetas <link> para cargar este archivo utilizando los atributos necesarios.
- Realiza esta práctica en todas las noticias del módulo 1 (deberías tener el código de entre 3 y 5 noticias).
Aprovecha los comentarios para hacer cualquier pregunta sobre lo explicado o sobre cualquier ejercicio que estés haciendo, o incluso sobre tu propio proyecto. Te ayudaré encantado.
Ahora toca asentar conocimientos y, después, ¡a por el siguiente módulo!
