[HTML5] <src> 와 <href> 뭐가 다를까?

2속성 모두 HTML에서 링크나 리소스를 참조할 때 사용하는 속성입니다.

두 속성 모두 경로를 지정하는 역할을 하지만, 사용하는 요소와 목적이 다릅니다.

 

src (Source)

src 속성은 이미지, 비디오, 오디오, 프레임 등과 같은 외부 리소스를 포함할 때 사용됩니다.

해당 요소가 로드될 때 실제 콘텐츠를 가져올 위치를 지정합니다.

 

예1 : 이미지(img)

<img src="image.jpg" alt="설명">

 

• src="image.jpg"는 이미지를 가져올 파일 경로를 지정합니다.
• alt="설명"은 이미지를 불러오지 못할 때 보여줄 대체 텍스트입니다.

 

예2 : 비디오(video)

<video src="video.mp4" controls></video>

 

• src="video.mp4"는 비디오 파일의 경로를 지정합니다.
• controls 속성은 재생, 일시 정지 등의 비디오 컨트롤을 보여줍니다.

 

예3 : 스크립트(script)

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

 

 

• src="script.js"는 JavaScript 파일의 경로를 지정합니다.

---

href (Hypertext Reference)

href 속성은 하이퍼링크를 정의할 때 사용됩니다.

링크를 클릭했을 때 이동할 URL을 지정합니다. 주로 a (앵커) 요소와 link 요소에서 사용됩니다.

 

예1 : 앵커(a)

<a href="https://www.example.com">예시 사이트</a>

• href="https://www.example.com"는 사용자가 링크를 클릭했을 때 이동할 웹 페이지의 URL을 지정합니다.

 

예2 : 링크(link)

<link href="styles.css" rel="stylesheet">

 

• href="styles.css"는 CSS 파일의 경로를 지정합니다.
• rel="stylesheet"는 링크가 스타일 시트라는 것을 지정합니다.

 

주요 차이점

• src: 외부 리소스를 포함할 때 사용하며, 요소가 로드될 때 해당 리소스를 가져옵니다.
• href: 하이퍼링크를 정의할 때 사용하며, 링크를 클릭했을 때 이동할 위치를 지정합니다.

이 두 속성은 각각의 역할에 맞춰 HTML 문서 내에서 특정 리소스나 페이지로의 경로를 지정하는 데 필수적입니다.