HTML mark tag 정리, 한글 설명

HTML <mark> element

mdn, W3C 정리 & 한국어 설명

자료 수집 : 2022년 3월

 

mark 태그란?

글자에 형광펜 효과를 준다. 기본적으로 글자 배경으로 노란색 스타일이 제공된다.

 

 

태그를 어디에서 사용할까?

• 인용문에서 특별히 봐야하는 부분을 표시할 때
• 사용자의 현재 행동과 관련있는 부분을 나타낼 때 (예, 검색 키워드를 강조 표시)

 

 

주의사항

• 표시만을 위해 사용하지 않는다.
• 글자에서 mark는 연관성을 가진 부분(not semantic)이고, strong은 중요도를 가진 부분을 나타낸다.
• 보통 스크린 리더는 mark 요소를 표현하지 않는다. css에서 의사요소인 before와 after를 사용하면 리더기가 읽도록 할 수 있다. (접근성 고려) 스크린 리더 사용자가 알아야 하는 중요한 부분에만 이 방법을 쓰자.

 

 

mark 태그의 사용 예제

<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>

인용문에서, 사용자가 관심을 가질 텍스트를 강조한다.

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

검색 결과에서 키워드를 강조 표시한다.

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

스크린리더가 읽도록 css 의사 요소를 사용한다.

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

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

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

 

 

기타사항

• 가능한 ARIA role : all
• mark 태그는 HTML5 요소이다.

 

 

출처

W3schools, W3docs, MDN