[HTML] Empty tag(빈 태그)

2020. 8. 18. 15:13HTML, CSS/HTML

▶ Empty tag(빈 태그)

 

  일반적으로 태그는 열리고 닫히는 범위가 존재함.

 

<div>
...
</div>

 

  Empty tag의 경우 닫히는 태그가 별도로 없음. 따라서 비어 있다(empty)고 표현함.

<img src="" alt="">

 

  또는 Self closing tag라고 해서 스스로 닫히는 형식으로 쓰이기도 함. 열리는 동시에 스스로 닫아버리는 것.

<img src="" alt="" />

 

 

 

▶ Empty tag(빈 태그)의 두 가지 방식

 

  1. '/'가 없는 empty tag

    - HTML 1, 2, 3, 4에서 사용 가능.

  2. '/'가 있는 empty tag

    - XHTML에서 사용 가능.

   HTML5에서는 두 가지 방식 모두 사용 가능함.

 

 

 

▶ 사용 시 유의 사항

  • XHTML 버전이나 Lint 환경 혹은 프레임워크 세팅에 따라 '/'을 사용하는 것이 필수가 될 수 있음.
  • 개발 환경에 따라 '/'을 사용하거나 사용하지 않을 수 있는데, 둘 중 어느 것이 더 좋은 방식인가에 대해서는 여전히 갑론을박이 있음.
  • 분명한 것은 둘 다 사용 가능한 환경일 경우 두 가지 방식을 혼용하지 않고 한 가지만 일관성 있게 사용하는 것이 필요함.

 

 

▶ 일반 태그와의 비교

  • 일반 태그의 경우 열리고 닫히는 범위가 존재함.
    - 특정한 속성과 값이 당장 해당 태그에 지정되어 있지 않더라도 주어진 범위 내에 content를 넣을 수 있어 태그가 가진 의미 자체만으로도 충분히 사용할 수 있음.
  • Empty tag의 경우 범위가 존재하지 않음.
    - 대부분 태그가 위치한 영역에서 무언가를 해결해야 하는 용도로 사용됨.
    - 따라서 태그가 가지는 의미보다는 그 의미를 확장해서 사용할 수 있는 속성과 값이 empty tag 내에 포함됨.
    - 그냥 사용되는 경우도 없지는 않지만 대체적으로 그렇다는 것.