HTML의 구절 태그 6가지

이 포스트에서는 HTML의 6가지 구절 태그에 대한 내용을 다룹니다.

HTML에서 쓸 수 있는 구절 태그는 어떤 구절 내에서 해당 태그로 감싼 내용에 어떤 효과를 주면서 그 의미를 분명히 하는 데 쓰입니다. HTML5에서 추가된 <mark> 태그도 같은 이유로 추가되었습니다. HTML5 전부터 쓰여 지금도 표준으로 쓰이는 6가지 구절 태그들은 다음과 같습니다.

<em>

글에서 중요한 부분을 표시합니다. 기본적으로 이탤릭체(기울어진 글씨)로 표현됩니다. 가급적이면 <i> 태그보다는 이 태그를 사용하는 것이 좋습니다.

<strong>

앞의 <em>과 같은 기능으로 특히 매우 강하게 강조할 때 씁니다. 기본적으로 볼드체(굵은 글씨)로 표현됩니다. 표현되는 형태는 <b> 태그와 같지만 의미상 <b>보다는 더 강한 강조를 나타냅니다.

<code>

컴퓨터 코드 내용을 나타낼 때 씁니다. 기본적으로 모노스페이스(고정폭 글꼴)로 표현됩니다.

<samp>

컴퓨터로부터 출력되는 내용을 나타낼 때 씁니다. 앞의 <code>처럼 기본적으로 모노스페이스로 표현됩니다.

<kbd>

키보드로 입력하는 내용을 나타낼 때 씁니다. 이 태그도 기본적으로 모노스페이스로 표현됩니다.

<var>

변수를 나타낼 때 씁니다. 앞의 세 태그들과는 다르게 이 태그는 기본적으로 이탤릭체로 표현됩니다.

예를 들면 다음과 같습니다.

<em>강조된 텍스트</em><br />
<strong>매우 강조된 텍스트</strong><br />
<code>console.log('Hello, world!');</code><br />
<samp>Hello, world!</samp><br />
<kbd>F12</kbd><br />
<var>Variables</var>

이는 다음과 같이 표시될 것입니다.

이렇게 그 의미에 맞게 특별한 효과로 표현됩니다.

다만, 효과가 언제나 이 예제에서 보이는 효과로 고정된 것은 아닙니다. CSS를 지정해서 다른 효과를 줄 수도 있습니다. 예를 들면 <strong> 태그가 <b> 태그보다 더 굵게(font-weight: 900;) 표시되게 한다거나 <kbd> 태그에 다른 색을 입힌다거나 하는 식으로 표현하는 것도 가능합니다.