HTML5 es un lenguaje de marcas usado en el World Wide Web que no se queda en una reformulación de versiones anteriores. Incluye elementos de HTML4 y XHTML 1.0, mejora característica de las ya existentes y emplea APIs. Fue diseñado con el fin de que funcione en cualquier plataforma y navegador, incluyendo los viejos.
En HTML la organización del contenido dependía mucho de la etiqueta <div>, en HTML 5 se emplean otras etiquetas para organizarlo como <article>, <section>, <header>, <footer>…. Además de otras etiquetas con códecs necesarios para reproducir contenido multimedia como <video> y <audio>.
A continuación, mostraré los elementos de un ejemplo básico para ir familiarizando con HTML5.
|
1 |
<!doctype html> |
Define el tipo de documento.
|
1 |
<html lang="es"> |
El atributo lang no es necesario, pero es una buena práctica. Indica el idioma natural de la página lo cual es ideal para los buscadores que busquen una web en un determinado idioma.
Luego vendría el <head> donde iría <title>, los <meta>, la hoja de estilos (CSS) y JavaScript.
El primer elemento del <head> sería
|
1 2 |
<head> <meta charset="utf-8"> |
Esto es la codificación de caracteres, permite mostrar el texto de la página correctamente. El caso del utf-8 soporta caracteres especiales como la ñ o las tildes.
|
1 |
<meta name="description" content="Ejemplo básico de HTML5"> |
Esta meta o metaetiqueta se emplea para describir la web a los buscadores. Hay otra meta llamada description, pero esta no es relevante debido a que no cuenta para el SEO o posicionamiento.
|
1 |
<title>Ejemplo básico de HTML5</title> |
Muestra el título de la web, en la pestaña de tu navegador deberías ver lo que has escrito dentro de estas etiquetas.
Y de ser el caso una hoja de estilos (CSS), un javascript y se cierra el <head>.
|
1 2 3 |
<link rel="stylesheet" href="ejemplo.css"> <script src="ejemplo.js"></script> </head> |
Puede que hayas visto que las etiquetas <link> o <script> van acompañadas del atributo type=»text/css» o type=»text/javascript» respectivamente, no es necesario especificarlo.
Y para ir terminando el <body> y el cierre de la etiqueta <html>
|
1 2 3 4 |
<body> <h1>Hola mundo</h1> </body> </html> |
En <body> ira el contenido de la web, en este caso un simple título grande en negrita.
Al final debería quedar esto
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo básico de HTML5"> <title>Ejemplo básico de HTML5<title> <link rel="stylesheet" href="ejemplo.css"> <script src="ejemplo.js"></script> </head> <body> <h1>Hola mundo</h1> </body> </html> |
Puntos a tener en cuenta
Para finalizar os diré unas cosas sobre el formato en HTML5
- Las comillas son opcionales. En el ejemplo anterior se podría haber puesto <meta charset=utf-8> y sería válido. Pero en un caso donde un atributo tiene varios valores si sería recomendable. Por ejemplo <div class=”clase1 ejemplo”>.
- Es case-insensitive. Esto quiere decir que no diferencia de mayúsculas de minúsculas. Podrías escribir la etiqueta <DiV> sin ningún problema.
- El cierre con barras es opcional. Hay etiquetas como el <meta> que no precisa de una barra al final para especificar el cierre. Un caso sería como este <meta charset=utf-8 />.
Espero que esta introducción os haya servido de ayuda. Saludos 😉