HTML 텍스트 태그

목차

들어가면서

HTML의 주요 작업 중 하나는 브라우저가 텍스트를 올바르게 표시할 수 있도록 돕는 것이다. 텍스트가 없는 페이지는 거의 없으니까(특히 HTML이 처음 나오던 시절에는 더욱 그랬다).

따라서 제목 및 단락을 추가하고, 목록을 만드는 등 페이지 내부의 텍스트를 나타내는 데에 쓰이는 태그들 중 기본적인 것을 알아보자.

1. 텍스트 콘텐츠

텍스트 콘텐츠 태그를 통해서 <body>내부의 콘텐츠 구획을 정리하며 콘텐츠 구획의 목적이나 구조 판별에 사용한다. 접근성과 SEO에 중요하다.

<blockquote>, <dl>, <dt>, <dd>, <div>, <figcaption>, <figure>, <hr>, <li>, <menu>, <ol>, <p>, <pre>, <ul> 태그를 포함한다.

1.1. blockquote

blockquote 요소는 블록 레벨 컨텐츠가 인용된 것을 나타낸다. 별도의 블록이 필요하지 않은 짧은 인용문은 이후에 인라인 텍스트 시맨틱에서 다룰 <q>태그를 사용하자.

blockquote 태그의 cite 속성을 사용하면 인용의 출처도 나타낼 수 있다. <cite>태그를 이용하면 출처 텍스트도 제공할 수 있다.

<blockquote cite="https://www.naver.com/">네이버에서 인용한 무언가</blockquote>

주로 들여쓰기된 단락으로 나타낸다.

그리고 blockquote, q 태그의 cite 속성은 페이지에 표시되지 않는다. 이런 인용 출처를 화면에 나타나게 하고 싶다면 역시 이후에 다룰 <cite> 태그를 사용하면 된다.

1.2. dl, dt, dd

목록을 표시하는 ul, ol 태그와 비슷하게 이 태그들을 이용하면 설명 목록을 만들 수 있다. 각 항목과 각 항목에 관련된 설명을 표시하는 것이다. HTML을 잘 쓰는 것에 대해 소개한 글에서도 유용한 태그로 이 태그를 예시로 들고 있다.

<dl> 태그는 <dt>, <dd> 태그를 포함하는 리스트를 만든다. <dt>(description term)는 각 항목을 나타내고 <dd>(description definition)는 항목에 대한 설명을 나타낸다. 용어 사전 구현이나 질문-답변 등 키-값 쌍 목록으로 된 메타데이터 표시에 사용한다.

<dl>
  <dt>HTML</dt>
  <dd>웹페이지를 구조화하는 데에 사용된다.</dd>
  <dt>CSS</dt>
  <dd>웹페이지의 스타일링에 사용된다.</dd>
  <dt>JavaScript</dt>
  <dd>웹페이지를 동적으로 구성하도록 해준다.</dd>
</dl>

<dt>는 용어, 질문, 또는 제목을 나타내고 <dd>는 정의나 답변을 나타낼 수 있다. 참고로 <dt>, <dd> 그룹을 <div>로 감쌀 수도 있다. 스타일링 등에 유용하다.

<dl>
  <div class="some-class">
    <dt>HTML</dt>
    <dd>웹페이지를 구조화하는 데에 사용된다.</dd>
  </div>
</dl>

브라우저에서 제공하는 기본 스타일에 의해서 하위 항목 들여쓰기가 적용된다. 물론 들여쓰기를 목적으로 이 요소를 사용하는 건 좋지 않다.

그리고 dt,dd는 일대일이 아니고 하나의 dt에 여러 dd가 붙어 있을 수 있다.

<dl>
  <dt>마녀</dt>
  <dd>제가 쓰는 닉네임입니다.</dd>
  <dd>원래 이렇게 강력한 컨셉은 아니었습니다.</dd>
  <dd>별 생각 없이 닉네임을 마녀공장으로 지었는데, 다들 마녀라고 불러서 마녀가 되었습니다.</dd>
</dl>

1.3. div

div는 블록 레벨의 의미없는 요소를 제공하는 컨테이너이다. 페이지의 주요 콘텐츠와 관련이 없을 수도 있다.

다른 요소들과 달리 div는 어떤 의미도 가지지 않는다. 그래서 div를 사용할 때는 <article>등의 의미를 가지는 요소를 사용할 수 없는지 고민해보고, 정 사용할 수 없다면 div를 사용해야 한다.

1.4. figure, figcaption

figure 요소는 독립적인 콘텐츠를 표현하며 내부에 figcaption 요소를 사용해 설명을 붙일 수 있다. 다음 코드에서는 이미지에 캡션을 다는 역할을 수행한다.

<figure>
  <img src="assets/profile.jpg">
  <figcaption>내 프로필 사진</figcaption>
</figure>

물론 같은 형태의 디자인을 div, img, p 태그를 이용해서 구현할 수도 있지만 위처럼 하면 특정 이미지에 캡션을 연결해 준다는 의미를 브라우저에 전달할 수 있다.

이때 figure 태그내의 요소가 꼭 이미지일 필요는 없다. 동영상이나 표, 코드 등이 올 수 있다.

1.5 hr

hr 태그는 문단의 분리나 테마의 전환 등 문단 레벨 요소들의 구분을 위해 사용된다. 브라우저에서는 수평선으로 그려진다.

단 주제의 분리라는 의미를 가진 요소이므로 단순한 수평선을 그리려는 목적이라면 CSS를 사용하자.

빈 요소이므로 닫는 태그가 있으면 안 된다.

1.6. ul, ol, li

ul 요소는 unordered list로 순서 없는 목록을 나타내고 ol 요소는 ordered list로 순서 있는 목록을 나타낸다. 블록 태그이다.

두 태그 안에는 li 요소가 존재하는데 이는 list item으로 목록의 항목을 나타낸다. li 요소는 반드시 ul, ol, menu 태그 내부에 위치해야 한다.

<ul>
  <li>사과</li>
  <li>배</li>
  <li>딸기</li>
</ul>
 
<ol>
오늘 할 일
  <li>HTML 공부</li>
  <li>CSS 공부</li>
  <li>JS 공부</li>
</ol>

ul, ol의 차이라면 ol은 순서가 중요하다는 점이다. 항목에 순서가 있다면 ol을 사용해야 한다.

순서가 있는 목록답게 ol은 목록의 순서 역전 여부를 나타내는 reversed, 항목의 순서 시작점을 나타내는 start 속성을 가진다. 또한 항목의 순서 카운터 스타일을 지정하는 type 속성을 가진다.

물론 목록 태그들 간에 중첩도 가능하다.

1.7. menu

menu 태그는 사용자가 수행할 수 있는 명령 묶음을 말한다. 메뉴 이름을 뜻하는 label과 메뉴의 종류를 나타내는 type 속성을 가진다.

그런데 내부에 쓰이는 menuitem 태그는 deprecated되었고, menu 태그 자체도 실험적인 기술이므로 현재 기준으로는 넘어가도 될 듯 하다.

menu 태그 MDN 문서 링크

1.8. p

하나의 문단을 나타내는 블록 요소이다. 해당 태그를 이용해 컨텐츠를 문단 단위로 나누면 페이지의 접근성을 높인다. 아주 예전에는 ¶(필크로)특수문자를 사용해서 문단을 구분했지만 이제는 p 태그를 사용한다.

브라우저에서는 기본적으로 한 줄의 간격으로 분리하며 다른 스타일은 CSS를 사용해서 지정한다. 앞서 보았던 다른 태그들처럼, 문단 사이 여백 추가를 위해 p 태그를 사용하면 안된다.

<p>첫 번째 문단</p>
<p>두 번째 문단</p>

1.9. pre

미리 서식을 지정한 텍스트를 나타내며 문서에 작성한 내용 그대로를 표현한다. 요소 내 공백 문자도 그대로 유지한다.

일반적으로 HTML에서 공백을 여러 개 반복해 사용하면 파서가 하나의 공백으로 줄여 버리지만 pre 태그를 사용하면 pre 태그 내부 내용에서는 공백을 그대로 유지한다는 것이다. 따라서 아스키 아트 등을 표현할 때 사용할 수 있다.

접근성을 고려하면 pre요소에 대한 대체 설명을 지정해야 한다. figure, figcaption, id, aria-labelledby 등을 사용할 수 있다.

<figure role="textbox" aria-labelledby="my-code">
  <pre>
    <code>
      function sayHello() {
        console.log('Hello, World!');
      }
    </code>
  </pre>
  <figcaption id="my-code">
    Hello, World!를 출력하는 함수를 Javascript로 작성한 코드
  </figcaption>
</figure>

2. 인라인 텍스트 시맨틱

인라인 텍스트의 구조나 스타일을 정의한다. 종류가 엄청나게 많은데, <a>, <br>, <cite>, <code>, <q>, <small>, <span>, <strong>, <time>, <sup> 등이 있다. 꽤 자주 쓰이는 것만 여기 정리한다.

모든 인라인 텍스트 시맨틱 태그가 큰 의미를 가지고 있는 건 아니다. <b>처럼 특별한 중요도 부여는 없고 CSS가 지원되지 않는 브라우저에서의 기본적인 텍스트 스타일링과 약간의 의미 구분을 위해서 사용되는 태그들도 있다.

2.1. a

a 태그는 anchor로 다른 페이지 혹은 같은 페이지의 특정 위치, 파일 등 어떤 URL로의 하이퍼링크를 나타낸다. href(hypertext reference의 약자) 특성을 통해 링크의 목적지를 지정할 수 있다.

<a href="https://www.google.com">구글</a>

위의 a태그 내에 구글이라고 작성했듯이, a태그 내의 콘텐츠는 접근성을 위해 링크 목적지의 설명을 나타내야 한다.

그리고 target="_blank"로 새 창을 열거나 다운로드를 시작하는 링크의 경우 링크 클릭시 발생하는 일을 링크 텍스트에 명시해야 한다.

<a href="https://www.google.com" target="_blank">구글(새 탭에서 열림)</a>

그리고 a 태그 내에 이미지 등을 넣어 링크의 행동을 나타낼 땐 alt 텍스트를 꼭 지정하자.

a태그에 관련해서는 자세한 설명 글을 따로 작성하였다.

2.2. br

텍스트 안에서 끊고 싶은 지점에 삽입하여 줄바꿈을 지정한다. 단 줄바꿈을 삽입하는 요소일 뿐이므로 문단 구분을 <br>요소로 하지는 말자.

문단 구분에는 <p>태그를 사용하는 게 좋고 여백을 두는 데에는 margin CSS를 쓰는 게 좋다.

2.3. cite

<blockquote>와 같은 인용문의 cite속성은 유용해 보이지만 브라우저와 대부분의 스크린 리더는 cite 속성을 기본적으로 인식하지 않는다. 따로 CSS나 JS를 이용하지 않는 이상 사용자가 cite속성을 볼 수 있는 방법이 없다는 뜻이다.

그래서 cite 속성을 제대로 표시하고 싶을 때는 <cite>태그를 사용하는 게 좋다. <cite> 태그는 출처 표기에 사용하며 인용 출처의 제목을 포함해야 한다. 책, 논문, 악보, 게임 등 다양한 저작물을 출처로 포함할 수 있다.

<blockquote>나 <q>태그와 함께 사용하면 인용문의 출처를 나타낼 수 있다.

일반적인 브라우저는 이 태그 콘텐츠를 기울임꼴로 표기한다.

<p>
  현재 이 글의 내용 중 일부는 
  <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">
    <cite>MDN의 텍스트 고급 기법 문서</cite>
  </a>
  에서 가져왔다.
</p>

2.4. abbr

abbr 태그는 abbreviation의 약자로 약어를 나타낸다. 처음 등장할 때 용어의 전체 내용을 제공하고 그 뒤에 약어를 나타내기 위한 <abbr>태그를 제공하는 식으로 쓰인다. 이렇게 하면 사용자에게 약어가 원래 무슨 뜻인지 단서를 제공할 수 있다.

만약 약어의 전체 내용을 표시하는 게 그렇게 필요하지 않다면 그냥 title 특성을 통해 약어의 전체 내용을 제공할 수 있다. title 속성은 다른 내용을 포함하면 안된다.

<abbr title="HyperText Markup Language">HTML</abbr>

HTML의 이전 버전에 있었던 acronym 태그도 abbr 태그와 같은 기능을 한다. 하지만 abbr이 약어와 두문자어를 동시에 지원하도록 바뀌면서 acronym은 deprecated되었다. 따라서 acronym을 사용하지 말고 abbr을 사용하도록 하자.

2.5. sup, sub

<sub>는 아래 첨자로 나타낼 인라인 텍스트를 지정한다. 기존의 관례상 아래 첨자로 나타나는 각주, 수학 변수의 숫자표기, 화학식 원소를 나타낼 때 등에 쓴다.

<sup>는 위 첨자로 나타낼 인라인 텍스트를 지정한다. 지수 표기, 4th와 같은 서수 표기 등에 사용한다.

2.6. em, strong

페이지 내부에서 어떤 문장이나 내용을 강조하거나 중요하게 표시해야 할 때가 있다. 이를 위한 인라인 요소들이 존재한다.

em 태그는 emphasis의 약자로 텍스트의 강조를 나타내고 기본 스타일은 이탤릭체다. 단 단순히 기울임꼴이 필요해서 이 태그들를 쓰면 안된다. 그럴 땐 CSS를 써야 한다.

<p>HTML은 <em>텍스트</em>를 올바르게 표시할 수 있도록 설계되었다.</p>

이렇게 em태그를 쓰거나 비슷한 의도의 strong 태그를 쓰면 스크린 리더에서도 다른 톤의 목소리로 표현된다.

반면 strong은 전체 문서에서 중대하거나 긴급한 콘텐츠, 혹은 주변 콘텐츠와 비교해서 매우 중요한 부분을 나타낸다. 경고 혹은 페이지의 텍스트에 대한 노트를 나타낼 수 있다. 보통은 브라우저에서 굵은 글씨로 표시된다.

<strong>절대</strong> 늦으면 안 된다.

단 단순히 굵은 글씨체를 위해서만 사용하면 안 된다. 장식의 의미로 굵은 글씨를 쓰고 싶다면 CSS를 사용하자. 그리고 중요의 의미 없이 그저 주의를 집중시키고 싶을 뿐이라면 b 태그를 사용하자.

그런데 <em>도 강조하는 태그 아닌가? 라고 생각할 수 있다. 그러나 <em>은 강조를 위한 태그이고 <strong>은 중요성을 나타내는 태그이다.

<em>은 말할 때 특정 부분에 강조하는 세를 넣는 것과 같다. '난 네가 좋아'라고 하는 것과 '난 네가 좋아'에서 어디에 강세를 넣는지에 따라서 의미가 달라진다. 하지만 <strong>은 문장 자체에 중요성을 주입할 때 사용한다. '경고! 위험한 물질임' 같은 느낌이다.

2.6.1. b, i, u

em과 비슷하게 이탤릭체를 만드는 태그로 i 태그가 있다. 또한 각각 굵은 글씨와 밑줄을 나타내는 b,u 태그도 있다. 이 요소들은 CSS가 제대로 지원되지 않을 때 사용할 수 있도록 고안되었다.

이렇게 표현에만 영향을 주는 요소들은 CSS가 아주 대중적이 된 지금 사용할 이유가 딱히 없다. 하지만 HTML5에서는 이 태그들에 새로운 의미론적 역할을 부여하였다.

HTML5에서는 이 태그들을 이전부터 굵은 글씨 혹은 이탤릭체, 밑줄로 표현하여 구분하던 의미를 전달하기 위해 사용하도록 했다.

예를 들어서 기술 용어나 외국어는 원래부터 이탤릭체로 표기하곤 했으므로 i 태그를 쓰는 것이다. 잘못된 철자 등은 밑줄로 나타내곤 했으므로 u 태그를 쓰고 말이다.(단 일반적으로 사람들을 밑줄을 하이퍼링크와 강하게 연관해 생각하므로 u태그를 쓰려고 할 때는 더 적합한 표현이 있는지 늘 고민해야 한다)

i 태그도 이탤릭체 결과를 내놓는다. 하지만 em은 강조를 위해 사용하는 태그이고 i는 외국어, 독백 등 일반적인 맥락에서 벗어났을 경우 사용한다.

2.7. code

짧은 코드 조각을 나타내는 인라인 요소이다. 기본 스타일은 사용자 에이전트에서 지원하는 고정폭 글씨체다.

해당 태그는 보통 한 줄의 코드만 나타내므로 여러 줄의 코드를 나타내려면 <pre>태그를 사용하자.

2.8. mark

현재 맥락에 관련이 깊거나 관심을 가져야 할 중요한 부분을 나타낸다. 형광펜으로 강조 표시를 하는 것과 같다고 생각하면 된다.

단 표시를 위해서만 사용하면 안 된다. 그럴 땐 CSS를 사용하자.

2.9. q

짧은 인라인 인용문. cite 속성을 써서 출처를 표기할 수 있다.

<p>이 문장은 <q cite="https://www.naver.com/">네이버에서 인용한 무언가</q>를 인용했다.</p>

인라인 인용구는 기본적으로 따옴표로 묶인 일반 텍스트로 표현된다.

2.10. span

본질적으로는 아무 의미도 나타내지 않는 통용 인라인 컨테이너다. 스타일 적용이나 어떤 특성을 공유하는 요소를 묶을 때 쓸 수 있다. 의미를 갖지 않는 요소를 제공한다는 점에서 인라인 버전의 div라고도 할 수 있겠다.

2.11. time

시간의 특정 지점 또는 구간을 기계가 읽을 수 있는 형식으로 나타낸다. datetime 특성 값을 지정해 시간을 나타내는 문자열을 사용자 에이전트에 제공할 수 있다.

datetime 특성이 없는 경우 요소의 텍스트 콘텐츠를 datetime 특성값으로 간주하며 이럴 경우 자식 요소를 두어서는 안된다.

<p>최종 수정일: <time datetime="2023-06-28">2023년 6월 28일</time></p>

datetime 속성을 설정할 경우 datetime 내부의 날짜 표기는 사용자의 마음대로 할 수 있지만, datetime 속성에는 기계가 읽을 수 있는 형식으로 표기해야 한다.

2.12. var

수학 표현이나 프로그래밍 문맥 등에서 변수명을 나타낸다. 브라우저마다 다르지만 흔히 이탤릭체로 표기된다.

<p>
  <var>x</var>는 <var>y</var>의 2배이다.
</p>

스타일링을 위해서 사용하면 안된다. 스타일링이 필요할 경우 <span>으로 래핑하고 CSS를 쓰자.

2.13. kbd

키보드 입력 등 사용자의 입력을 나타낸다. 보통 키보드 입력을 나타내기 위해 사용한다.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the text.</p>

<kbd>요소를 중첩해 사용하여 하나의 입력 안에 작은 부분 입력을 나타낼 수 있다.

2.14. samp

samp 태그의 MDN 문서

컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타낸다.

kbd 요소를 samp 요소 안에 배치하면 시스템이 재출력한 입력을 나타낼 수 있다.

참고

HTML 텍스트 https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals

HTML 텍스트 고급 기법 https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting