이것의 의미는 무엇입니까?

MoonEn·2022년 12월 14일

HTML-CSS

목록 보기

3/4

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

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

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

외부와의 연계

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

내부와의 연계

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

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

주로 제목, 로고, 검색 폼등의 요소를 포함하고 있으며, 웹페이지 소개 및 탐색에 도움을 주는 콘텐츠를 나타냄.
대부분의 웹사이트 내에서는 동일한 디자인을 사용함.
예) A웹사이트의 A-1웹페이지와 A-2웹페이지의 Header는 대부분 동일함.
header내에는 header혹은 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: 의미의, 의미론적인