Trailing slash on void elements has no effect and interacts badly with unquoted attribute values

목차 1. 발생원인 2. 해결방법 3. 참고사항

 

 1. 발생원인

 HTML 문서에서 void element (닫는 태그가 없는 요소) 뒤에 슬래시(/)를 사용할 때 발생.
 void element에는 일반적으로 이미지, 링크 및 입력 요소와 같은 요소가 포함된다.

 

 1.1 문제점

 1) 효과없음
 void element 뒤에 슬래시를 사용해도 실제로는 아무런 효과가 없어서 문법에 맞게 사용시 문제될게 없긴하다.  
 2) 문제 발생
 슬래시를 사용하면 따옴표 없는 속성 값을 사용할 때 오류가 발생할 수 있다.

잘못된 코드의 예시

<img src=test.jpg />

이 코드에서 브라우저는 test.jpg가 속성 값인지 파일 이름인지 구분할 수 없어 오류가 발생

 2. 해결 방법

1) 슬래시 제거
 void element 뒤에 있는 모든 슬래시를 제거
2) 속성 값에 따옴표 사용
 모든 속성 값에 따옴표를 사용

※ 예시
오류 코드

<img src="test.jpg" /> <input type="text" name="testName" />

수정된 코드

<img src=" test .jpg"> <input type="text" name=" testName ">

 

 3. 참고사항

 1) HTML5에서는 void element 뒤에 슬래시를 사용하는 것이 허용되지만 권장하지 않는다.
 2) 오류를 방지하고 코드 가독성을 높이려면 슬래시를 사용하지 않는 것이 좋다.
 3) HTML 검증 도구를 사용하여 코드의 오류를 확인하는 것이 좋다.