우리가 코드를 작성하며 사용하는 여러가지 것들 중에는
tags가 있다.
이 것들 중에서는 태그의 이름만으로 어떠한 기능을 하는지
알 수 있는 경우가 있다, 이러한 경우를 Semantic Tags라고 한다.
Semantic Tags는 리소스에 대한 정보와 자원 사이의 관계를
사람 뿐만 아니라 컴퓨터가 이해하고 처리하기 쉽도록 표현해주는 태그이다.
대표적인 예로는 image , header가 있다.
이 중에서 image를 예로 Semantic Tags를 설명하자면,
먼저 이미지를 홈페이지에 넣는 방법은 두 가지가 있다.
<img src="~~~"> // img 태그를 이용하는 방법1 . 이미지 태그를 이용
.class {
background-image:
url("~~~"); // background-image속성을 이용하는 방법
}2 . css 속성을 이용
두 가지 방법의 차이점은 무엇일까?
먼저 Semantic Tags를 이용한 경우는
- 이미지 로딩이 실패할 때, alt="대체 메시지"로 대체 결과물을 출력할 수 있다.
- HTML이 구문 분석될 때 요청이 이루어지므로 성능면에서 속성을 이용할 때 보다 좋다.
img태그는 태그 자체가 "이미지"라는 의미를 갖고 있기 때문에, alt 속성에 넣은 문자열을 검색엔진이 이해하여 웹에 노출시킨다.
위의 설명만을 보면 속성으로 배경이미지를 사용했을 때의 메리트가 딱히 없어보이지만 그렇지 않다.
속성값으로 background-image를 이용한 경우는
-
내가 작성중인 홈페이지의 콘텐츠와 사용하고자 하는 이미지가 서로 관련이 없어 이미지를 불러오지 못해도 상관 없을 때.
-
단순히 디자인 적인 요소로만 사용될 때.
두 가지 방법이 사용되는 이유와 성능적인 측면을 고려하여
적절하게 혼용하는 것이 바람직한 사용법이라고 생각한다.
참고한 내용
위키백과 - https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9
나무위키 - https://namu.wiki/w/HTML/%ED%83%9C%EA%B7%B8?from=%EC%8B%9C%EB%A7%A8%ED%8B%B1%20%ED%83%9C%EA%B7%B8#%EC%8B%9C%EB%A7%A8%ED%8B%B1%20%ED%83%9C%EA%B7%B8
