30 de marzo de 2012

Nueva cabecera HTML5

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