HTML에서 웹 페이지에 이미지를 표시하려면 <img> 태그를 사용합니다. <img> 태그는 닫는 태그가 필요 없는 빈(empty) 요소로, src 속성에 이미지 경로를 지정하는 것이 필수입니다.
img 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| align | top bottom middle left right | 지원 중단(Deprecated) — 이미지의 정렬 방식을 지정합니다. 현재는 CSS의 vertical-align, float 속성을 사용하는 것이 권장됩니다. |
| alt | 텍스트 | 이미지를 불러올 수 없거나 시각 장애인용 스크린 리더를 위해 표시되는 대체 텍스트를 지정합니다. |
| border | 픽셀 | 지원 중단(Deprecated) — 이미지 테두리의 두께를 지정합니다. CSS의 border 속성으로 대체할 수 있습니다. |
| crossorigin | anonymous use-credentials | 교차 출처(CORS) 접근을 허용하는 제3자 사이트의 이미지를 canvas에서 재사용할 수 있도록 허용합니다. |
| height | 픽셀 또는 % | 이미지의 높이를 지정합니다. |
| hspace | 픽셀 | 지원 중단(Deprecated) — 객체 좌우에 삽입할 여백의 크기를 지정합니다. |
| ismap | URL | 이미지를 서버 측(server-side) 이미지 맵으로 정의합니다. |
| longdesc | 텍스트 | 지원 중단(Deprecated) — 긴 설명이 담긴 문서의 URI/URL을 지정합니다. alt 속성의 짧은 설명을 보완하는 용도로 사용되었습니다. |
| src | URL | 표시할 이미지 파일의 URL(경로)을 지정합니다. 필수 속성입니다. |
| usemap | #맵이름 | 이미지를 클라이언트 측(client-side) 이미지 맵으로 정의하며, <map> 및 <area> 태그와 함께 사용됩니다. |
| vspace | 픽셀 | 지원 중단(Deprecated) — 객체 상하에 삽입할 여백의 크기를 지정합니다. |
| width | 픽셀 또는 % | 이미지의 너비를 픽셀 또는 백분율(%) 단위로 설정합니다. |
참고: align, border, hspace, vspace 같은 속성은 HTML5에서 공식적으로 지원이 중단되었으므로, 새로운 프로젝트에서는 CSS를 통해 동일한 효과를 구현하는 것이 좋습니다.
예제
다음 코드를 실행하면 웹 문서에 이미지를 추가할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML img 태그</title> </head> <body> <img src = "https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg" alt = "HTML5 배우기" height = "250" width = "270" /> </body> </html>
위 예제에서 src 속성은 표시할 이미지의 경로를, alt 속성은 대체 텍스트를, 그리고 height와 width 속성은 각각 이미지의 세로·가로 크기를 지정합니다. 이처럼 몇 가지 속성만 조합하면 손쉽게 웹 페이지에 이미지를 삽입할 수 있습니다.