🏷️ 웹문서에 최적화된 독특한 HTML 태그 10가지

...

figure & figcaption 태그

이 태그들은 이미지, 동영상 과 같은 멀티미디어 콘텐츠의 캡션 및 기타 메타데이터를 추가하는 방법을 제공한다. 물론 이미지, 동영상을 표현하는데 적합한 ~~<img>~~ , ~~<video~~> 태그들이 존재하지만, 이들을 ~~<figure>~~ 태그로 한번 더 감싸주면, 웹 페이지의 접근성과 검색 엔진 최적화가 개선된다고 한다. 멀티미디어 콘텐츠에 대한 컨텍스트 및 추가 정보를 제공하여 사용자가 이해하기 쉽고 검색 엔진이 웹 페이지를 색인화할 수 있기 때문이다.

~~<figcaption>~~ 태그는 소스에 대한 제목 또는 설명과 같은 추가 정보를 제공하는 캡션(caption)으로써, <figure> 태그 내부 하단에 배치된다.

<!-- 이미지에 대한 컨테이너 -->
<figure>
  <img src=https://bit.ly/2bgFrvL width="600px"/>
  <figcaption>World Map</figcaption> <!-- 이미지의 캡션을 정의 -->
</figure>

당장 이곳 티스토리 블로그도 개발자도구를 살펴보면 이미지를 포스팅에 표시할때 ~~<figure>~~ 엘리먼트를 사용한다는 걸 알 수 있다.

mark 태그

웹사이트의 해당 문구가 키워드 정보 제공용이고 핵심 사항을 강조하고 싶은 경우 사용되는 태그이다. 마치 우리가 책에서 중요한 문구를 강조하고 싶을때 형광펜으로 긋듯이 생각하면 된다.

~~<mark>~~ 태그를 사용하면 검색 엔진이 텍스트의 문맥과 관련성을 더 쉽게 이해할 수 있게 해주기 때문에 웹 페이지의 사용성과 접근성을 개선하는 데 도움이 될 수 있다.

<p>The quick <mark>brown fox</mark> jumps over the lazy dog.</p>

See the Pen Untitled by barzz12 (@inpaSkyrim) on CodePen.

abbr 태그

문서에 '약어' 기능을 추가할 수 있다. 사용자가 약어 위로 마우스를 가져가면 전체 형식이 표시되는 일종의 툴팁이라 보면 된다. 스크린 리더, 맞춤법 검사기 및 검색 엔진에 이점이 있다.

비슷한 약어 태그인 ~~<acronym>~~ 도 있지만 HTML5에서 지원되지 않으며 현재 사용되지 않는다

<p>
    마우스 커서를 
    <abbr title="안녕하세요 인파입니다 방문해주셔서 감사해요">고유명사</abbr> 
    에 올리면 설명 캡션이 생겨요!
</p>

See the Pen abbr 태그 by barzz12 (@inpaSkyrim) on CodePen.

del & ins 태그

흔히 글자 가운데 취소선을 긋기 위해 ~~<s>~~ 태그를 이용하지만 ~~<del>~~ 태그는 최신 시맨틱 태그로서 이것을 사용하기를 권장된다. 또한 ~~<ins>~~ 태그와 결합하면 단순 취소선 표시 뿐만 아니라 수정된 테스트를 옆에 강조 표시로 나타내게 할 수도 있다.

<p>Pluto <del>is</del> <ins>isn’t</ins> a planet.</p>

<p>John <del>likes</del> <ins>LOVES</ins> his new iPod.</p>

See the Pen del & ins 태그 by barzz12 (@inpaSkyrim) on CodePen.

ruby 태그

단어의 위나 옆에 배치되어 발음을 나타내는 작은 문자 또는 기호인 루비 주석을 만드는 데 사용되는 태그이다.

<p>
  The word 
  <ruby>안녕하세요<rt>annyeonghaseyo</rt></ruby> <!-- 글자 위에 작은 주석이 표시-->
  means "hello" in Korean
</p>

See the Pen ruby 태그 by barzz12 (@inpaSkyrim) on CodePen.

sup & sub 태그

문서에 위첨자(x²) 및 아래첨자 (x₀) 를 문서에 추가해준다. 일일히 특수기호를 뒤지지 말고 간단한 태그로 구현이 가능한 것이다.

<p>
  length<sup>2</sup> +
  width<sup>2</sup> =
  hypotenuseA<sup>2</sup>
</p>

See the Pen sub & sup by barzz12 (@inpaSkyrim) on CodePen.

wbr 태그

이 태그는 단어를 여러 줄로 나누는 위치를 나타내는 데 사용된다. 무슨 말이냐 하면, 가로폭을 줄일 경우 텍스트가 영역을 오버플로하여 레이아웃 문제를 일으켜 단어 중간에서 끊어져 읽기 어렵게 만드는데 이를 방지하는데 사용된다고 보면 된다. 요소 영역에 가로 스크롤 자체를 사용하지 않으려할때 유용히 쓰일 수 있다.

아래 예제 에서 텍스트 박스 크기를 줄이면서 링크 문자열의 단어 개행이 어떤식으로 되는지 확인해보자.

<p>
  아래 링크 문자열은 강제로 개행할 경우 텍스트가 단어 중간에서 끊어져 읽기 어려운 문제를 일으키기 때문에 이를 방지 하기 위해 적절하게 단어대로 개행하도록 한다
  <br><br>
  https://<wbr>www<wbr>.creativebloq<wbr>.com/
</p>
<!--
    강제로 개행해도 링크의 문자열이 단어 단위대로 끊어지도록 설정
    https://
    www
    .creativebloq
    .com/
-->

See the Pen object 태그 by barzz12 (@inpaSkyrim) on CodePen.

time 태그

이름 그대로 웹 페이지에 특정 날짜 및 시간 관련 정보를 표시하는 데 사용된다. ~~<time>~~ 태그를 명시해주면, 기계가 읽을 수 있는 형식 으로 시간과 날짜를 지정할 수 있으므로 검색 엔진이 더 쉽게 이해할 수 있는 장점이 있다.

사용법은 아래 코드와 같이 날짜를 표현하는 단어에 ~~<time>~~ 태그로 감싸주고 ~~datetime~~ 속성을 주어서 기계가 읽을 수 있는 형식을 지정한다. 이때 형식은 날짜 및 시간을 나타내는 표준화된 형식인 ISO 8601 표준이어야 한다. 그리고 사람이 읽을 수 있는 7월 7일 이라는 텍스트를 표현함으로써, 사람과 기계가 동시에 읽을 수 있는 time 표현을 문서에 그릴 수 있는 것이다.

<p>Posted: <time datetime="2020-07-07">7월 7일</time></p>

address 태그

왠만한 회사 웹사이트 하단(footer) 부분을 보면 이메일, 전화, 주소와 같은 비즈니스 정보를 기재해 둔다. 이때 무지성으로 ~~<div>~~ 태그로 표현하지말고 좀더 시맨틱(sematic)한 주소 전용 태그인 ~~<address>~~로 감싸 표현해주면 html에서 의미론적으로 주소를 마크업 해줘 좋다.

<address>    
   Written by <a href="mailto:info@rijsat.com">Rijwan Ansari</a>.<br>     
   Visit us at:<br>    
   RijSat.com<br>    
   Buddhanagar, Kathmandu<br>    
   Nepal    
</address>