Différence entre SRC et HREF

Les atsortingbuts SRC et HREF sont utilisés pour inclure des entités externes telles qu’une image, un fichier CSS, un fichier HTML, toute autre page Web ou un fichier JavaScript.

Existe-t-il une différenciation claire entre SRC et HREF ? Où ou quand utiliser SRC ou HREF ? Je pense qu’ils ne peuvent pas être utilisés de manière interchangeable.

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

  • Pour référencer un fichier CSS: href="cssfile.css" dans la balise link.
  • Pour référencer un fichier JS: src="myscript.js" dans la balise script.
  • Pour référencer un fichier image: src="mypic.jpg" dans une balise image.
  • Pour référencer une autre page Web: href="http://www.webpage.com" dans une balise d’ancrage.

REMARQUE: La réponse de John-Yin est plus appropriée compte tenu des modifications apscopes aux spécifications.


Oui. Il y a 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 tout en href pour établir une relation entre le document de référence et une ressource externe.

L’atsortingbut 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 actuel (dans le cas d’ a ancre a ) ou le document actuel (en cas de link ) et l’ancre ou la ressource de destination définie par cet atsortingbut. Quand on écrit:

  

Le navigateur comprend que cette ressource est une feuille de style et le En traitement l’parsing 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 la même chose que de jeter le contenu du fichier css dans la balise de style . (Par conséquent, il est conseillé d’utiliser un link plutôt que @import pour joindre des feuilles de style à votre document HTML.)

L’ atsortingbut src (Source) incorpore simplement la ressource dans le document en cours à l’emplacement de la définition de l’élément. Par exemple Lorsque le navigateur trouve

  

Le chargement et le traitement de la page sont suspendus jusqu’à ce que le navigateur récupère, comstack et exécute le fichier. Cela revient à jeter le contenu du fichier js dans la balise script . Le même est le cas avec la balise img . C’est une balise vide et le contenu, qui devrait s’y trouver, est défini par l’atsortingbut src . Le navigateur interrompt 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 )


update : Reportez-vous à la réponse de @ John-Yin pour plus d’informations sur la manière dont il est implémenté selon les spécifications HTML 5.

La réponse d’Apnerve était correcte avant que HTML 5 ne soit sorti, maintenant c’est un peu plus compliqué.

Par exemple, l’élément script , selon la spécification HTML 5 , possède deux atsortingbuts globaux qui modifient le fonctionnement de l’atsortingbut src : async et defer . Celles-ci modifient la façon dont le script (incorporé en ligne ou importé depuis un fichier externe) doit être exécuté.

Cela signifie qu’il existe trois modes possibles pouvant être sélectionnés à l’aide de ces atsortingbuts:

  1. Lorsque l’atsortingbut async est présent, le script sera exécuté de manière asynchrone dès qu’il sera disponible.
  2. Lorsque l’atsortingbut async n’est pas présent mais que l’atsortingbut defer est présent, alors le script est exécuté lorsque l’parsing de la page est terminée.
  3. Lorsque aucun atsortingbut n’est présent, le script est extrait et exécuté immédiatement avant que l’agent utilisateur ne continue à parsingr 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 d’entre nous.

Je pense que ajoute des ressources à la page et est juste pour fournir un lien vers une ressource (sans append 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... 

Vous devriez vous rappeler quand utiliser tout le monde et c’est tout
le href est utilisé avec des liens

   

le src est utilisé avec des scripts et des images

   

l' url est généralement utilisé en CSS pour inclure quelque chose, par exemple pour append une image d'arrière-plan

 selector { background-image: url('https://stackoverflow.com/questions/3395359/difference-between-src-and-href/the_image_link'); } 

SRC ( S ou rc e) – Je veux charger cette ressource pour moi-même.

Par exemple:

 Absolute URL with script element:  Relative URL with img element :  

HREF ( REF erence en texte intégral) – Je veux faire référence à cette ressource pour quelqu’un d’autre.

Par exemple:

 Absolute URL with anchor element: Click here Relative URL with link element:  

Courtoisie

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

De W3:

Lorsque l’atsortingbut href de l’élément A est défini, l’élément définit une ancre source pour un lien pouvant ê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 atsortingbut 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

H REF : fait référence à des informations pour la page en cours, css info pour le style de page ou un lien vers une autre page. L’parsing de page n’est pas arrêtée.

SRC : SOURCE à append / charger sur la page comme dans les images ou le javascript. L’parsing de page peut s’arrêter en fonction de l’atsortingbut codé. C’est pourquoi il est préférable d’append un script juste avant la balise body pour que le rendu de la page ne soit pas bloqué.

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


partie 4 (Les éléments de HTML)

chapitre 2 (métadonnées du document)

la section 4 (L’élément link) indique que:

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

ne contient pas l’atsortingbut src

Ce qui est logique parce que c’est un lien.


chapitre 12 (Scripting)

la section 1 (L’élément script) indique que:

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

il ne mentionne même pas l’atsortingbut href

Cela indique que lors de l’utilisation de balises de script, utilisez toujours l’atsortingbut src !!!


chapitre 7 (contenu incorporé)

section 5 (l’élément img)

L’image donnée par les atsortingbuts src et srcset , et les atsortingbuts srcset tout élément source frère précédent, si le parent est un élément d’ picture , est le contenu incorporé.

ne mentionne pas non plus l’atsortingbut href

Cela indique que, lors de l’utilisation de balises img l’atsortingbut src doit être utilisé également …


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

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

Ils ont en effet un sens similaire, donc c’est une incohérence. Je suppose que la plupart du temps, les différentes balises étant implémentées par différents fournisseurs, elles ont été intégrées à la spécification, ce qui évite de casser la compatibilité avec les versions antérieures.

Ils n’ont pas de signification similaire. ‘src’ indique une ressource que le navigateur doit récupérer dans le cadre de la page en cours. HREF indique une ressource à extraire si l’utilisateur le demande.

Une définition simple

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

Je suis d’accord avec ce que dit l’appelve sur la distinction. Mais en cas de css, ça a l’air bizarre. 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 semble étrange pour moi. Même si elle n’est pas chargée avec la page toujours sans cette page ne peut pas sembler complète et donc pas seulement une relation, mais comme une ressource qui renvoie à de nombreuses autres images de type ressource.

src est utilisé pour append cette ressource à la page, alors 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 que c’est 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. Le navigateur doit donc 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 arrêté. C’est la raison pour laquelle YUI recommande de charger vos fichiers JS au bas de votre page Web.