Diferencia entre SRC y HREF

Los atributos SRCy HREFse utilizan para incluir algunas entidades externas como una imagen, un archivo CSS, un archivo HTML, cualquier otra página web o un archivo JavaScript.

¿Existe una clara diferenciación entre SRCy HREF? ¿Dónde o cuándo usar SRCo HREF? Creo que no se pueden usar indistintamente.

A continuación, presento algunos ejemplos en los que se utilizan estos atributos:

• Para referir un archivo CSS: href="cssfile.css"dentro de la etiqueta del 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.

NOTA: La respuesta de @ John-Yin es más apropiada considerando los cambios en las especificaciones.

Si. Hay una diferenciación entre src y href y no se pueden usar indistintamente. Utilizamos src para los elementos reemplazados 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 caso de ancla a) o el documento actual (en caso de 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 Procesandoel análisis de la página no está en pausa (el procesamiento puede estar en pausa ya que el navegador necesita las reglas de estilo para pintar y renderizar la página). Es no similar al vertido el contenido del archivo CSS dentro de la styleetiqueta. (Por lo tanto, es aconsejable usar en linklugar de @importadjuntar hojas de estilo a su documento html).

El atributo src (Fuente) simplemente incrusta 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 detiene hasta que el navegador recupera, compila y ejecuta el archivo. Es similar a volcar el contenido del archivo js dentro de la scriptetiqueta. Similar es el caso con la imgetiqueta. Es una etiqueta vacía y el contenido, que debe venir dentro, está definido por el srcatributo. 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 JavaScript en la parte inferior (antes de la </body>etiqueta)

actualización : Consulte la respuesta de @ John-Yin para obtener más información sobre cómo se implementa según las especificaciones HTML 5.

La respuesta de apnerve fue correcta antes de que saliera HTML 5, ahora es un poco más complicado.

Por ejemplo, el scriptelemento, de acuerdo con la especificación HTML 5 , tiene dos atributos globales que cambian el funcionamiento del srcatributo:async y defer. Estos cambian cómo se debe ejecutar el script (incrustado en línea o importado desde un archivo externo).

Esto significa que hay tres modos posibles que se pueden seleccionar usando estos atributos:

1. Cuando el async atributo está presente, el script se ejecutará de forma asíncrona, tan pronto como esté disponible.
2. Cuando el asyncatributo no está presente pero eldefer atributo está presente, el script se ejecuta cuando la página ha finalizado el análisis.
3. Cuando ninguno de los atributos está presente, el script se recupera y ejecuta de inmediato, antes de que el agente de usuario continúe analizando la página.

Para más detalles, consulte recomendación HTML 5

Solo quería actualizar con una nueva respuesta para quien ocasionalmente visita este tema. Stackoverflow y cada uno de nosotros deben verificar y archivar algunas de las respuestas.

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 en sí a la página).

Definición simple

SRC : (Source). To specify the origin of (a communication); document:     

HREF : (Hypertext Reference). A reference or link to another page, document...

SRC ( S ou rc e): quiero cargar este recurso para mí.

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 ( H ypertext REF ) - 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">

Cortesía

H REF : Es un REF rencia a la información de la página actual información css es decir, para el estilo de página o vínculo a otra página. El análisis de página no se detiene.

SRC : es una fuente que se agregará / cargará en la página como en imágenes o javascript. El análisis de la página puede detenerse dependiendo del atributo codificado. Es por eso que es mejor agregar un script justo antes de la etiqueta del cuerpo final para que la representación de la página no se detenga.

Si estás hablando de HTML4, su lista de atributos puede ayudarte con las sutilezas. No son intercambiables.

De W3:

Cuando se establece el atributo href del elemento A, el elemento define un ancla de origen para un enlace que el usuario puede activar para recuperar un recurso web. El ancla de origen es la ubicación de la instancia A y el ancla 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 imagen. Los ejemplos de formatos de imagen ampliamente reconocidos incluyen GIF, JPEG y PNG.

Fuente: http://www.w3.org/TR/REC-html40/struct/objects.html

Una definición simple

• SRC: si un recurso se puede colocar dentro de la etiqueta del cuerpo (para imagen, script, iframe, marco)
• HREF: si un recurso no se puede colocar dentro de la etiqueta del cuerpo y solo se puede vincular (para html, css)

Usted debe recordar cuándo utilizar cada uno y eso es todo
el href se utiliza 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'); } 

después de pasar por la documentació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 hrefatributo, que debe estar presente y debe contener una URL válida no vacía potencialmente rodeada de espacios. Si el hrefatributo está ausente, el elemento no define un enlace.

no contiene el srcatributo ...

La bruja es lógica porque es un enlace.

Capítulo 12 (Scripting)

la sección 1 (El elemento del script) establece que:

Las secuencias de comandos clásicas pueden estar incrustadas en línea o pueden importarse desde un archivo externo utilizando el srcatributo, que si se especifica proporciona la URL del recurso de secuencia de comandos externo para usar. Si srcse especifica, debe ser una URL no vacía válida potencialmente rodeada de espacios. El contenido de los elementos de secuencia de comandos en línea, o el recurso de secuencia de comandos externo, debe cumplir con los requisitos de la producción de secuencias de comandos de la especificación de JavaScript para secuencias de comandos clásicas.

Ni siquiera menciona el hrefatributo ...

¡Esto indica que al usar etiquetas de script siempre use el srcatributo!

capítulo 7 (contenido incrustado)

sección 5 (El elemento img)

La imagen dada por los atributos srcy srcset, y los atributos de cualquier elemento hermano anterior srcsetsi el padre es un pictureelemento, es el contenido incrustado.

tampoco menciona el hrefatributo ...

esto indica que cuando se usan imgetiquetas, el srcatributo debe usarse también ...

Enlace de referencia a la Recomendación del W3C

No son intercambiables: cada uno se define en diferentes elementos, como se puede ver aquí .

De hecho, tienen significados similares, por lo que esto es una inconsistencia. Asumiría principalmente debido a que las diferentes etiquetas están siendo implementadas por diferentes proveedores para comenzar, luego se incluyen en la especificación para evitar romper la compatibilidad con versiones anteriores.

No tienen significados similares. 'src' indica un recurso que el navegador debe buscar como parte de la página actual. HREF indica un recurso a buscar si el usuario lo solicita.

Estoy de acuerdo con lo que dice apnerve 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 un recurso específico. Así que usar href me parece extraño. Incluso si no está cargada con la página sin esa página, no puede verse completa y, por lo tanto, no es solo una relación, sino un recurso similar, que a su vez se refiere a muchos otros recursos como imágenes.

src se usa para agregar ese recurso a la página, mientras que href se usa para vincular a un recurso particular desde esa página.

Cuando lo usa 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 a medida 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. Así que ahora el navegador tiene que buscar el archivo js y luego cargarlo. Hasta que el navegador finalice el proceso de carga, el proceso de representación de la página se detiene. Esa es la razón por la cual YUI recomienda cargar sus archivos JS en la parte inferior de su página web.