Semantic Markup에 대해 알아보자

🙄 Semantic Markup?

의미를 그대로 직역하자면 의미론적인 마크업이 되겠다.
일반적인 시각에서 보면 이상하다. div, span, table, b 등등 모두 다 각자의 의미가 있는 게 아닌가!

물론 사람의 시각에서 보면 각각의 특징이 있고 의미가 있다. 그러나...

우리의 컴퓨터는 정보의 의미의 중요도를 알 수가 없는 노릇이다!

가령 다음 코드를 살펴 보자.

<span style="font-size: 32px; margin: 21px 0;">
	Is this a top level heading?
</span>

결과는 다음과 같다.

Is this a top level heading?

분명 우리에게는 큰 글자이기에 "중요한 의미구나!"라고 알 수 있다.
그러나 컴퓨터는 중요한 의미인지 모른다. 아니, 컴퓨터가 몰라서 다행이다.

만약 이것이 의미가 있었다면, 이 세상 웹 페이지들은 검색 우선순위를 차지하기 위해 돋보기가 필요 없을 정도로 글자가 커졌을테니까.

다르게 말하자면, 검색엔진은 기존 요소만으로는 중요한 의미를 모르기 때문에 검색 순위를 최적화하기 어려워지고, 사용자는 원하는 정보를 제때 찾을 수 없기에 불편함이 발생한다.

따라서, html5에서는 어떤 정보의 중요도를 담을 수 있는 Markup을 고안해냈는데, 이것이 바로 Semantic Markup이다.
시멘틱 마크업을 고려한 페이지는 다음과 같은 3가지 효과를 얻는다.

• SEO에 최적화되어 검색 노출에 유리
• 웹 접근성이 향상되며, 시각 장애를 가진 사용자에게 더욱 의미를 잘 전달 가능
• 구조를 읽는 데 있어 의미를 부여하므로 가독성

참고.
검색 엔진 최적화는 각 검색 엔진마다 기준이 다르지만,
대부분이 다음 3가지 요소를 중점으로 검색 우선순위를 정한다. 출처

1. 기술적 (semantic)
2. 콘텐츠 작성 (text / image)
3. 인기도 (많은 사람들이 링크를 타고 올 시)

결국 1이 기본이 되어야 → 2번의 중요도를 담아내고 3번이 증가한다.
고로 semantic markup은 SEO 최적화를 위해 필수불가결한 조건인 것이다.

💬 본론

대부분의 웹 사이트에서의 핵심 semantic markup은 다음과 같다.

• main
  문서의 핵심 주제 / 핵심 기능을 담당·확장하는 콘텐츠

• header
  제목, 로고, 검색 폼, 작성자 이름 등 도입부에 해당하는 콘텐츠

• nav
  현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획

• section
  더 적합한 의미 요소로 나눌 수 없는 독립적인 구획.

• article
  사이트 안에서 독립적으로 구분해 배포, 재사용할 수 있는 구획.
  작성자 정보는 address요소에 담을 수 있다.
  article은 중첩이 가능하다. (ex: 블로그 글 - 해당 글의 댓글)
  다만 중첩할 시, 중첩된 article은 address요소를 담을 수 없다.

  여기서 section과 article은 약간의 의미 차이가 있다.
  한 블로그 저자의 말에 따르면, section은 일종의 목차 인식 기능을 담당하는 컨테이너 역할로서 고안되었는데, 결과적으로 웹 브라우저는 본 기능을 인식하지 못하기에, 웹사이트의 각 콘텐츠의 독립적 의미를 담기 위해 article을 추천하고 있다.
  
  정리:
  포괄적인 컨테이너의 의미는 section,
  독립적 콘텐츠의 의미는 article

• aside
  주요 내용과 간접적으로만 연관된 부분

• footer
  가장 가까운 구획 콘텐츠나 구획 루트의 푸터
  구획의 작성자, 저작권 정보, 관련 문서 등

• detail & summary

  detail
  "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯
  summary
  공개 상자에 대한 요약, 캡션 또는 범례를 지정

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

• figure & figcaption

  figure
  주 문서 플로우가 참조하지만,
  다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각
  figcaption
  figure 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

• mark
  현재 내용 중 중요하여 하이라이트할 부분

<mark>예시</mark>

위의 결과: 예시

• time

1. 시간의 특정 지점 또는 구간을 나타냄.
2. (24시간 시계법 / 그레고리력 / 다음과 같은 시간 범위
3. datetime attribute를 통해 적절한 검색 결과 / 알림 등의 기능을 구현
4. IE에서는 지원 X
5. 형식을 맞춰줘야 하는데, 매우 다양하니 형식은 이 페이지에서 참고하자.

📃 참고하면 좋은 자료

참고 1. W3CSchools - html5_semantic_elements
참고 2. MDN - Semantics
참고 3. MDN - 콘텐츠 카테고리