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

HTML 강좌

작성일 2026-09-25 최근 수정일 2026-11-02

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><kbd>Ctrl</kbd>+<kbd>S</kbd>로 <code>index.html</code>을 저장하세요.</p>

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

한 문서에서 의미와 표시 결과 비교하기

다음 전체 문서를 text-semantics.html로 UTF-8 저장하세요. 인용문은 태그를 설명하기 위해 만든 예시 문구이며 실제 인물의 발언이 아닙니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>텍스트 의미 실습</title>
</head>
<body>
  <h1>작은 안내문</h1>
  <p>파일을 저장한 <em>다음에</em> 결과를 확인하세요.</p>
  <p><strong>원본 파일은 지우지 마세요.</strong></p>
  <p>예시 안내 문구는 <q>변경 내용을 저장하세요</q>입니다.</p>
  <p>HyperText Markup Language(<abbr title="HyperText Markup Language">HTML</abbr>)로 작성했습니다.</p>
  <p><kbd>Ctrl</kbd>+<kbd>S</kbd>로 파일을 저장하세요.</p>
  <pre><code>&lt;p&gt;예제 문장&lt;/p&gt;</code></pre>
</body>
</html>

강조·경고·인용·약어가 서로 어떤 의미로 쓰였는지 본문을 읽으며 구분합니다.
마지막 코드의 <p>가 태그 글자로 보이고 별도 문단으로 해석되지 않는지 확인합니다.
코드의 strong을 span으로 바꾸어 비교하되, 중요성을 표현하려는 문장에는 원래 요소를 복구합니다. 모양과 의미가 같지 않음을 확인하는 연습입니다.

MDN code 요소 문서에서 코드로 표시할 내용과 문서의 실제 요소를 구분하는 용법을 확인할 수 있습니다.

상황에 맞는 요소 선택하기

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

각 요소가 허용하는 내용과 세부 문법은 MDN의 HTML 요소 목록에서 확인할 수 있습니다. 의미가 화면 표현과 다르다는 점은 HTML 접근성 기본: 제목·링크·이미지·키보드에서도 적용됩니다.

HTML 강좌