<code> — 텍스트 시맨틱 태그 도감

올바른 사용

인라인 코드는 단독 code

블록 코드는 pre + code 조합

변수명·함수명·파일명·CSS 선택자에 모두

기본 monospace 폰트

인라인 코드

<p>
  React 컴포넌트는 <code>useState</code> 훅으로 상태 관리합니다.
</p>

함수명, 변수명, 파일명 등 인라인 코드.

블록 코드 (pre + code)

<pre>
  <code className="language-tsx">
    function App() {
      return <div>Hello</div>;
    }
  </code>
</pre>

블록은 pre로 감싸 들여쓰기 보존. className="language-..."로 syntax highlighter 활용.

자주 보는 안티패턴

코드를 span으로 만들고 monospace CSS만

pre 없이 블록 코드 — 들여쓰기 깨짐

code 안에 추가 마크업 (대부분 불필요)

라이브러리 이름까지 모두 code (남발)

span + monospace CSS

<p>
  React 컴포넌트는 <span className="mono">useState</span> 훅을 씁니다.
</p>

시각만 monospace, 시맨틱 0. 검색·AI가 코드로 인식 못 함.

pre 없이 블록 코드

<code>
  function App() {
    return <div>Hello</div>;
  }
</code>

줄바꿈·들여쓰기 보존 안 됨. 한 줄로 squash.

해설

코드 텍스트의 시맨틱. 인라인 변수명·함수명·파일명·CSS 선택자, 그리고 블록 코드 스니펫. 본문에서 기술적 식별자가 등장하면 거의 항상 code 태그가 정답.

SEO 관점에서 기술 문서·튜토리얼의 코드 검색 가능성에 직접 작용. 사용자가 "useState 사용법"을 검색했을 때 — code로 마크업된 useState가 있는 페이지가 그냥 텍스트로 박힌 useState보다 검색 매칭에서 우선. 구글의 Code Search 기능과 직접 연결.

GEO 관점에서 AI는 어디까지가 코드이고 어디부터가 설명인지 명확히 알아야 답변에 코드를 그대로 인용할 수 있다. code 시맨틱이 없으면 — AI가 본문에서 코드처럼 보이는 텍스트를 추측해 인용. 잘못 잘린 코드(예: useEffect(() 같이 괄호 짝 안 맞는 형태)가 답변에 등장하는 케이스의 원인.

AEO 관점에서 "X 함수의 사용법은?" 같은 코드 질문에 — code + pre로 마크업된 페이지가 답변 후보로 우선. 답변에 코드 블록 그대로 노출 가능.

A11y 관점에서 일부 스크린리더는 code 영역에서 발화 모드를 전환. 일반 한국어 문장 발화에서 영문 코드 글자별 발화로 바뀌어 — 사용자가 지금 코드를 듣고 있다를 인지. NVDA·VoiceOver 둘 다 이 동작을 지원.

자주 보는 안티패턴: span + monospace CSS(시각만 코드처럼, 시맨틱 0 — 검색·AI가 코드로 인식 못 함), pre 없이 블록 코드(줄바꿈 보존 안 됨 — code 단독은 인라인용, 블록은 pre로 감싸기), 라이브러리 이름까지 모두 code로(React·Vue 같은 고유명사 브랜드는 일반 텍스트가 적절 — 기술적 식별자만 code).

pre + code의 결합 — 블록 코드는 반드시 <pre><code>.... pre가 공백·줄바꿈을 그대로 표시, code가 코드 시맨틱. 둘 중 하나만 쓰면 시각·시맨틱 한쪽이 빠진다.

syntax highlighting — code 자체는 색상 안 입힘. Prism.js, Shiki, highlight.js 같은 라이브러리를 활용해 className="language-tsx" 같은 hint로 색상 자동 적용. Next.js MDX 환경에서는 rehype-prism-plus나 shiki 플러그인이 표준.

이 도감의 codex 페이지 자체가 code의 좋은 예 — 본문에 등장하는 모든 함수·태그·속성 이름이 code로 마크업되어 있다. 시각적으로는 옅은 회색 배경 + monospace, 시맨틱적으로는 검색·AI 모두 코드 영역으로 정확히 인지.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설