¿Cuáles son las mejores prácticas para ordenar elementos?

Question

¿Cuáles son las mejores prácticas para ordenar elementos?

Puede usar cualquier cosa en cualquier orden? ¿la colocación de <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> es importante antes de <title>

Esto es más utilizado, ¿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>

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

66

css html xhtml w3c

Author: Jitendra Vyas, 2009-12-31

Source

7 answers

Esta es la plantilla que uso, simplemente borra lo que no necesites 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>

23

Author: Matej Janovčík,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-16 20:24:16

De acuerdo con W3 debe ser:

Meta charset
Título
Meta name = "description"
Meta name = "keywords"
Hoja de estilos
Archivos JavaScript

8

Author: André Bravo Ferreira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-22 10:45:10

A la mayoría de los navegadores no les importa cómo ordene sus elementos, pero siempre debe especificar charset primero.

Las mejores prácticas para IE7+ requieren que el charset, X-UA-Compatible, y las declaraciones base ocurren antes que cualquier otra cosa en el head, de lo contrario el navegador comienza de nuevo y vuelve a analizar todo lo que vino antes.

6

Author: jayrobinson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-24 23:18:15

Primero desea su tipo de contenido, ya que esto denota la codificación de caracteres, de lo contrario, si viene más adelante, algunos navegadores intentan adivinar la codificación. (No puedo recordar 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 como lo antes posible.

JavaScript No lo pondría en la cabeza, debería ir en la parte inferior de sus páginas ya que descargarlas bloquea el renderizado de las páginas.

5

Author: Ryan Doherty,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-12-31 21:48:04

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. Así que sugeriría:

Metas que afectan la apariencia, como charset (requerido antes por la especificación también), viewport, apple-mobile-web-app-capable
Título cerca de la parte superior para que el navegador pueda renderizarlo lo antes posible y el usuario tenga la sensación de que algo es sucediendo
Favicon e iconos táctiles
CSS (al menos CSS para above-the-fold; otros CSS se pueden cargar en el pie de página si desea obtener fantasía). Este paso normalmente bloquea todo lo demás de proceder, por lo que puse los elementos anteriores por encima de él, ya que proporcionan algunos comentarios durante el retraso de CSS.
Scripts críticos (como el rastreo del agente de usuario que puede 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 meta etiquetas)

También puede considerar insertar cualquier CSS y JS que se cargue en head, especialmente si es poco probable que su script/hoja pequeña y externa se almacene en caché de acuerdo con el perfil de su visitante típico. Y si lo haces en línea, idealmente querrás comprimirlo.

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

5

Author: mahemoff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-30 10:04:17

IIRC, algunos navegadores volverán a cargar el documento al encontrar un elemento content-type. Así que ese elemento probablemente debería venir primero dentro del elemento head del documento.

0

Author: David R Tribble,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-12-31 22:23:05

score 96 · Accepted Answer

En HTML, el DOCTYPE debe ir primero, seguido de un único elemento <html>, que debe contener un elemento <head> que contenga un elemento <title>, seguido de un elemento <body>. Vea la descripción de la estructura global de un documento HTML en HTML 4.01 y el borrador 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á automáticamente si las etiquetas no existen. <title> es la única etiqueta requerida en HTML. El documento HTML 4.01 válido más corto (al menos, que podría generar) es (necesita un <p> porque necesita 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 búsquedas de tipo de contenido en algunas circunstancias para determinar el tipo de recurso que no se ha especificado usando un encabezado HTTP Content-Type, y también la codificación de caracteres si el encabezado Content-Type no se ha suministrado o no incluye un charset (generalmente debe tratar de incluir estos encabezados y asegurarse de que sean correctos, pero hay algunas circunstancias en las que no puede, como archivos locales no transferidos a través de HTTP). Sin embargo, solo olfatean un número limitado de bytes al principio del documento para estos fines, por lo que cualquier cosa que sea destinado a afectar el rastreo de contenido o la codificación de caracteres debe estar cerca del comienzo del documento.

Por esta razón, HTML5 especifica que cualquier etiqueta meta que se use 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 de la elemento <title>. Pero recuerde que esta etiqueta es innecesaria si especifica correctamente un encabezado Content-type.

En CSS, las declaraciones de estilo posteriores tienen prioridad sobre las anteriores, siendo todas las demás iguales. Por lo tanto, generalmente debe colocar las hojas de estilo más genéricas que pueden ser anuladas anteriormente, y las hojas de estilo más específicas más adelante.

Por razones de rendimiento, puede ser una buena idea poner scripts en la parte inferior de la página, justo antes de </body>, porque cargando scripts bloquea la representación de la página.

Obviamente, las etiquetas <script> deben ordenarse de manera 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 de <head> no debería importar demasiado, aparte de la legibilidad. Me gusta ver el <title> hacia la parte superior, y poner las otras etiquetas <meta> en algún tipo de orden lógico.

La mayoría de las veces, el orden que debe poner cosas en el cuerpo de un documento HTML debe ser el orden en el que se deben mostrar, o el orden en el que se debe acceder. Puede usar CSS para reorganizar las cosas, pero los lectores de pantalla generalmente leerán las cosas en orden de origen, los índices de búsqueda extraerán las cosas en orden de origen, y así sucesivamente.