<mark>

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

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 구문 콘텐츠.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLElement

특성

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

사용 일람

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

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

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

예제

관심 부분 표시하기

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

<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>

상황에 맞는 구절 식별

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

<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>

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

접근성 고려사항

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

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 Status Comment
HTML Living Standard
The definition of '<mark>' in that specification.
Living Standard
HTML5
The definition of '<mark>' in that specification.
Recommendation

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
markChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 11Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support