Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.

HTML 요소는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.

시도해 보기

<p>Search results for "salamander":</p>

<hr />

<p>
  Several species of <mark>salamander</mark> inhabit the temperate rainforest of
  the Pacific Northwest.
</p>

<p>
  Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and
  other small creatures.
</p>

/* stylelint-disable-next-line block-no-empty */
mark {
}

콘텐츠 카테고리 가능한 콘텐츠 태그 생략 가능한 부모 요소 가능한 ARIA 역할 DOM 인터페이스

플로우 콘텐츠, 구문 콘텐츠, 뚜렷한 콘텐츠.

구문 콘텐츠.

불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.

구문 콘텐츠를 허용하는 모든 요소.

모두

HTMLElement

특성

이 요소는 전역 특성을 포함합니다.

사용 일람

일반적인 요소의 사용처는 다음과 같습니다.

인용문(<q>, <blockquote>)에서는, 원본엔 별도 표시가 없으나 특별히 봐야 하는 부분을, 그리고 원저자는 특별히 중요하다고는 생각하지 않았으나 주시해야 할 필요가 있는 부분을 표시합니다. 형광펜을 사용해 중요해 보이는 책에 강조 표시를 추가하는 것처럼 생각하면 됩니다.
다른 경우, 는 문서 콘텐츠에서 사용자의 현재 행동과 관련 있는 부분을 나타낼 때 사용합니다. 예를 들어, 현재 검색 키워드를 강조 표시할 때 사용할 수 있습니다.
를 표시만을 위한 용도로 사용하지 마세요. 과 적절한 CSS를 대신 사용해야 합니다.

참고 : 와 요소의 차이점을 기억하세요. 텍스트에서, 는 연관성을 가진 부분을, 은 중요도를 가진 부분을 나타낼 때 사용합니다.

예제

관심 부분 표시하기

첫 예제의 요소는 인용문에서 사용자가 관심을 가질 텍스트를 강조할 때 사용합니다.

html
<blockquote>
  It is a period of civil war. Rebel spaceships, striking from a hidden base,
  have won their first victory against the evil Galactic Empire. During the
  battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire’s
  ultimate weapon, the DEATH STAR, an armored space station with enough power to
  destroy an entire planet.
</blockquote>

상황에 맞는 구절 식별

다음 예제는 글의 검색 결과를 강조할 용도로 를 사용합니다.

html
<p>
  It is a dark time for the Rebellion. Although the Death Star has been
  destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
  forces from their hidden base and pursued them across the galaxy.
</p>

<p>
  Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
  freedom fighters led by Luke Skywalker has established a new secret base on
  the remote ice world of Hoth.
</p>

다른 와 검색 결과 표시를 구별하기 위해 사용자 지정 클래스 "match"를 추가로 적용했습니다.

접근성 고려사항

대부분의 스크린 리더는 기본값에서 요소의 존재를 표현하지 않습니다. 그러나 CSS content 속성과 ::before, ::after 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.

css
mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [강조 시작] ";
}

mark::after {
  content: " [강조 끝] ";
}

스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 강조표시의 유무가 꼭 필요할 때만 사용해야 합니다.

명세

Specification

HTML
# the-mark-element

브라우저 호환성

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2026년 4월 15일 by MDN contributors.

View this page on GitHub • Report a problem with this content

<mark>

In this article

Help improve MDN