시맨틱 마크업

June 15, 2021

시맨틱 마크업

시맨틱 마크업이란 무엇인가?

시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말합니다.

HTML 요소는 크게 non-semantic과 semantic 요소로 구분할 수 있습니다.

다음 코드를 살펴봅시다.

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

결과

Is this a top level heading?

우리가 보기에는 큰 글자이기 때문에 제목 또는 중요한 의미라고 알 수 있지만 컴퓨터(브라우저)는 중요한 의미인지 모릅니다.

<span>태그는 의미가 없는 요소이기 때문입니다.

의미적 가치를 부여하기 위해서는 다음과 같이 작성합니다.

<h1>This is a top level heading</h1>

결과

This is a top level heading

시맨틱 마크업이라는 개념은 html5가 나오기 이전부터 있었지만 html5가 나오면서 더 쉬워졌습니다. html5에 시맨틱 요소가 많이 생겼기 때문입니다. 다음은 html5의 주요 시맨틱 태그와 그에 대한 설명입니다.

HTML5 시맨틱 태그	설명
`<header>`	소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다.
`<nav>`	문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다.
`<main>`	문서 `<body>`의 주요 콘텐츠를 나타냅니다.
`<footer>`	가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다.
`<section>`	HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.
`<article>`	문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
`<figure>`	독립적인 콘텐츠를 표현합니다.
`<figcaption>`	부모 `<figure>`요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.
`<aside>`	사이드바와 같이 주요 컨텐츠에서 살짝 분리해서 배치할때 사용됩니다.
`<details>`	“열림” 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다.
`<summary>`	“상세” 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정합니다.
`<time>`	시간의 특정 지점 또는 구간을 나타냅니다.

시맨틱 마크업을 하면 아래와 같은 이점이 있습니다.

검색 엔진은 시맨틱 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다.

시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 시맨틱 마크업을 푯말로 사용할 수 있습니다.

의미없는 <div> 의 클래스명들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다.

개발자에게 태그 안에 채워질 데이터 유형을 제안합니다.

적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영합니다.

시맨틱 마크업은 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하고, 이에의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시멘틱 웹이 실현 될 수 있습니다.