Différence entre SRC et HREF

Les attributs SRCet HREFsont utilisés pour inclure certaines entités externes comme une image, un fichier CSS, un fichier HTML, toute autre page Web ou un fichier JavaScript.

Y a-t-il une distinction claire entre SRCet HREF? Où et quand utiliser SRCou HREF? Je pense qu'ils ne peuvent pas être utilisés de manière interchangeable.

Je donne ci-dessous quelques exemples où ces attributs sont utilisés:

• Pour référencer un fichier CSS: href="cssfile.css"à l'intérieur de la balise de lien.
• Pour référencer un fichier JS: src="myscript.js"à l'intérieur de la balise script.
• Pour référencer un fichier image: à l' src="mypic.jpg"intérieur d'une balise image.
• Pour faire référence à une autre page Web: à l' href="http://www.webpage.com"intérieur d'une balise d'ancrage.

REMARQUE: La réponse de @ John-Yin est plus appropriée compte tenu des changements dans les spécifications.

Oui. Il existe une différenciation entre src et href et ils ne peuvent pas être utilisés de manière interchangeable. Nous utilisons src pour les éléments remplacés tandis que href pour établir une relation entre le document de référence et une ressource externe.

L'attribut href (Référence Hypertexte) spécifie l'emplacement d'une ressource Web définissant ainsi un lien ou une relation entre l'élément courant (en cas d'ancre a) ou le document courant (en cas de link) et l'ancre ou ressource de destination définie par cet attribut. Quand on écrit:

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

Le navigateur comprend que cette ressource est une feuille de style et que le En traitementl'analyse de la page n'est pas interrompue (le rendu peut être interrompu car le navigateur a besoin des règles de style pour peindre et rendre la page). Ce n'est pas similaire au vidage du contenu du fichier css à l'intérieur de la stylebalise. (Par conséquent, il est conseillé d'utiliser linkplutôt que @importde joindre des feuilles de style à votre document html.)

L' attribut src (Source) incorpore simplement la ressource dans le document courant à l'emplacement de la définition de l'élément. Pour par exemple. Lorsque le navigateur trouve

<script src="script.js"></script>

Le chargement et le traitement de la page sont suspendus jusqu'à ce que le navigateur récupère, compile et exécute le fichier. Cela revient à vider le contenu du fichier js dans la scriptbalise. Il en va de même pour le imgtag. C'est une balise vide et le contenu, qui devrait y entrer, est défini par l' srcattribut. Le navigateur suspend le chargement jusqu'à ce qu'il récupère et charge l'image. [c'est le cas avec iframe]

C'est la raison pour laquelle il est conseillé de charger tous les fichiers JavaScript en bas (avant la </body>balise)

mise à jour : Référez-vous à la réponse de @ John-Yin pour plus d'informations sur la façon dont elle est mise en œuvre selon les spécifications HTML 5.

La réponse d'apnerve était correcte avant la sortie de HTML 5, maintenant c'est un peu plus compliqué.

Par exemple, l' scriptélément, selon la spécification HTML 5 , a deux attributs globaux qui changent le fonctionnement de l' srcattribut: asyncet defer. Celles-ci modifient la manière dont le script (intégré en ligne ou importé à partir d'un fichier externe) doit être exécuté.

Cela signifie qu'il existe trois modes possibles qui peuvent être sélectionnés à l'aide de ces attributs:

1. Lorsque l' asyncattribut est présent, le script sera exécuté de manière asynchrone, dès qu'il sera disponible.
2. Lorsque l' asyncattribut n'est pas présent mais que l' deferattribut est présent, le script est exécuté lorsque la page a terminé l'analyse.
3. Lorsqu'aucun attribut n'est présent, le script est extrait et exécuté immédiatement, avant que l'agent utilisateur ne poursuive l'analyse de la page.

Pour plus de détails, veuillez consulter la recommandation HTML 5

Je voulais juste mettre à jour avec une nouvelle réponse pour quiconque visite occasionnellement ce sujet. Certaines des réponses doivent être vérifiées et archivées par stackoverflow et chacun de nous.

Je pense que cela <src>ajoute des ressources à la page et <href>sert uniquement à fournir un lien vers une ressource (sans ajouter la ressource elle-même à la page).

Définition 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) - Je veux charger cette ressource pour moi-même.

Par exemple:

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 erence ) - Je veux faire référence à cette ressource pour quelqu'un d'autre.

Par exemple:

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">

Courtoisie

H REF : Est un REF érence à l' information pour la page en cours à savoir info css pour le style de page ou un lien vers une autre page. L'analyse de page n'est pas arrêtée.

SRC : est une source à ajouter / charger sur la page comme dans les images ou javascript. L'analyse de page peut s'arrêter en fonction de l'attribut codé. C'est pourquoi il est préférable d'ajouter un script juste avant la balise body de fin afin que le rendu de la page ne soit pas retardé.

Si vous parlez de HTML4, sa liste d'attributs pourrait vous aider avec les subtilités. Ils ne sont pas interchangeables.

Depuis W3:

Lorsque l'attribut href de l'élément A est défini, l'élément définit une ancre source pour un lien qui peut être activé par l'utilisateur pour récupérer une ressource Web. L'ancre source est l'emplacement de l'instance A et l'ancre de destination est la ressource Web.

Source: http://www.w3.org/TR/html401/struct/links.html

Cet attribut spécifie l'emplacement de la ressource image. Les exemples de formats d'image largement reconnus incluent GIF, JPEG et PNG.

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

Une définition simple

• SRC: si une ressource peut être placée à l'intérieur de la balise body (pour image, script, iframe, frame)
• HREF: Si une ressource ne peut pas être placée dans la balise body et ne peut être liée (pour html, css)

Vous devez vous rappeler quand utiliser tout le monde et c'est que
le href est utilisé avec des liens

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

le src est utilisé avec des scripts et des images

<img src="the_image_link" />
<script type="text/javascript" src="" />

l' url est généralement utilisée en CSS pour inclure quelque chose, par exemple pour ajouter une image de fond

selector { background-image: url('the_image_link'); } 

après avoir parcouru la documentation HTML 5.1 (1er novembre 2016):

partie 4 (Les éléments du HTML)

chapitre 2 (métadonnées du document)

la section 4 (L'élément lien) indique que:

La destination du ou des liens est donnée par l' hrefattribut, qui doit être présent et doit contenir une URL non vide valide potentiellement entourée d'espaces. Si l' hrefattribut est absent, alors l'élément ne définit pas de lien.

ne contient pas l' srcattribut ...

la sorcière est logique car c'est un lien.

chapitre 12 (Script)

La section 1 (l'élément de script) indique que:

Les scripts classiques peuvent être incorporés en ligne ou peuvent être importés à partir d'un fichier externe à l'aide de l' srcattribut, qui, s'il est spécifié, donne l'URL de la ressource de script externe à utiliser. Si srcest spécifié, il doit s'agir d'une URL non vide valide potentiellement entourée d'espaces. Le contenu des éléments de script en ligne ou de la ressource de script externe doit être conforme aux exigences de la production de scripts de la spécification JavaScript pour les scripts classiques.

il ne mentionne même pas le href attribut ...

cela indique que lorsque vous utilisez des balises de script, utilisez toujours l' srcattribut !!!

chapitre 7 (Contenu intégré)

section 5 (L'élément img)

L'image donnée par les attributs srcet srcset, et les attributs de tout élément source frère précédent srcsetsi le parent est un pictureélément, est le contenu incorporé.

ne mentionne pas non plus l' hrefattribut ...

cela indique que lors de l'utilisation de imgbalises, l' srcattribut doit être utilisé également ...

Lien de référence vers la recommandation du W3C

Ils ne sont pas interchangeables - chacun est défini sur différents éléments, comme on peut le voir ici .

Ils ont en effet des significations similaires, c'est donc une incohérence. Je suppose principalement en raison des différentes balises implémentées par différents fournisseurs au départ, puis intégrées dans les spécifications telles quelles pour éviter de rompre la compatibilité ascendante.

Ils n'ont pas de significations similaires. «src» indique une ressource que le navigateur doit récupérer dans le cadre de la page actuelle. HREF indique une ressource à extraire si l'utilisateur le demande.

Je suis d'accord avec ce qu'apnerve dit sur la distinction. Mais en cas de css, cela semble étrange. Comme css est également téléchargé sur le client par navigateur. Ce n'est pas comme une balise d'ancrage qui pointe vers une ressource spécifique. Donc, utiliser href me semble étrange. Même si elle n'est pas chargée avec la page, elle ne peut toujours pas sembler complète et donc ce n'est pas seulement une relation, mais comme une ressource qui à son tour fait référence à de nombreuses autres ressources telles que des images.

src est utilisé pour ajouter cette ressource à la page, tandis que href est utilisé pour créer un lien vers une ressource particulière à partir de cette page.

Lorsque vous utilisez dans votre page Web, le navigateur voit qu'il s'agit d'une feuille de style et continue donc avec le rendu de la page lorsque la feuille de style est téléchargée en parallèle.

Lorsque vous utilisez dans votre page Web, il indique au navigateur d'insérer la ressource à l'emplacement. Alors maintenant, le navigateur doit récupérer le fichier js, puis le charger. Tant que le navigateur n'a pas terminé le processus de chargement, le processus de rendu de la page est interrompu. C'est la raison pour laquelle YUI recommande de charger vos fichiers JS tout en bas de votre page Web.