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

올바른 사용

검색 결과의 매칭 키워드 강조

본문에서 현재 컨텍스트 관점의 중요 부분

기본 노란 배경 (CSS 커스텀 가능)

em/strong과 다른 의미 — 현재성이 핵심

검색 결과 하이라이트

<p>
  <mark>SEO</mark> 컨설팅을 제공하는 회사입니다.
  <mark>SEO</mark>는 검색엔진 최적화의 약자.
</p>

사용자가 "SEO"로 검색했을 때 매칭된 부분을 동적으로 mark로 감쌈.

인용 안 주목할 부분

<blockquote>
  <p>
    <mark>구글의 핵심 메시지는 이 한 줄이다</mark> —
    "사람을 위한 최적화가 AI를 위한 최적화다."
  </p>
</blockquote>

인용문 안에서 이 페이지의 맥락에서 주목할 부분.

자주 보는 안티패턴

단순 강조용으로 mark (em/strong이 적절)

디자인적 노란 배경 효과로만

본문 전체에 mark 남발

검색 매칭 외 정적 강조에 사용

단순 강조용

<p>이건 <mark>매우</mark> 중요하다.</p>

일반 강조는 em/strong. mark는 현재 컨텍스트의 일시적 강조.

디자인 노란 배경 효과

<p><mark>제목처럼 노란 배경 효과를 원해서</mark></p>

시맨틱 노이즈. 디자인 효과는 CSS background로.

해설

본문 안에서 현재 컨텍스트의 관점에서 주목할 부분을 하이라이트하는 시맨틱. em(강조), strong(중요성)과 달리 — 지금 이 페이지의 사용자 관점에서 부각하고 싶은 부분이라는 컨텍스트 의존적 강조.

가장 일반적인 사용 예 — 검색 결과의 매칭 키워드 강조. 사용자가 "SEO"로 검색해서 본 페이지에서 본문의 "SEO" 단어들이 동적으로 mark로 감싸지는 패턴. 이건 원본 콘텐츠의 정적 강조가 아닌 사용자의 현재 의도에 따른 강조다.

SEO 관점에서 mark의 직접 영향은 작다. 다만 동적 검색 매칭 강조는 사용자 경험을 개선해 간접 신호로 작용.

GEO 관점에서 AI가 이 페이지가 강조하는 부분을 인지하는 약한 신호. strong/em이 저자가 강조하는 부분이라면, mark는 사용자/현재 관점에서 강조된 부분. 둘의 의미 차이를 AI도 점차 학습 중.

A11y 관점에서 스크린리더의 mark 처리는 환경별로 다르다. 일부는 "하이라이트 시작/끝"을 발화, 일부는 단지 시각만 변경. 시각적으로는 노란 배경(브라우저 기본)으로 일관 표시.

자주 보는 안티패턴: 단순 강조용으로 mark(일반 강조는 em, 중요성 강조는 strong), 디자인 노란 배경 효과로만 사용(시맨틱 노이즈 — 효과만 원하면 CSS background), 본문 전체에 mark 남발(모든 게 강조면 강조가 사라짐), 정적 강조에 mark(저자가 미리 정한 강조는 strong/em이 적절).

em/strong/mark의 의미 분리:

em: 의미상의 강조 (목소리 톤이 바뀌는 느낌)
strong: 중요성 강조 (위험·경고 같은 절대 놓치면 안 되는 부분)
mark: 현재 컨텍스트에서 주목해야 하는 부분 (검색 매칭, 인용문 안의 핵심 등)

세 단어 비슷해 보이지만 시맨틱은 다르다. 기본값으로 사용하는 빈도는 strong/em이 압도적으로 높고, mark는 특정 상황(검색 매칭, 컨텍스트 의존 강조)에서만 등장.

UI 라이브러리에서 mark — Algolia·Meilisearch 같은 검색 SDK가 검색 매칭 부분을 mark로 감싸는 기본 패턴이 있다. 이런 라이브러리를 사용하면 mark가 자동으로 정확한 컨텍스트에서 등장. 직접 검색 UI를 만들 때도 — 매칭 키워드를 mark로 감싸는 게 시맨틱 정답.

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

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설