Con HTML5 han cambiado algunas etiquetas HTML, han dejado de ser válidos algunos atributos, han aparecido algunos nuevos, también han surgido nuevas etiquetas con sus nuevos atributos. Recopilamos aquí los cambios más significativos dentro de head, de cara a construir una cabecera HTML limpia y correcta, y aprovechar todo el potencial de HTML5.
!DOCTYPE
Con HTML5 se ha simplificado; con HTML4.01 había tres posibles doctypes, ahora solo hay uno: HTML. Más info.
<!DOCTYPE html>
html
Mediante la etiqueta html haremos la distinción entre los navegadores que soportan HTML5, los que soportan JavaScript, según recomiendan varios desarrolladores.
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]--> </html>
Actualización 4 de febrero de 2014. Como indica Christian en los comentarios, las sentencias condicionales no son etiquetas válidas en HTML5. Cito a Christian:
son etiquetas de compatibilidad que sólo entiende internet explorer dentro de un comentario sgml, lo cual está absolutamente prohibido.
head
Ha desaparecido el atributo profile. Más info.
<head> ... </head>
title
Sin cambios.
<title>Título del documento</title>
meta
Nuevo atributo charset para definir el juego de caracteres del documento. scheme deja de estar soportado. Más info.
<meta charset="utf-8" />
El resto de la información sobre el documento se sigue especificando mediante el par de atributos name y content. Listado completo de los valores del atributo name. Se pueden definir valores diferentes para el atributo name.
<meta content="Nombre del Autor" name="author" /> <meta content="Descripción de la página" name="description" /> <meta content="etiqueta1, etiqueta2, etiqueta3" name="keywords" />
link
Las etiquetas link no necesitan ya el atributo type, pero conviene dejarlo por compatibilidad con navegadores que no soportan HTML5.
La siguiente línea es válida según HTML5:
<link rel="stylesheet" href="css/style.css" />
Y con ésta otra mantenemos la compatibilidad con navegadores que no soportan HTML5.
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
Javier Casares explica la importancia del atributo rel de cara al SEO en HTML5.
Para incluir favicon basta colocarlo en el raíz de nuestro alojamiento web, no hace falta incluir el rel="shortcut icon".
La cabecera completa:
<!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]--> <head> <meta charset="utf-8" /> <title>Título del documento</title> <meta content="Nombre del Autor" name="author" /> <meta content="Descripción de la página" name="description" /> <meta content="etiqueta1, etiqueta2, etiqueta3" name="keywords" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> </head> </html>
8 comentarios
Muy buenas,
Buen artículo!..muy amable!..muchas gracias! ;)
Oye me han comentado que google ya no hace caso a los metas. Que en HTML5 hay unas etiquetas que suplen los metas, y que google busca dentro del contenido.
He estado buscando por ahí pero no encuentro buena información!
Sabes algo sobre esto?
Gracias.
Un saludo.
Hola Jagger,
Google y otros buscadores han relativizado la importancia de los metas con el paso del tiempo: hace unos años eran fundamentales para la indexación, ahora cada vez menos.
En cualquier caso tienen también su función. No hay que dejar de usarlos.
La novedad más importante quizás de HTML5 es que integra etiquetas semánticas que permiten a los buscadores clasificar la información de una página, como ya pasaba por ejemplo con el XML.
Por ejemplo, la etiqueta address de HTML5 le dice a los buscadores que lo que envuelve es una dirección, un contacto.
QUE TAL BUEN DIA
PREGUNTA
ENTONCES LAS ETIQUETAS META SIGUEN FUNCIONANDO DE CUALQUIER MANERA?
Y QUE ME RECOMIENDAS PARA YO COMO DISEÑADOR WEB OPTIMIZAR MI PAGINA PARA QUE REGISTRE MAS ETIQUETAS LOS BUSCADORES?
SALUDOS
BUEN DIA SKORPEREZ!
:)
Hola Carlos,
sí, las etiquetas meta siguen funcionando en HTML5.
Para más información sobre la función de cada etiqueta meta de cara a buscadores: 18 Meta Tags Every Webpage Should Have in 2013.
Muy buen post, me ha despejado mucho las dudas
Los if comentados no corresponden a html5 , son etiquetas de compatibilidad que sòlo entiende internet explorer dentro de un comentario sgml, lo cual está absolutamente prohibido. Porqué seguir compatibilizando con código no estándar un navegador que incumple peor que todos los grandes (Chrome, Firefox, Opera, etc…). No deberìa tomarse como un encabezado «correcto».
Hola Christian, muchas gracias por la aclaración. He actualizado el post, incorporando tu comentario.