시맨틱한 코드란?
프로그래밍 언어에서 시맨틱이란 코드의 문자 그대로의 생김새가 아닌 코드가 의미하는 바를 의미한다. ^1
HTML을 예로들자면,
<h1> 이것은 이 문서에서 가장 큰 제목입니다. </h1>위의 h1 이라는 HTML 태그는 태그 사이의 내용이 없이도 태그 그 자체로 해당 문서의 가장 큰 제목이라는 의미를 갖는 시맨틱하다고 볼 수 있다.
그러나,
<span style="font-size: 32px; margin: 21px 0;">이것도 이 문서에서 가장 큰 제목으로 의도하고 쓴 태그입니다.</span>위의 span 태그는 브라우저에 의해서 디폴트로 렌더링되었을 때 h1 태그와 똑같은 모양을 갖지만 해당 태그 자체로 태그가 감싸고 있는 내용, 즉 포함된 데이터가 문서에서 가장 큰 제목이라는 의미를 내포하지는 못하므로 시맨틱하다고 볼 수 없다.
이러한 구분은 꼭 HTML 태그에만 국한된 것이 아닌 Javascript와 같은 언어나 CSS에서도 마찬가지이다.
간략한 시맨틱 웹의 역사
시맨틱 웹(Semantic Web; 의미론적 웹)은 World Wide Web의 창시자인 팀 버너스리가 1998년 제안된 기존 기존 World Wide Web의 확장이다. 시맨틱 웹의 목적은 인터넷에 존재하는 데이터를 기계 또는 봇이 더 쉽고 효율적으로 처리할 수 있도록 하는 것이다.^2
팀버너스리는 시맨틱 웹의 비전에 대해 1999년에 다음과 같이 말했다.
나는 컴퓨터들이 웹에 존재하는 모든 데이터를 (컨텐츠, 링크, 사람과 컴퓨터들 사이의 모든 전송 데이터들) 분석할수 있게 되는 것을 꿈꿉니다. 아직은 나타나지 않았지만 시맨틱 웹이 이것을 가능하게 만들 것입니다. 이를 통해 일상 속에서 일어나는 거래 매커니즘이나 행정처리와 같은 문제들이 기계들 간의 소통을 통해 다뤄질 수 있을 것입니다.
이후 약 4백만개의 웹 도메인이 시맨틱 마크업을 포함하고 있다.^3
왜 시맨틱 웹이 중요한가?
<html>
<head>
<title>시맨틱하지 않은 문서</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="header-content">헤더내용</div>
</div>
<div id="section">
섹션 컨텐츠
</div>
<div id="footer">푸터내용</div>
</div>
</body>
</html><div> 태그와 주관적인 id, class로 이뤄진 문서는 기계 또는 시각장애인이 처리하거나 이해하는데 비효율적이고 어렵다.
이는 해당 문서가 웹 서치엔진에 의해서 무시될 가능성 또한 높여서 검색 엔진 최적화 관점에서도 단점이 된다. 반면 시맨틱 태그를 통해 태그가 자기 자신을 명확히 정의하고 그러한 태그들로 문서가 이뤄진다면 웹에 존재하는 방대한 데이터가 효율적으로 구조화되어 공유되고 재사용될 수 있다.
시맨틱한 웹 작성하기
시맨틱 HTML 태그
불명확한 태그들을 교체하고 HTML5 표준에 맞는 태그를 사용하자.
아래는 HTML5 표준에서 정의하는 시맨틱 HTML 태그들 중 자주 쓰이는 일부와 그 의미이다.^4
| 태그 | 의미 |
|---|---|
<article> | 해당 웹의 다른 요소와는 독립적으로 존재할 수 있어서 외부로 배포가 가능한 요소를 구분하는 태그. e.g. 블로그 포스트, 뉴스 기사 |
<aside> | 사이드바와 같이 측면에 존재하는 컨텐츠를 포함하는 태그이다. 주변부의 컨텐츠와 간접적으로 관련된 내용을 담아야 한다. |
<figure> | 일러스트레이션이나 사진, 도표와 같은 컨텐츠를 담을 수 있다. 이미지를 담는다면 <img>태그가 이 안에 들어올 수 있다. |
<figcaption> | <figure> 안에서 해당 컨텐츠를 설명하는 내용을 담는다. |
<footer> | 문서의 하단부를 의미한다. 주로 작성자, 저작권, 연락처, 사이트맵, 사이트 상부로 가는 링크, 관련된 게시물들을 포함한다. 한 문서에 여러개 존재해도 상관 없다. |
<header> | 문서의 소개 컨텐츠나 네비게이션 링크를 포함하는 부분을 구분하는 태그이다. <header>는 주로 h1~h6 헤더 태그나 로고, 아이콘 등을 포함한다. 문서에는 헤더가 여러군데 존재할 수 있으나 다른 header 또는 footer, address 태그 안에는 넣으면 안된다. |
<main> | 문서의 메인 컨텐츠를 담는다. |
<nav> | 여러 네비게이션 링크를 포함하는 태그이다. 문서의 모든 링크가 nav 안에 묶일 필요는 없다. |
<section> | 말 그대로 어떤 문서의 특정 섹션을 의미하며 하나의 주제를 갖는 그룹으로 묶인 컨텐츠를 구분하는 태그. e.g. 서론 섹션, 본론 섹션, 연락처 정보 섹션 |
