HTML : <mark> 하이라이트를 표시 할수있는 태그 (형광펜)

HTML : <mark> 하이라이트를 표시 할수있는 태그 (형광펜)

---

 

• 인용문 (<q>,<blockquote>)에서는 원본엔 별도 표시가 없으나 특별히 봐야하는 부분, 혹은 중요해보이는 부분을 강조표시할때 사용한다 → 형광펜
• 단순 스타일링을 위해서 <mark>를 사용해서는 안된다 → 스타일링을 위해선 <span>과 CSS를 이용해야한다.

 

---

 

예제  : 관심 부분 표시하기

• <mark>요소는 인용문에서 사용자가 관심을 가질 텍스트를 강조할때 사용한다.

 

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt illo similique totam dicta? Beatae unde enim odit molestias placeat! Maxime in, fugit sunt incidunt illum hic consequatur et. Officia, quos.

        <blockquote>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt
            illo similique totam dicta?
            <mark>Beatae unde enim odit molestias placeat! Maxime in,</mark>
            fugit sunt incidunt illum hic consequatur et. Officia, quos.
        </blockquote>

 

---

접근성 고려사항

• 대부분의 스크린리더는 기본값(default)에서 <mark>요소를 표현하지않으나 CSS <content> 속성과 ::before, ::after 의사요소를 사용하면 소리내어 읽을수있도록 할수있다.
• 스크린리더 사용자 일부는 지나치게 자세한 안내를 유발할수있는 컨텐츠의 표현은 꺼놓는 경우가 있으므로 지나치게 남용해서는 안되며 컨텐츠의 이해에 강조표시가 꼭 필요한 경우에만 사용한다.
• <mark>와 <strong>의 차이점은 <mark>는 연관성이 있는 부분을 표시할때 사용하고 <strong>은 중요도가 있는 부분을 나타낼때 사용한다.

 

HTML : b, strong - 강조를 위한 태그

 

---

기술요약

• 콘텐츠 카테고리 : 플로우 콘텐츠, 구문 콘텐츠
• 가능한 콘텐츠 : 구문 콘텐츠
• 태그 생략 : 생략 불가
• 가능한 상위요소 : 구문 콘텐츠를 허용하는 모든 요소

 

HTML : 콘텐츠 카테고리 (Contents Category)

 

---