src와 href, 차이는 무엇일까

<link href="" rel="stylesheet">

<a href="">

<img src="">

<script src= "">

등등

 

우리는 태그에서 참조할 자료주소를 가져올 때 href, src 속성을 사용한다.

그.런.데

 

href와 src의 의미는 무엇이고, 왜 link에는 src를 안쓰고, img에는 href를 쓰지 않는 것일까?

 

아래는 stackoverflow에서 그 이유에 대해 설명해주는 글들을 가져와봤다.

 

1. 쉬운 설명

참고: https://stackoverflow.com/questions/12032337/differences-between-url-src-and-href

src -- I want to load up this resource for myself.

-> src는 이 요소를 직접 로드하고 싶을 때 사용하는 속성

href -- I want to refer to this resource for someone else.

-> 이 요소를 참조하고 싶을 때 사용하는 속성, 즉 직접 HTML 문서에 로드되지는 않는 속성

 

대략적으로 파악했을 때, src는 요소를 내 HTML 문서에 "직접 싣는다"는 의미, href는 일단 직접 심지는 않고 필요할 때 "그 자료가 로드된 곳을 찾아가기 위한 경로를 지정" 할 때 사용한다는 의미로 정리해본다.

즉, html 문서나 css 파일을 "참조"할 때 href, 이미지나 스크립트를 HTML에 "직접 심을 때" src를 쓴다.

 

2. 조금 어려운 설명

참고 : https://stackoverflow.com/questions/3395359/difference-between-src-and-href

HREF: Is a REFerence to information for the current page ie css info for the page style or link to another page. Page Parsing is not stopped.

-> 핵심은 href 속성을 읽는 과정에서 파싱이 중단되지 않는다는 말.

 

SRC: Is a reSOURCE to be added/loaded to the page as in images or javascript. Page Parsing may stop depending on the coded attribute. That is why it's better to add script just before the ending body tag so that page rendering is not held up.

-> 핵심은 파싱이 중단될 수 있다는 말. 그래서 src 속성이 있는 script의 경우 body 태그의 마지막에 넣어야 한다.