html - historia - Diferencia entre SRC y HREF
html historia (15)
Los atributos SRC y HREF se utilizan para incluir algunas entidades externas, como una imagen, un archivo CSS, un archivo HTML, cualquier otra página web o un archivo JavaScript.
¿Hay una clara diferenciación entre SRC y HREF ? ¿Dónde o cuándo usar SRC o HREF ? Creo que no se pueden usar indistintamente.
A continuación se muestran algunos ejemplos en los que se usan estos atributos:
- Para referir un archivo CSS:
href="cssfile.css"dentro de la etiqueta de enlace. - Para referir un archivo JS:
src="myscript.js"dentro de la etiqueta del script. - Para referir un archivo de imagen:
src="mypic.jpg"dentro de una etiqueta de imagen. - Para referir otra página web:
href="http://www.webpage.com"dentro de una etiqueta de anclaje.
Una definición simple
- SRC: si se puede colocar un recurso dentro de la etiqueta corporal (para imagen, secuencia de comandos, iframe, marco)
- HREF: si un recurso no se puede colocar dentro de la etiqueta corporal y solo se puede vincular (para html, css)
Creo que <src> agrega algunos recursos a la página y <href> es solo para proporcionar un enlace a un recurso (sin agregar el recurso a la página).
De W3:
Cuando se establece el atributo href del elemento A, el elemento define un ancla fuente para un enlace que puede ser activado por el usuario para recuperar un recurso Web. El ancla fuente es la ubicación de la instancia A y el anclaje de destino es el recurso web.
Fuente: http://www.w3.org/TR/html401/struct/links.html
Este atributo especifica la ubicación del recurso de la imagen. Los ejemplos de formatos de imagen ampliamente reconocidos incluyen GIF, JPEG y PNG.
Debes recordar cuándo usar a todos y eso es todo
el href se usa con enlaces
<a href="#"></a>
<link rel="stylesheet" href="style.css" />
el src se usa con scripts e imágenes
<img src="the_image_link" />
<script type="text/javascript" src="" />
la url se usa generalmente en CSS para incluir algo, por ejemplo para agregar una imagen de fondo
selector { background-image: url(''the_image_link''); }
Ellos no tienen significados similares. ''src'' indica un recurso que el navegador debe buscar como parte de la página actual. HREF indica un recurso que debe buscarse si el usuario lo solicita.
Estoy de acuerdo con lo que apnerve dice sobre la distinción. Pero en el caso de css parece extraño. Como css también se descarga al cliente por navegador. No es como una etiqueta de anclaje que apunta a ningún recurso específico. Así que usar href me parece extraño. Incluso si no está cargado con la página aún sin esa página no puede verse completa, por lo que no es solo una relación, sino un recurso similar que a su vez se refiere a muchas otras imágenes de recursos.
H REF : Es una referencia a la información de la página actual, es decir, información CSS para el estilo de página o enlace a otra página. El análisis de página no está detenido.
SRC : Es un re SOURCE para ser agregado / cargado a la página como en imágenes o javascript. El análisis de página puede dejar de depender del atributo codificado. Es por eso que es mejor agregar una secuencia de comandos justo antes de la etiqueta corporal final para que la representación de la página no se mantenga.
La respuesta de apnerve fue correcta antes de que saliera HTML 5, ahora es un poco más complicado.
Por ejemplo, el elemento script , de acuerdo con la especificación HTML 5 , tiene dos atributos globales que cambian la forma en que funciona el atributo src : async y defer . Estos cambian la forma en que se debe ejecutar el script (incrustado en línea o importado de un archivo externo).
Esto significa que hay tres modos posibles que se pueden seleccionar con estos atributos:
- Cuando el atributo
asyncestá presente, el script se ejecutará de manera asíncrona tan pronto como esté disponible. - Cuando el atributo
asyncno está presente pero el atributodeferestá presente, el script se ejecuta cuando la página ha terminado de analizarse. - Cuando ninguno de los atributos está presente, el script se busca y se ejecuta inmediatamente, antes de que el agente de usuario continúe analizando la página.
Para más detalles, consulte la recomendación HTML 5
Solo quería actualizar con una nueva respuesta para quien visita ocasionalmente este tema. Algunas de las respuestas deben ser revisadas y archivadas por y cada uno de nosotros.
No son intercambiables, cada uno se define en diferentes elementos, como se puede ver aquí .
De hecho, tienen significados similares, por lo que esta es una incoherencia. Asumiría la mayoría de las veces debido a las diferentes etiquetas implementadas por distintos proveedores, para luego incluirlas en la especificación para evitar la compatibilidad con versiones anteriores.
Si está hablando de HTML4, su lista de atributos puede ayudarlo con las sutilezas. No son intercambiables.
después de pasar por la ducumentación HTML 5.1 (1 de noviembre de 2016):
parte 4 (Los elementos de HTML)
capítulo 2 (metadatos del documento)
la sección 4 (El elemento de enlace) establece que:
El destino de los enlaces está dado por el atributo
href, que debe estar presente y debe contener una URL válida no vacía potencialmente rodeada de espacios. Si el atributohrefestá ausente, entonces el elemento no define un enlace.
no contiene el atributo src ...
bruja es lógico porque es un enlace.
capítulo 12 (Scripting)
La sección 1 (El elemento script) establece que:
Los scripts clásicos pueden estar incrustados en línea o pueden importarse desde un archivo externo utilizando el atributo
src, que si se especifica da la URL del recurso de script externo para usar. Si se especificasrc, debe ser una URL válida no vacía potencialmente rodeada de espacios. El contenido de los elementos de script en línea o el recurso de script externo debe cumplir con los requisitos de la producción de scripts de la especificación de JavaScript para scripts clásicos.
ni siquiera menciona el atributo href ...
¡Esto indica que al usar etiquetas de script siempre se usa el atributo src !
capítulo 7 (contenido incrustado)
sección 5 (El elemento img)
La imagen proporcionada por los atributos
srcysrcset, y los atributossrcsetcualquier elemento de origen hermano anterior si el padre es un elemento depicture, es el contenido incrustado.
Tampoco menciona el atributo href ...
esto indica que cuando se utilizan etiquetas img el atributo src debe usar también ...
src se usa para agregar ese recurso a la página, mientras que href se usa para vincular a un recurso particular de esa página.
Cuando lo utiliza en su página web, el navegador ve que es una hoja de estilo y, por lo tanto, continúa con la representación de la página, ya que la hoja de estilo se descarga en paralelo.
Cuando lo usa en su página web, le dice al navegador que inserte el recurso en la ubicación. Entonces, el navegador tiene que buscar el archivo js y luego lo carga. Hasta que el navegador finalice el proceso de carga, se detiene el proceso de representación de la página. Esa es la razón por la que YUI recomienda cargar sus archivos JS en la parte inferior de su página web.
Definición simple
SRC : (Source). To specify the origin of (a communication); document:
HREF : (Hypertext Reference). A reference or link to another page, document...
NOTA: la answer @John-Yin es más apropiada considerando los cambios en las especificaciones.
Sí. Existe una diferenciación entre src y href y no se pueden usar indistintamente. Usamos src para elementos replaced mientras que href para establecer una relación entre el documento de referencia y un recurso externo.
El atributo href (Referencia de hipertexto) especifica la ubicación de un recurso Web definiendo así un enlace o relación entre el elemento actual (en el caso del anclaje a ) o el documento actual (en el caso del link ) y el ancla o recurso de destino definido por este atributo. Cuando escribimos:
<link href="style.css" rel="stylesheet" />
El navegador entiende que este recurso es una hoja de estilo y el tratamiento el análisis sintáctico de la página no está en pausa (la reproducción puede detenerse porque el navegador necesita las reglas de estilo para pintar y representar la página). No es similar a descargar el contenido del archivo css dentro de la etiqueta de style . (Por lo tanto, es recomendable utilizar un link lugar de @import para adjuntar hojas de estilo a su documento html).
El atributo src (Fuente) simplemente incorpora el recurso en el documento actual en la ubicación de la definición del elemento. Por ej. Cuando el navegador encuentra
<script src="script.js"></script>
La carga y el procesamiento de la página se pausan hasta que el navegador recupera, compila y ejecuta el archivo. Es similar a descargar el contenido del archivo js dentro de la etiqueta de script . Similar es el caso con la etiqueta img . Es una etiqueta vacía y el contenido, que debe entrar en él, se define mediante el atributo src . El navegador detiene la carga hasta que recupera y carga la imagen. [así es el caso con iframe ]
Esta es la razón por la cual es recomendable cargar todos los archivos de JavaScript en la parte inferior (antes de la etiqueta </body> )
actualización : consulte la answer @John-Yin para obtener más información sobre cómo se implementa según las especificaciones de HTML 5.
SRC ( S ou rc e) - Quiero cargar este recurso por mi cuenta.
Por ejemplo:
Absolute URL with script element: <script src="http://googleapi.com/jquery/script.js"></script>
Relative URL with img element : <img src="mypic.jpg">
HREF (REFERENCIA DE HETERECTO) - Quiero referirme a este recurso para otra persona.
Por ejemplo:
Absolute URL with anchor element: <a href="http://www.google.com/">Click here</a>
Relative URL with link element: <link href="mystylesheet.css" type="text/css">
Courtesy