Semantic
프로그래밍에서, 시맨틱(Semantic)은 코드 조각의 의미를 나타낸다.
"이 Javascript 코드를 실행하는 것은 어떤 효과가 있는가?"
"이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"
JavaScript 시맨틱
textContent 문자열을 매개변수로 하고 <li> 요소를 반환하는 함수
위 함수를 build('Peach') 로 부르는 것보다 createLiWithContent('Peach') 로 부르는 것이 함수의 기능을 보다 Semantic하게 나타내는 방법이다.
CSS 시맨틱
다양한 종류의 과일을 나타내는 리스트 태그 <li>
위 태그를 div > ul > li 로 선택하는 것보다 .fruits__item 으로 선택하는 것이 DOM의 선택된 부분을 보다 Semantic하게 나타내는 방법이다.
HTML 시맨틱
<h1> 태그
<h1>This is a top level heading</h1>HTML에서 <h1> 태그는 페이지 내 최상위 제목 텍스트를 감싸는 역할을 수행하며, 태그 자체가 자신의 역할을 의미하는 Semantic 태그이다.
Semantic Web
시맨틱 웹(Semantic Web)은 직역하면 의미론적인 웹이다.
보다 자세히는, 시맨틱 태그(Semantic Tag)를 사용하여 정보의 의미에 맞게 구성한 웹을 말한다.
컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹.
또한 다른 의미로는 정보를 분석하여 그 정보의 관계 속에서 의미론적인 자료들을 추출하여 웹 상에 보여줄 수 있는 웹 이다.
시맨틱 웹은 컴퓨터가 이해할 수 있도록 잘 정의된 의미들로
시맨틱 웹은 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하여,
다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할수 있는 웹을 만드는 것이 목표
왜 Semantic하게 웹을 구성해야 할까?
1. 검색 엔진 최적화 (SEO, Search Engine Optimization)
검색 엔진을 가지고 있는 사이트는 봇을 사용해 각 사이트의 정보를 수집한다. 시맨틱 태그를 통해 구성된 사이트는 태그 자체가 의미를 가지기 때문에 봇이 정보를 수집하기 용이하다. 즉, 검색 엔진 최적화(SEO)에 유리하다.
2. 접근성 (accessibility)
시맨틱 태그를 사용한 사이트는 코드를 보다 쉽게 interpret 할 수 있다. 따라서 다양한 디바이스나 브라우저를 통해 접근하더라도 더욱 쉽게 사이트를 보여줄 수 있게 된다. 즉, 사이트의 접근성이 높아진다. 특히 시각장애인들의 경우에는 사이트 문서를 읽어주는 스크린 리더를 사용하는데, 이 경우에도 시맨틱 태그를 활용한 사이트가 훨씬 유리하다.
3. 코드의 간결성 & 가독성
<div>, <span> 과 같이 의미가 불분명한 태그로 코드를 작성하면, 태그가 감싸고 있는 컨텐츠가 어떤 내용인지 바로 이해하기 어렵다. 반면 시맨틱 태그는 감싸고 있는 내용이 어떤 의미인지를 내포하고 있다는 점에서 코드를 한눈에 이해하기 쉽다. 즉, 코드가 간결해지고 가독성이 좋아진다.
참고한 글
Semantics - 용어 사전 | MDN
