시맨틱 HTML

시맨틱 HTML, 또는 시맨틱 태그(tag). 영단어 semantic에는 '의미론적'이라는 뜻이 있어 의미론적 HTML, 의미론적 태그, 의미론적 마크업 등으로 쓰는 사람들도 있다. 이 개념이 등장하기 전에는 대체로 <div> 태그를 사용하여 페이지의 구획을 나누고 여기에 id 속성을 추가하여 구획의 역할을 파악하게 했다.

페이지의 모든 구획을 <div>로 나눈다면, HTML 코드를 읽는 사람들에게도, 스크린 리더나 검색 엔진과 같은 컴퓨터에도 페이지를 읽는 데에 부담이 될 것이다. 따라서 페이지의 구조에 해당하는 태그들이 존재한다면 HTML 소스를 이해하기 편할 것이라는 것이 HTML5에서 시맨틱 태그의 등장 배경이다. 태그에 한정한다면 이렇고, 이보다 넓은 범위에서 시맨틱 웹은 앞서 말한 스크린 리더나 검색 엔진처럼 컴퓨터가 해석할 수 있는 의미 정보를 페이지에 담는 것에 중심적인 뜻이 있어 보인다. W3C는 시맨틱 웹을 통해 문서의 웹(web of documents)에서 데이터의 웹(web of data)으로 전환한다고 설명한다.

시맨틱 HTML에 사용하는 주요 태그들은 다음과 같은 것들이 있다.

  • <header>: 페이지의 머리말 영역을 나타낸다.
  • <nav>: 사이트 안팎의 페이지로 연결하는 내비게이션 영역을 나타낸다.
  • <main>: 페이지의 중심적인 내용임을 나타낸다.
  • <section>: 페이지의 한 섹션을 나타낸다.
  • <article>: 하나의 본문을 나타낸다. 하나의 <section> 안에 여러 <article>이 존재할 수 있다.
  • <details>: 부가적인 정보들을 나타낼 때 사용하며, 사용자가 펼쳐 보거나 접어 놓을 수 있도록 렌더링된다. 이 태그는 인터넷 익스플로러에서는 지원되지 않는다.
  • <summary>: <details>의 제목처럼 사용할 수 있다. 사용자가 <details>를 접어 놓으면 <summary>의 내용만 화면에 표시된다. 이 태그는 인터넷 익스플로러에서는 지원되지 않는다.
  • <figure>: 그림이나 사진, 도표 등 이미지나 코드와 같은 것을 추가할 때 사용한다.
  • <figcaption>: <figure>에 캡션을 달 때 사용한다.
  • <aside>: 페이지에서 본문 이외의 부가적인 것들을 나타낸다.
  • <footer>: 페이지의 꼬리말 영역을 나타낸다.
  • <mark>: 강조된 글자를 나타낸다.
  • <time>: 날짜와 시간을 나타낸다.

아래는 같은 문서 구조를 과거 <div>를 사용하는 마크업과 시맨틱 마크업으로 각각 작성한 것이다.

...
<div id="header">
  ...
</div>

<div id="content">
  ...
  <div>
    <span>2018-08-29 17:00</span>
    ... <em>강조된 텍스트</em> ...
  </div>
  ...
</div>

<div id="footer">
  ...
</div>
...
...
<header>
  ...
<header>

<main>
  ...
  <article>
    <time>2018-08-29 17:00</time>
    ... <mark>강조된 텍스트</mark> ...
  </article>
  ...
<main>

<footer>
  ...
<footer>
...

results matching ""

    No results matching ""