1. 이미지

웹페이지에 이미지를 삽입할 때는 img tag를 사용한다.

img tag는 empty element다.

Untitled

<!DOCTYPE html>
<html>
  <body>
    <img src="assets/images/doug.jpg" alt="doug" width="100">
    <img src="assets/images/wrongname.gif" alt="이미지가 없습니다.">
  </body>
</html>

2. 미디어

2.1 audio

HTML5에서 새롭게 추가되었다.

audio 태그는 empty element가 아니다. 따라서 </audio>로 끝난다.

Untitled

<!DOCTYPE html>
<html>
	<body>
		<audio src="assets/audio/Kalimba.mp3" controls></audio>
	</body>
</html>

브라우저 별로 지원하는 음악 파일 형식이 다르다.
- source 태그를 사용하여 파일 형식의 문제를 해결할 수 있다. (아래처럼)

<!DOCTYPE html>
<html>
  <body>
    <audio controls>
      <source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
      <source src="assets/audio/Kalimba.ogg" type="audio/ogg">
    </audio>
  </body>
</html>

2.2 비디오

video 태그 역시 HTML5에서 새로 추가되었다.
- video 태그 역시 empty element가 아니다. 따라서 </video>로 끝난다.

Untitled

audio 태그와 마찬가지로 브라우저마다 다른 파일 지원 형식 문제를 해결하기 위해 source 태그를 사용할 수 있다.

<!DOCTYPE html>
<html>
  <body>
    <video width="640" height="360" controls>
      <source src="assets/video/wildlife.mp4" type="video/mp4">
      <source src="assets/video/wildlife.webm" type="video/webm">
    </video>
  </body>
</html>