Small Log
[1] 시멘틱 태그들 정리
  1. 개발

[1] 시멘틱 태그들 정리

2022, April 16

태그들에 대한 설명은 HTML Standard에서 참고하여 작성합니다.

sections

html 페이지를 구분(sectioning)하는 태그들이다. 이 태그들을 적극 활용하면 효율적으로 사이트의 정보를 파악할 수 있어 SEO 최적화에 이점이 있고, 웹접근성을 준수할 수 있도록 도움을 준다. 의미있는 태그를 사용하면 스크린리더기가 그에 맞는 설명을 읽어주기 때문이다. (섹션 태그는 아니지만 하나의 예시를 들자면, ul 태그를 사용한 경우 해당 태그의 의미에 맞는 “목록, n(li의 수)개의 항목”이라는 설명이 나온다. 헤딩 태그의 경우 “머릿말”이라는 설명을 해준다.)

article vs section

(필수는 아니지만 보통)두 태그 모두 헤딩 요소를 포함한다.

article

article은 게시물, 잡지나 신문 기사, 블로그 항목, 작성된 댓글과 같이 그 자체로 독립적이고 완전한 컨텐츠임을 의미하며 해당 아티클만을 독립적으로 배포하거나 재사용할 수 있다. RSS처럼 사이트의 내부 정보를 외부로 발행할 때 article을 사용하면 적절하다. 만약 article안에 article이 있는 경우에는 내부 article은 외부 article과 관련이 있다는 것을 의미하게 된다.

section

section은 어떠한 맥락에서 주제별로 컨텐츠를 그룹핑/구분함을 의미한다. 여기에는 “보통” 헤딩 요소가 포함된다. section 태그는 해당 태그의 내용이 문서의 맥락 or 흐름과 연관이 있을 경우 사용하는 것이 적절하다. 단순히 구획을 나누기 위해 사용하는 것은 적절하지 않다.

  • 만약 해당 요소를 단독으로, 따로 발행해야 한다면 article을 사용하는 것이 바람직할 수 있다.
  • 만약 단순히 스타일 & 스크립팅의 편의를 위해 어떤 요소가 필요하다면 div를 사용하는 것이 좋다.

hgroup

hgroup은 섹션의 헤딩을 나타내며, h1 ~ h6 요소를 자식으로 구성된다. 주로 여러 레벨의 헤딩이 있는 경우: 소제목, 대체 제목, 태그라인(?)에 사용된다. 여기서 여러 레벨이란 hgroup 내에 다른 레벨의 헤딩 태그가 동시에 있는 경우를 의미하며, 비교적 낮은 레벨의 헤딩 태그는 소제목, 혹은 대체 제목을 나타내게 된다. 아래의 경우 h2가 h1의 소제목이 된다.

    <hgroup>
     <h1>The reality dysfunction</h1>
     <h2>Space is not the only void</h2>
    </hgroup>

hgroup을 사용함으로써 소제목인 h2가 별도의 분리된 섹션을 생성하지 않도록 막고(혹은 완전히 다른 섹션의 제목으로 보이는 것을 막고), 단지 주제목의 보조 제목임을 나타낼 수 있다. 위의 코드는 아래와 같은 의미가 된다.

The reality dysfunction: Space is not the only void 혹은 The reality dysfunction (Space is not the only void)

hgroup안에는 동일한 레벨의 헤딩 태그가 들어갈 수도 있다.

    <hgroup>
     <h1>The Avengers</h1>
     <h1>어벤져스</h1>
    </hgroup>

위의 경우, 동일한 레벨의 헤딩 태그이지만 첫번째로 작성한 h1가 주제목으로, 두번째로 작성한 h1태그가 소제목이 된다. 위의 두 예제에서 가장 중요하게 알아야 할 점은 hgroup으로 헤딩 태그를 묶었을 때 두 개의 타이틀이 동등한 레벨이 아니게 된다는 것이다. 같은 레벨의 헤딩 태그일지라도 hgroup 안에서는 주-보조라는 위계가 생성된다.

Grouping Content

menu

(지원율이 떨어지는 태그이므로 참고만하자. 그래도 이제는 많은 브라우저가 지원하는 듯)

menu는 ul과 같이 순서가 정해져 있지 않은 항목의 목록을 나타내며 내부에 클릭 가능한 버튼을 포함하고 있어야한다. 자식 요소는 li 태그이다.

    <menu>
      <li><button type="button">menu item1</button></li>
      <li><button type="button">menu item2</button></li>
      <li><button type="button">menu item3</button></li>
    </menu>

main

html 페이지에서 가장 중요한, 핵심이 되는 요소를 표현하고자 할 때 사용한다. 오직 하나의 main 태그만 활성화 되어야 하므로 여러개의 main을 사용하고자 한다면 hidden 속성으로 상황에 맞는 main태그만을 활성화하는 방법을 이용하면 된다.

<main>
  <h1>HOME</h1>
</main>

<!-- about 메뉴 선택시 활성화 -->
<main hidden>
  <h1>About</h1>
</main>

Text-level semantics

문서 내에서 텍스트로 취급되는 요소들이다.

a

모두가 아는 하이퍼링크 속성을 가지고 있는 앵커 태그이다. 여기서 개인적으로 중요하다고 생각하는 점은 href속성이 있는 경우에만 a태그가 활성화 된다는 것이다. a태그는 많이 사용되는만큼 접근성 측면에서 이슈가 발생할 수 있는데, 이 부분에 대해서는 나중에 정리를 해보겠다.

em, strong

둘 다 텍스트 내에서 어떤 부분을 강조하고 싶을 때 사용한다. 다만 em은 좀 더 보편적인, 일반적인 강조를, strong은 강력한 경고 혹은 주의 사항, 다른 컨텐츠보다 먼저 봐야하는 긴급한 요소를 나타낸다.

  • 만약 강조의 의미가 없는 단순한 스타일링을 위해 문자를 기울이거나 굵은 글씨로 변경하고 싶다면 i태그와 b태그를 사용하자.

small

페이지 내부에서 부수적인 내용을 표시할 때 사용한다. 면책 조항, 주의 사항, 법적 제한 사항 또는 저작권 등이 해당된다. 부수적인 내용이 아닌 페이지의 주요 내용을 small로 표현하는 것은 적합하지 않으며, 당연히 주제목의 소제목을 나타낼 때에는 사용해서는 안된다. small태그는 어떤 요소의 중요도롤 감소해주는 역할을 하지 않는다. strong이나 em태그 안에 small태그를 사용한다고 해도 강조 태그의 중요도는 그대로 유지된다.

q, cite

둘다 인용글과 관련이 있다.

cite

cite는 인용문의 출처인 원본(혹은)의 제목을 의미한다. 책, 종이, 수필, 시, 악보, 노래, 대본, 영화, TV 쇼, 게임, 조각, 회화, 연극, 연극, 오페라, 뮤지컬, 전시회, 소송사건 보고서, 컴퓨터 프로그램 등.. 전부를 포함할 수 있다. 주의해야할 점은 사람의 이름은 작품이 아니므로 사람을 cite태그로 표시해서는 안된다는 것과 cite가 인용문 그 자체로 사용할 수 없다는 점이다. 아래의 예시를 보자.

<!-- 이것은 부적절한 예시이다. -->
<p><cite>This is wrong!</cite>, said Ian.</p>
<!-- 만약 사람의 이름을 강조하고 싶다면 b나 span 태그를 활용할 수 있다. -->
<p>And then <b>Ian</b> said <q>this might be right, in a
gossip column, maybe!</q>.</p>

q

q태그는 해당 구문이 다른 곳에서 인용해온 것임을 의미한다. 반드시 q태그를 사용해서 인용글임을 나타낼 필요는 없으며 일반적으로 글을 작성할 때 처럼 쌍따옴표("")를 사용해도 무방하다. 다만 q의 목적, 의미와 상관없는 상황-비꼬기 위해 쌍따옴표를 사용-에서의 q태그 사용은 부적절하다. 아래와 같이 cite속성을 사용할 수 있다.

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="https://www.w3.org/Consortium/">To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web</q>. I
disagree with this mission.</p>

blockqoute와 다른 점은 blockqoute는 섹션 요소이고 q는 표현(phrasing content) 요소라는 것이다.

dfn, abbr

사용빈도는 낮다. dfn은 definition의 약자로 어떤 용어를 정의할 때, abbr은 abbreviation의 약자로 어떤 축약어를 설명하고자 할 때 사용한다. 둘은 같이 쓸 수 있고, 각각 따로 쓸 수 있다.

<!-- abbr를 단독으로 사용한 경우 -->
<p>The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
started working on HTML5 in 2004.</p>

<!-- dfn와 abbr를 함께 사용한 경우 -->
<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>

Lee KR
Front-End Developer