보고서를 작성한다. 팀장에게 보고를 한다. 팀장은 보고서의 한 영역을 찍더니, 이건 무슨 의미로 작성한 건지 물어온다. 나는 답을 할 수가 없었다...

만약 div태그로만 웹 페이지를 만들게 된다면, 위와 같은 상황이 발생하지 않을까 싶다. 아무 의미 없이 작성한 보고서의 한 영역처럼, 의미를 알 수 없는 영역이 될 수 있다.
반대로 요소들의 의미를 고려하여 구조를 설계하고 코드를 작성한 웹은 시맨틱(Semantic)* 웹이라고 한다. 그렇다면 시맨틱 웹은 어떤 장점이 있으며, 시맨틱 웹을 만들기 위해서는 어떤 요소들을 사용하면 되는지 알아보자.

시맨틱 웹을 사용해야하는 이유?

외부와의 연계

• 네이버, 구글과 같은 검색 엔진은 명확히 의미가 정해진 페이지의 요소를 우선 순위에 영향을 줄수 있는 요소로 중요하게 간주함.
• div와 같이 의미가 정해지지 않은 태그들을 검색하는 것 보다, 의미있는 코드들을 해석하는 것이 훨씬 쉬움.
• 스크린 리더와 같은 접근성 도구들은 의미가 있는 태그들을 푯말로 이용함.(문단 뛰어넘기, 부가적인 내용 읽지 않기 등)

내부와의 연계

• 의미가 있는 태그들과 이에 맞는 Naming은 협업하는 개발자들에게 해당 태그 내에 채워질 기본적인 내용을 알려줌.

Header와 Footer

Heder와 Footer는 사람의 머리와 발처럼, 주로 웹페이지의 상단과 하단의 정보를 담고 있다.

- Header

• 주로 제목, 로고, 검색 폼등의 요소를 포함하고 있으며, 웹페이지 소개 및 탐색에 도움을 주는 콘텐츠를 나타냄.
• 대부분의 웹사이트 내에서는 동일한 디자인을 사용함.
  예) A웹사이트의 A-1웹페이지와 A-2웹페이지의 Header는 대부분 동일함.
• header내에는 header혹은 footer를 자식 요소로 넣을 수 없음.

- Footer

• 웹페이지의 정보나 연관된 웹사이트, 연락처, 저작권 등의 정보를 담고 있음.
• header와 동일하게 같은 사이트 내에서는 대부분 동일한 디자인을 사용함.
• footer내에 header나 footer를 자식 요소로 넣을 수 없음.

MDN 사이트 예시로 윗 부분(빨강)이 header이고, 아랫부분(파랑)이 footer이다.

nav

nav는 Navigation의 줄임말로, 사용자에게 현재 어느 위치에 있는지 알려주는 역할을 한다.

• 사용자에게 현재 페이지의 위치, 다른 페이지로의 링크를 보여주는 역할을 함.
• 주로 목록 태그를 이용하여서 작성함.
  

MDN 문서에서 아래 항목(빨강)이 nav이다.

aside

aside는 주로 side 바에 들어가는 내용을 주로 작성한다.

• 본문의 내용과는 직접적인 관련은 없고, 간접적으로 관련이 있는 내용을 의미함.

앞서 nav에서 표시한 사이드 바도 aside태그 내에 nav태그를 넣은 구조이다.

main

main은 본문을 구성하는 태그이다.

• 문서의 주요 컨텐츠를 나타내며, 웹 페이지에서 1개만 사용할 수 있음.
• main태그를 여러 번 사용한다면, 보여지는 1개의 main태그를 제외한 나머지는 hidden으로 숨겨야함.
• 주의할 점으로는 Internet Explorer(RIP)에서는 동작하지 않는다는 점이 있음. 혹시나 IE에서 사용하는 경우에는 <main role="main">이라고 작성해야 함.

article과 Section

article과 section은 비슷하지만 다른 점이 있다.

- article

• article은 하나의 태그 속의 내용이 완결되어서, 독립적으로 구분해서 배포하거나 재사용할 수 있음.(신문의 기사 스크랩을 생각하면 쉽다.)
• article은 자체가 독립적인 컨텐츠이기 때문에 내부에 header와 footer를 가질수 있음.
• article을 구분하기 위해서 h태그를 제목으로 많이 사용함.

= section

• section은 article이 될 수 없는 영역에 사용함. 즉, 독립적인 컨텐츠가 될 수 없다면 section을 사용함.
• 단, 디자인을 위한 일반 컨테이너를 쓰려면 div 태그를 사용하는 것이 좋음.

article은 내부에 여러 section을 가질 수 있으며, section내에 여러 article들이 있을 수도 있다.

마무리

시맨틱 웹을 알아보았다. 아니 시맨틱 웹을 만들 수 있는 방법을 알아보았다. 단순히 태그들을 안다고 해서 시맨틱 웹을 만들 수 있는 것이 아니다. 구성하는 태그들이 어떤 역할을 하고, 내가 넣으려는 요소가 어떤 태그로 써야하는지 많은 생각과 고민이 필요하다. 지금은 div태그로 모든 것을 만들고 있지만, 시맨틱 웹을 만들기 위해서는 오늘 소개한 태그들을 열심히 또 열심히 써야한다. 오늘도 더 나은 웹을 만들기 위해 시맨틱 태그들로 연습을 해보련다!

*Sementic: 의미의, 의미론적인