mark, small, sub, sup

출처 : 위키백과

1. mark

<p>여러 종의 <mark>도롱뇽</mark>은 태평양 북서부의 온대 우림에 서식합니다.</p>

 : 형광펜을 사용해 중요해 보이는 책에 강조 표시를 추가하는 것처럼 생각하면 됩니다. 단, 표시를 위한 용도로는 mark가 아니라 CSS를 적절히 사용해야 합니다. 현재 행동과 관련이 있는 키워드를 강조 표시할 때 사용할 수 있습니다. 기본적으로 스크린리더에서는 <mark>를 강조해서 표현하지 않습니다.

출처 : mdn mark

2. small

<p>MDN Web Docs는 웹 기술과 웹을 구동하는 소프트웨어를 위한 학습 플랫폼입니다.</p>

<hr>

<p><small>
콘텐츠는 Creative Commons Attribution-ShareAlike 2.5 일반 라이선스에 따라 라이선스가 부여됩니다.</small></p>

 : 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다. 단순히 글씨크기를 줄이고자 할 때는 CSS를 활용해야 합니다.

출처 : mdn small

3. sub

<p>화학식으로 H<sub>2</sub>O는 물을 뜻한다.

 : 아래첨자(subscript)의 약자로 보통 화학식, 각주 표기 등에서 사용합니다.

※ 단순히 글자를 아래로 내려야 할 때는 CSS(대게 vertical-align)를 사용해야 합니다. vertical-align: sub, 또는 기준선에서 25% 내려야 한다면 vertical-align: -25% 로도 할 수 있습니다. 

sub 예시

4. sup

<p>직각 삼각형의 빗변을 구하는 공식인 피타고라스의 정리는 a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> 이다.</p>

 : 위첨자(superscript)의 약자로 지수나 서수(5th 등) 표기 등에서 사용합니다. 

※ 단순히 글자를 위로 올려야 할 때는 CSS(대게 vertical-align)를 사용해야 합니다. vertical-align: super 또는 기준선에서 50% 올려야 한다면 vertical-align: 50% 로도 할 수 있습니다. 

sup 예시

---

정리 

 : 형광펜 효과, 작은글씨효과, 아래첨자, 위첨자를 위한 태그를 공부해보았는데요. 사실 모두 CSS를 통해 동일한 효과를 낼 수 있지만 해당 태그들은 모두 시멘틱 태그의 관점에서 구분되어 있다는 점을 기억해야 합니다.

참고자료

https://developer.mozilla.org/ko/docs/Web/HTML/Element/mark

<mark> - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element/small

<small>: 덧붙임 글 요소 - HTML: Hypertext Markup Language | MDN

 https://developer.mozilla.org/ko/docs/Web/HTML/Element/sub

<sub>: 아래 첨자 요소 - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element/sup

<sup>: 위 첨자 요소 - HTML: Hypertext Markup Language | MDN