의미의, 의미론적인
Semantic은 어문계열을 전공했다면 의미론을 공부할 때 들어봤을 단어이다. Semantics가 의미론이라는 뜻이기 때문. 그러니 semantic은 형용사로 의미의, 의미론적인 같은 뜻이 된다.
그런데 이 단어가 웹이랑 결합되면?
의미론적인 웹. 웹 3.0. 데이터의 웹. 연결된 데이터를 컴퓨터가 이해하고 논리적 추론까지 가능하게 하는 차세대 지능형 웹
의미있는 태그. 브라우저와 개발자 모두에게 의미를 명확하게 표현하는 시맨틱 요소
HTML 시맨틱 요소는 non-semantic
요소와 semantic
요소로 나뉜다.
non-semantic
요소: 해당 요소의 내용물에 대해 아무것도 알려주지 않는다.
예) <div>
, <span>
, <em>
semantic
요소: 해당 요소의 내용물에 대해 명확하게 표현한다.
예) <form>
, <table>
, <article>
HTML5
이전의 많은 웹사이트들은 HTML 코드에 <div id="nav">
나 <div class="header">
처럼 non-semantic
요소에 id 또는 class를 부여하는 형식으로 작성되었다. 그래서 사람이 눈으로 코드를 보면 해당 요소의 의미나 역할 등을 알 수 있었지만, 컴퓨터가 이해할 수는 없었기 때문에 특히 검색엔진의 robot
이 수집한 정보를 컴퓨터가 알아서 해석하거나 가공할 수 없었다.
우리가 항상 요즘 시대는 정보의 홍수다, 정보의 취사선택을 할 줄 알아야 한다 했던 것들도 다 그래서였던 것인가...!
여하튼 이러한 문제를 해결하고자 HTML5
에서 새로이 추가된 시맨틱 요소들이 있다.
HTML5
에서 추가된 시맨틱 요소들 중 몇 가지만 예시를 들어보자.
태그 | 설명 |
---|---|
<article> | 독립적이고 스스로를 포함한 컨텐츠 |
<aside> | 페이지 컨텐츠 옆의 컨텐츠 |
<details> | 사용자가 나타내거나 숨길 수 있는 부가적인 상세사항 |
<img>
와 <div style="background-image: ./img.jpg;">
의 차이<img>
semantic
요소이므로 사람과 컴퓨터 모두가 이해할 수 있다.alt
속성을 추가하여 이미지가 깨졌을 때뿐만이 아니라, 해당 이미지가 등록된 웹사이트를 사용하는 시각장애인도 해당 이미지가 무엇인지 알 수 있다.<div style="background-image: ./img.jpg;">
non-semantic
요소이므로 사람만 해석이 가능하다.