¿Cuáles son las mejores prácticas para ordenar elementos en <head>?

90

¿Puedes usar cualquier cosa en cualquier orden? ¿ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">Es importante colocar antes<title>

esta es la más utilizada, ¿es la mejor manera?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title Goes Here</title>
    <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
    <link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

        $("#wmd-input").focus();
        $("#title").focus();
        $("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });

    });        
</script>


</head>

<body>
<p>This is my web page</p>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>

</html>

este sitio http://stackoverflow.com no tiene ninguna codificación y<meta>

Utilizo un CMS que tiene un componente de SEO que agrega todos <meta>para SEO después de todo js y css. archivos. ¿Puede la colocación de cualquier elemento en cualquier orden permitido <head>afectar la compatibilidad y codificación del documento?

html css xhtml w3c Jitendra Vyas
fuente
¿A dónde fueron todos los comentarios?
Pekka
Este sitio (stackoverflow.com) tiene su conjunto de codificación (a UTF-8), está solo en los encabezados HTTP a los que pertenece. Definir el juego de caracteres en una metaetiqueta es una especie de solución hacky.
jpsimons
2
Derecha. Es preferible definir el juego de caracteres en los encabezados HTTP, pero en algunas situaciones no puede configurarlos (como cargar archivos desde su disco local), por lo que la <meta>etiqueta es una solución alternativa para esos casos, pero no es esencial.
Brian Campbell
Hubo un montón de comentarios aquí mismo, al menos nueve o diez. No eran nada especial, pero tampoco había nada ofensivo en ellos. ¿Adonde se fueron todos? ¿Quién tiene el poder de eliminar comentarios y por qué?
Pekka
Todos tenemos el poder de borrar nuestros propios comentarios; ¿Algunas personas eliminaron las suyas? Nunca vi los comentarios sobre esta pregunta, ya que estaba ocupado componiendo mi respuesta. ¿Estás seguro de que no estás pensando en otra pregunta?
Brian Campbell

Respuestas:

111

En HTML, DOCTYPEdebe ir primero, seguido de un solo <html>elemento, que debe contener un <head>elemento que contenga un <title>elemento, seguido de un <body>elemento. Vea la descripción de la estructura global de un documento HTML en HTML 4.01 y el borrador de HTML5 ; los requisitos reales son en su mayoría los mismos que no sean DOCTYPE, pero se describen de manera diferente.

Las etiquetas reales ( <html>, </html>, <head>, etc.) son opcionales; los elementos se crearán automáticamente si las etiquetas no existen. <title>es la única etiqueta obligatoria en HTML. El documento HTML 4.01 válido más corto (al menos, que podría generar) es (necesita un <p>porque debe haber algo en el <body>para ser válido):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>

Y el documento HTML5 válido más corto:

<!DOCTYPE html><title></title>

Tenga en cuenta que en XHTML, todas las etiquetas deben especificarse explícitamente; no se insertarán elementos implícitamente.

Los navegadores realizan un rastreo de tipo de contenido en algunas circunstancias para determinar el tipo de recurso que no se ha especificado mediante un Content-Typeencabezado HTTP, y también un rastreo de codificación de caracteres si el Content-Typeencabezado no se ha proporcionado o no incluye un charset(generalmente debe intentar incluir estos encabezados y asegurarse de que sean correctos, pero hay algunas circunstancias en las que no puede, como archivos locales que no se transfieren a través de HTTP). Sin embargo, solo detectan un número limitado de bytes al comienzo del documento para estos fines, por lo que cualquier cosa que tenga la intención de afectar la detección de contenido o la detección de codificación de caracteres debe estar cerca del comienzo del documento.

Por esta razón, HTML5 especifica que cualquier metaetiqueta que se utilice para especificar el conjunto de caracteres (ya sea <meta http-equiv="Content-type" content="text/html; charset=...">o simplemente <meta charset=...>) debe estar dentro de los primeros 1024 bytes del archivo para que surta efecto. Por lo tanto, si va a incluir información de codificación de caracteres dentro de su documento, debe colocar la etiqueta al principio del archivo, posiblemente incluso antes del <title>elemento. Pero recuerde que esta etiqueta es innecesaria si especifica correctamente un Content-typeencabezado.

En CSS, las declaraciones de estilo posteriores tienen prioridad sobre las anteriores , en igualdad de condiciones. Por lo tanto, generalmente debe colocar las hojas de estilo más genéricas que se puedan anular antes y las hojas de estilo más específicas más adelante.

Por motivos de rendimiento, puede ser una buena idea colocar los scripts en la parte inferior de la página, justo antes del </body>, porque cargar scripts bloquea el procesamiento de la página.

Obviamente, las <script>etiquetas deben ordenarse de modo que los scripts que dependen de cada orden tengan las dependencias cargadas primero.

En general, aparte de las restricciones que ya he especificado, el orden de las etiquetas dentro <head>no debería importar demasiado, aparte de la legibilidad. Me gusta ver las etiquetas <title>hacia arriba y colocar las otras <meta>etiquetas en algún tipo de orden lógico.

La mayoría de las veces, el orden en el que debe colocar las cosas en el cuerpo de un documento HTML debe ser el orden en el que deben mostrarse o el orden en el que deben accederse. Puede usar CSS para reorganizar las cosas, pero los lectores de pantalla generalmente leerán las cosas en el orden de origen, los índices de búsqueda extraerán las cosas en el orden de origen, etc.

Brian Campbell
fuente
5
Que el TÍTULO sea obligatorio fue una novedad para mí y me parece un poco extraño. Pero al verificar las especificaciones oficiales, está absolutamente en lo cierto, por supuesto. ¡Vive y aprende!
Carl Smotricz
Lo que me sorprendió es que es la única etiqueta obligatoria ... De hecho, he argumentado que también debería ser opcional en HTML5 (ya que no es realmente necesario para cosas como los gadgets que siempre estarán en un iframey nunca tendrán un título visible ), pero decidieron no cambiar eso esta vez.
Brian Campbell
@Brian: gracias a Brian por esta bonita explicación. Así que nunca me decepcionó. este sitio tiene mentes maestras. y una cosa más U entiende muy bien la pregunta y luego da la respuesta muy bien. buen trabajo.
Jitendra Vyas
1
@Jitendra ¡Ja, ja! He respondido un montón de sus preguntas recientes, ¿no es así? Estoy un poco borracho por una fiesta de año nuevo. Pero puedo intentarlo ... aunque no garantizo que mi respuesta sea tan buena como la de la última pareja.
Brian Campbell
3
El enfoque moderno consiste en colocar <script>etiquetas con un atributo asynco . Ver stackoverflow.com/questions/436411/…defer<head>
joshreesjones
31

Esta es la plantilla que uso, simplemente elimine lo que no necesite para un nuevo proyecto.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <meta name="robots" content="index, follow">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="scss/style.css" />

    <!-- http://realfavicongenerator.net/ -->

    <meta property="fb:page_id" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:site" content="">

    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
  </body>
</html>
Matej Janovčík
fuente
6
X-UA-Compatible debe ser la primera etiqueta en la cabeza debido a stackoverflow.com/questions/3449286/…
Denis
@Denis, ¿sabes lo que es <html class="default"> malo?
shaijut
3
@stom ¿te refieres a por qué hay atributos de clase? Requiere código JavaScript adicional para eliminar esa clase una vez que se carga la página. Al hacer esto, sabrá que JavaScript está habilitado en el navegador. Si este atributo todavía existe, esto significa que JavaScrips está deshabilitado para que pueda mostrar algún mensaje al usuario usando CSS, si lo necesita
Denis
@Denis usa <noscript> </noscript> para verificar javascript habilitado
TheCrazyProfessor
1
¿Podría comentar, por favor, su razonamiento para este pedido?
2540625
7

Al agregar algunas sugerencias de rendimiento a la respuesta de Brian, la prioridad más alta debería ser lógicamente las cosas que deberán descargarse para que el navegador pueda comenzar a descargarlas lo antes posible y las cosas que afectarán la forma en que se presenta la página. Entonces sugiero:

  • Metas que afectan la apariencia, como el juego de caracteres (requerido al principio por la especificación también), la ventana gráfica, la aplicación web móvil de apple
  • Título cerca de la parte superior para que el navegador pueda representarlo lo antes posible y el usuario tenga la sensación de que algo está sucediendo
  • Favicon e íconos táctiles
  • CSS (al menos CSS para la mitad superior de la página; se puede cargar otro CSS en el pie de página si desea ser elegante). Este paso normalmente bloquea todo lo demás para que no continúe, por lo que coloco los elementos anteriores encima, ya que brindan algunos comentarios durante el retraso de CSS.
  • Secuencias de comandos críticas (como el rastreo de agentes de usuario que pueden afectar el diseño) que no se pueden cargar en el pie de página
  • Todo lo demás (por ejemplo, metadatos necesarios en forma de enlaces y metaetiquetas)

También puede considerar incluir cualquier CSS y JS que se carguen en la cabeza, especialmente si es pequeño y es poco probable que el script / hoja externa se almacene en caché de acuerdo con el perfil de su visitante típico. Y si lo hace en línea, idealmente querrá comprimirlo.

Lo último: el usuario tiene que esperar la cabeza, y cualquier recurso de bloqueo que cargue, por lo que es mejor poner tanto como sea posible en el cuerpo o el pie de página.

mahemoff
fuente
7

Según W3 debería ser:

  • Meta juego de caracteres
  • Título
  • Meta nombre = "descripción"
  • Meta nombre = "palabras clave"
  • Hoja de estilo
  • Archivos JavaScript
André Bravo Ferreira
fuente
El artículo vinculado está redireccionando y no parece decir nada sobre el orden.
2540625
Las hojas de estilo bloquean el renderizado, en lugar de cargar js async antes de CSS.
Nulo el
5

Primero desea su tipo de contenido, ya que esto indica la codificación de caracteres; de lo contrario, si aparece más adelante, algunos navegadores intentan adivinar la codificación. (No recuerdo los detalles, pero creo que IE adivinará si no encuentra una codificación en los primeros 75 caracteres del documento)

La mayoría de los servidores web envían la codificación en los encabezados HTTP, pero si un usuario guarda su página, los encabezados no se guardan con ella.

Pondría las referencias CSS en segundo lugar para que el navegador las descargue lo antes posible.

JavaScript no pondría en la cabeza, debería ir al final de sus páginas, ya que descargarlos bloquea la representación de las páginas.

Ryan Doherty
fuente
0

IIRC, algunos navegadores volverán a cargar el documento al encontrar un content-typeelemento. Entonces, ese elemento probablemente debería estar primero dentro del headelemento del documento.

David R Tribble
fuente