HTML 강좌 / 텍스트에 의미 부여하기

HTML에서는 글자를 굵게 또는 기울여 보이게 하는 것보다 왜 그 부분이 다른지 표시하는 것이 중요합니다. em은 강조, strong은 중요성, q와 blockquote는 인용, abbr은 약어, code는 코드라는 의미를 문서에 더합니다.

강조와 중요성: em과 strong

em은 문맥에서 특정 말을 강조할 때 사용합니다. strong은 경고나 핵심 조건처럼 내용의 중요성이 높을 때 사용합니다. 브라우저가 기본적으로 em을 기울임꼴, strong을 굵은 글씨로 표시하더라도 두 요소의 의미는 모양과 다릅니다.

<p>파일을 저장한 <em>다음에</em> 브라우저를 새로고침하세요.</p>
<p><strong>비밀번호를 다른 사람과 공유하지 마세요.</strong></p>

첫 문장은 작업 순서에서 ‘다음에’를 강조합니다. 두 번째 문장은 주의해야 할 내용을 중요하게 표시합니다. 단지 굵거나 기울어진 모양만 필요하다면 CSS로 표현을 조절하고, 의미 없는 강조 태그를 반복하지 않습니다.

짧은 인용과 긴 인용: q와 blockquote

문장 속에 들어가는 짧은 인용은 q, 문단처럼 독립된 긴 인용은 blockquote로 표시합니다. 아래 문구는 태그 사용법을 보여 주기 위해 만든 예시 문장입니다.

<p>안내문에는 <q>변경 내용을 저장하세요</q>라고 적혀 있습니다.</p>

<blockquote>
  <p>문서의 구조를 먼저 정한 뒤 내용을 작성하면 나중에 수정하기 쉽습니다.</p>
</blockquote>

q의 따옴표는 브라우저가 표시할 수 있으므로 인용부호를 태그 안팎에 중복해서 넣지 않습니다. 실제 다른 사람의 말을 인용할 때는 인용의 정확성과 출처를 확인하고, 독자가 볼 수 있는 위치에 출처를 따로 표시합니다. blockquote의 cite 속성을 적는 것만으로 출처가 화면에 자동으로 보이지는 않습니다.

약어 풀어 쓰기: abbr

abbr은 약어나 두문자어를 나타냅니다. 처음 등장하는 자리에서 풀어 쓴 이름을 함께 알려 주면 title 속성에 마우스를 올리기 어려운 독자도 뜻을 이해할 수 있습니다.

<p>HyperText Markup Language(<abbr title="HyperText Markup Language">HTML</abbr>)은 웹페이지의 구조를 만드는 언어입니다.</p>

이후 같은 문맥에서 다시 나오는 HTML까지 매번 풀어 쓸 필요는 없습니다. 약어 자체가 익숙한지보다 이 글의 독자가 처음 읽어도 이해할 수 있는지를 기준으로 설명합니다.

코드와 입력 키 표시하기: code와 kbd

문장 안의 짧은 코드나 파일명을 코드로 표시할 때는 code를 사용합니다. 독자가 눌러야 하는 키나 입력해야 하는 명령을 나타낼 때는 kbd가 알맞습니다.

<p><code>index.html</code>을 저장하고 <kbd>Ctrl</kbd>+<kbd>S</kbd>를 누르세요.</p>

여러 줄의 코드에서 공백과 줄바꿈을 유지해야 한다면 pre 안에 code를 넣을 수 있습니다. 이 사이트의 강좌 본문에서는 코드 강조 기능에 맞춰 별도의 EnlighterJSRAW 코드 블록 형식을 사용합니다.

상황에 맞는 요소 선택하기

• 말의 강조는 em, 높은 중요성은 strong으로 표시합니다.
• 문장 안의 짧은 인용은 q, 독립된 인용 문단은 blockquote로 표시합니다.
• 약어는 abbr로 나타내고, 처음 읽는 독자를 위해 풀어 쓴 이름을 함께 적습니다.
• 코드는 code, 사용자의 키 입력은 kbd로 구분합니다.

각 요소가 허용하는 내용과 세부 문법은 MDN의 HTML 요소 목록에서 확인할 수 있습니다.