Semantic Web & Semantic Tag

Sang Young Ha·2021년 8월 31일

우선 img tag 는 background-image 와 다르게 alt 와 title attribute 를 사용할 수 있어 스크린을 직접적으로 읽는 사람이나 코드를 읽는 사람에게 더 많은 정보를 전달 할 수 있다.
만약 이미지 로드가 안되는경우, background-image element 는 그냥 이미지가 뜨지 않게된다.
performance 에서도 차이가 있다고 한다. img tag 는 html 이 parsing 되면서 다른정보와 함께 로드가 되지만 background-image 로써 큰 용량의 이미지들이 다수 존재한다면 로드의 속도에서 차이를 보인다.
background-image 가 쓰기 좋은 경우를 생각해 보자면,, 페이지 자체에 이미지로써 배경을 입히거나 할때 유용하게 사용할 수 있을거 같다.

semantic 이라는 단어의 사전적 정의를 wikipedia 에서 찾아보면 "In computer science, the term semantics refers to the meaning of language constructs, as opposed to their form (syntax). According to Euzenat, semantics "provides the rules for interpreting the syntax which do not provide the meaning directly but constrains the possible interpretations of what is declared." 라고 나온다.
매우매우! 간단하고 대략적으로 해석을 하자면 신택스에 대한 해석의 규칙을 제공하며 뜻을 전달해준다고 한다. Web 의 가장 기초적인 목적이 정보 전달 이라고 하는데 이에 있어 semantic tag를 사용하는 것은 정보전달이라는 목적에 더 잘 부합한다.
div 나 span 태그와 같이 class 를 지정하거나 뜯어보지 않으면 컨텐츠의 정의가 정확하지 않다고 한다. 하지만 기타 태그들은 그 이름 자체로써 어떤 역할을 수행하는지 직관적인 정보 전달이 가능하다.
semantic tag 의 예시