Ahora que ya sabemos los cambios que han ocurrido en las etiquetas de cabecera en HTML5, es el momento de crear una cabecera que cumpla con la especificación y con la cual podamos trabajar a partir de ahora además de poder introducir otras etiquetas ya utilizadas en HTML4.0.1 y XHTML1.0 para indicar el titulo de la pagina, descripción, palabras clave, autor….
Estas otras etiquetas <meta> no las pondremos en nuestro ejemplo ya que no corresponden con HTML5, y son etiquetas que ya existían y su utilización es igual.
La sintaxis utilizada hasta ahora con HTML4.01 y XHTML1.0, aunque había varias opciones yo solo pondré una de ejemplo para poder compararla con la nueva sintaxis en HTML5, sería la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
….
</body>
</html>
La nueva sintaxis de la cabecera de una web HTML5 en su formato más básico, sería la siguiente:
/*Especificamos el documento que vamos a tratar, es decir un archivo .html*/
<!DOCTYPE>
/*Le indicamos el lenguaje a utilizar en la página web*/
<html lang="ES-es">
<head>
/*Le decimos el grupo de caracteres que se utilizaran para la web*/
<meta charset="UTF-8">
/*Titulo de la pagina*/
<title>….</title>
/*Script externo que posiblemente utilicemos en la web*/
<script src="script.js"></script>
/*Link a nuestra hoja de estilos css*/
<link rel="stylesheet" href="estilos.css" />
/*Script en el archivo .html sin ser externo*/
<script>
/*Codigo javascript*/
</script>
/*Estilo en el archivo .html sin ser externo*/
<style>
/*Estilos CSS*/
</style>
</head>
<body>
……..
</body>
</html>
Nos podemos dar cuenta la diferencia que existe de una a otra, HTML5 está llegando para ser mucho más intuitivo, mas semántico y para poder ser funcional tanto para el pasado, el presente o el futuro sin tener que sufrir cambios en sus etiquetas como ocurría hasta ahora.
No hay comentarios:
Publicar un comentario