¿Dónde debo poner el código CSS y Javascript en una página web HTML?

Al diseñar una página web, ¿dónde debo poner el siguiente código?

<link rel=stylesheet type="text/css" href="css/layout.css">

Debo poner en el <head> o debo ponerlo en el <body>? Sírvanse aclarar las siguientes cuestiones:

  1. ¿Qué diferencia hace si lo pongo en <head> o en cualquier otro lugar alrededor del código HTML?
  2. ¿Qué pasa si tengo dos archivos CSS (o Javascript)? Dado que solo puedo incluir un archivo antes de otro, qué archivo será utilizado por el navegador web para mostrar el página web?
Author: Sumit Gupta, 2011-07-08
Source

10 answers

En mi opinión, la mejor práctica es colocar el archivo CSS en el encabezado

<head>
  <link rel="stylesheet" href="css/layout.css" type="text/css">
</head>

Y el archivo Javascript antes de la etiqueta </body> de cierre

  <script type="text/javascript" src="script.js"></script>
</body>

También si tienes, como dijiste dos archivos CSS. El navegador usaría ambos. Si hubiera algún selector, es decir. .content {} que fueran iguales en ambos archivos CSS el navegador sobrescribiría las propiedades similares del primero con las propiedades del segundo. Si eso tiene sentido.

 62
Author: brenjt,
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
2015-11-09 21:12:46

Poner Hojas de estilo en la parte superior Enlaces a discusión

Mientras investigaba el rendimiento en Yahoo!, descubrimos que mover hojas de estilo al encabezado del documento hace que las páginas parezcan cargarse más rápido. Esto se debe a que poner hojas de estilo en la CABEZA permite que la página se renderice progresivamente.

Los ingenieros de Front-end que se preocupan por el rendimiento quieren que una página se cargue progresivamente; es decir, queremos que el navegador muestre cualquier contenido que tenga lo antes posible. Este es especialmente importante para las páginas con mucho contenido y para los usuarios con conexiones a Internet más lentas. La importancia de proporcionar a los usuarios información visual, como indicadores de progreso, ha sido bien investigada y documentada. En nuestro caso la página HTML es el indicador de progreso! Cuando el navegador carga la página progresivamente el encabezado, la barra de navegación, el logotipo en la parte superior, etc. todos sirven como retroalimentación visual para el usuario que está esperando la página. Esto mejora el usuario en general experiencia.

El problema de colocar hojas de estilo cerca de la parte inferior del documento es que prohíbe el renderizado progresivo en muchos navegadores, incluido Internet Explorer. Estos navegadores bloquean el renderizado para evitar tener que volver a dibujar elementos de la página si sus estilos cambian. El usuario está atascado viendo una página blanca en blanco.

La especificación HTML establece claramente que las hojas de estilo deben incluirse en el ENCABEZADO de la página: "A diferencia de A, [LINK] solo puede aparecer en la sección HEAD de a documento, aunque puede aparecer cualquier número de veces."Ninguna de las alternativas, la pantalla blanca en blanco o el destello de contenido sin estilo, vale la pena el riesgo. La solución óptima es seguir la especificación HTML y cargar sus hojas de estilo en el encabezado del documento.

Poner Scripts en la parte inferior

El problema causado por los scripts es que bloquean las descargas paralelas. La especificación HTTP/1.1 sugiere que los navegadores no descarguen más de dos componentes en paralelo nombre de host. Si sirve sus imágenes desde varios nombres de host, puede obtener más de dos descargas en paralelo. Sin embargo, mientras se descarga un script, el navegador no iniciará ninguna otra descarga, incluso en nombres de host diferentes.

En algunas situaciones no es fácil mover los scripts a la parte inferior. Si, por ejemplo, el script utiliza documento.escribir para insertar parte del contenido de la página, no se puede mover hacia abajo en la página. También podría haber problemas de alcance. En muchos casos, hay maneras de solucione estas situaciones.

Una sugerencia alternativa que a menudo surge es usar scripts diferidos. El atributo DEFER indica que el script no contiene documento.escribir, y es una pista para los navegadores que pueden continuar renderizando. Desafortunadamente, Firefox no admite el atributo DIFERIR. En Internet Explorer, el script puede ser diferido, pero no tanto como se desee. Si un script se puede diferir, también se puede mover a la parte inferior de la página. Que hará que sus páginas web carga más rápido.

 17
Author: Joe,
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
2016-11-01 13:13:30
  1. Debe poner los enlaces de la hoja de estilos y javascript <script> en el <head>, como lo dictan los formatos. Sin embargo, algunos ponen javascript <script>s en la parte inferior del cuerpo, de modo que el contenido de la página se cargará sin esperar a <script>, pero esto es una compensación ya que la ejecución del script se retrasará hasta que se carguen otros recursos.
  2. CSS tiene prioridad en el orden en el que se enlazan (en sentido inverso): primero sobrescrito por segundo, sobrescrito por tercero, etc.
 8
Author: shelhamer,
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
2013-07-30 08:06:40

Deberías poner CSS en el <head> porque eso es lo que la especificación dice hacer.

Si tiene más de un archivo CSS, se cargarán en el orden en que los coloque en el código. Si hay estilo en el segundo archivo CSS, sobrescribe el estilo en el primero; eso sucederá por diseño. Por lo tanto, Hojas de Estilo en cascada.

La mayoría de los navegadores todavía renderizarán efectivamente los archivos CSS fuera de la cabeza, pero su código no es semánticamente correcto.

Puede utilizar Enlaces de archivos JavaScript en cualquier parte del documento. Hay diferentes razones para utilizar algunos en el <head> y algunos en otra parte de la página. (Por ejemplo, se indica que el código analítico de Google se ponga en la parte inferior.)

 4
Author: Michael Irigoyen,
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
2011-07-08 14:26:34

En mi opinión, la mejor manera es 1) coloque el archivo CSS en la parte de encabezado entre la etiqueta head la razón es que la primera página muestre la vista para la que css requiere 2) y todo el archivo js debe colocarse antes de la etiqueta de cierre del cuerpo. la razón es que, después de todo, la pantalla de componentes js puede aplicarse

 4
Author: Saloni shah,
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
2018-04-19 06:31:19

CSS includes debe ir en el head antes de cualquier script js includes. Javascript puede ir a cualquier parte, pero realmente la función del archivo podría determinar la ubicación. Si construye contenido de la página, póngalo en la cabeza. Si se utiliza para eventos o seguimiento, se puede poner antes de la </body>

 2
Author: zeal,
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
2015-06-24 14:43:10

Debe ponerlo en la . Normalmente pongo las referencias de estilo encima de JS y ordeno mi JS de arriba a abajo si algunas de ellas dependen de otras, pero creo que todas las referencias se cargan antes de que se renderice la página.

 1
Author: Glenn Ferrie,
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
2011-07-08 14:20:03

Con respecto a <link /> y <style />, no tienes opción, ellos deben estar en la sección <head /> (ver unoy dos).

Respecto a <script />que puede aparecer tanto en <head /> y <body /> (ver tres), por lo general es mejor ponerlos en el <head /> ya que no son realmente "contenido" (donde "contenido" es lo que el usuario ve en la pantalla), son más algo que "funciona en" el "contenido".

Especificación HTML4 del W3C FTW!

 1
Author: Albireo,
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
2011-07-08 14:26:40

Y si tiene más de uno .css or .archivo js para llamar, solo inclúyalos uno tras otro, o: 

<head>

<link href="css/grid.css" rel="stylesheet" />

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

<script src="js/jquery-1.4.4.min.js"></script>

<script src="js/jquery.animate-colors-min.js"></script>

</head>
 0
Author: Adam,
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
2011-07-08 14:25:01

SEGÚN mi estudio en css lugar siempre dentro .como:-

 <head>
  <link href="css/grid.css" rel="stylesheet" />
 </head>

Y para la escritura su depen: -

  1. Si está dentro del documento script. escriba presente entonces estará en la etiqueta de la cabeza.
  2. Si el script contiene el atributo DEFER, PORQUE defer descargado todo en paralelo
 0
Author: Neha Sinha,
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
2018-08-13 09:04:42