웹 접근성에 대해 공부하다보니 평소에 잘 쓰지 않던 태그들이 많다는 것을 알게 되었고, 이에 대해서 한번 리뷰를 해보려고 합니다.
정리하다 보면 좋은 태그들을 발견할 수 있지 않을까 싶습니다.
!DOCTYPE 태그
- 정말 자주 보는 태그인데 정확히 어떤 의미인지 몰라서 알아봤습니다.
- doctype 선언이라고 보통 읽고, document type 선언을 의미합니다.
- 페이지가 어떤 HTML버전으로 쓰였는지 설명합니다.
- HTML 4.01에서는 doctype 선언이 DTD를 조회한다고 합니다. 왜냐하면 HTML 4.01이 SGML(tandard Generalized Markup Language) 기반으로 만들어졌기 때문입니다.
- DTD는 마크업 언어를 명시하고, 그래서 그 브라우저는 콘텐츠들을 정확하게 렌더하는 것입니다.
- 하지만 HTML 5는 SGML 기반으로 만들어지지 않았고, 따라서 DTD를 조회할 필요가 없게 되는것입니다.
- 그럼에도 불구하고 HTML 문서에는 항상 doctype 선언을 하라고합니다. 그래야 브라우저가 그 문서가 어떤 것인지 알 수 있기 때문입니다.
- doctype 선언은 대소문자를 구분하지 않습니다.
template 태그
- 태그 안에 있는 내용을 보이지 않게 해줍니다.
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg">
</template>
Flower
요소 검사를 해 보면 있지만 보이지는 않습니다.
abbr 태그
- 축약형 언어를 표시할 때 사용합니다.
- World Health Organization의 축약형은 WHO입니다.
- 마우스를 올리게 되면 title이 뜹니다.
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
The WHO was founded in 1948.
address 태그
- 기본은 기울임 글씨체입니다.(italic)
- 저자나 사이트 주인의 연락정보를 표기할 때 사용합니다.
- body 안에 있을 때에는 document의 연락 정보를 표기합니다.
- article 안에 있을 때에는 그 article에 관한 연락 정보를 표기합니다.
- 보통 footer 안에 다른 정보와 함께 쓰입니다.
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Visit us at:
Example.com
Box 564, Disneyland
USA
map, area 태그
- 접근성 교육에서 들었는데 요즘은 잘 쓰지 않는다고합니다.
- W3school 예제에서 사용해보시면 좋을것 같습니다. 저도 생소한 태그.
- 이미지 태그와 함께 사용합니다.
- 이미지 안에서 클릭요소를 만들어 주는 태그입니다. 클릭시 이동 혹은 다운로드 같은 기능이 있습니다.
- 사용법
- img 태그 안에 usemap 속성을 줍니다. 앞에 #이 붙어야 합니다. img usemap=’#planetmap’
- map 태그 안에 name 속성을 주어 이미지 태그와 연결합니다. map name=’planetmap’
- map 태그 안에 area 태그를 넣습니다.
- area 태그의 속성을 지정해줍니다. 기본적으로 shape, coords, alt, href입니다.
- shape은 default, rect, circle, poly가 있습니다. 기본적으로 rect(사각형), circle(원)을 사용합니다.
- coords는 ‘,’를 사용해 4개까지 쓸 수 있습니다. coords=’0,0,10,20’
- 첫번째는 x좌표, 두번째는 y좌표, 세번째는 가로길이, 네번째는 세로길이입니다.
- 세개만 쓸 경우 x,y 의 길이를 같게 한번에 표시할 수 있습니다.
- download 속성을 사용할 경우, 클릭할 때 다운로드 되게 할 수 있고 다운로드 될 이름을 지정해 줄 수 있습니다.
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
article 태그
- article 태그는 독립적인 콘텐츠를 특정합니다.
- article 태그 내용만으로 이해할 수 있어야 합니다.
- article 태그로 사용하기 좋은 내용들
- 포럼 포스트
- 블로그 포스트
- 뉴스
- 코멘트
audio 태그
- 보통 오디오 플레이어가 있을 때, js로 만드는 줄 알았는데 audio 태그로 만들 수도 있습니다.
caption 태그
- caption 태그는 table 안에서 설명하는 역할입니다.
- caption 태그는 table 태그 바로 뒤에 작성되어야 합니다.
- 기본으로 center-align 입니다.
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
| Month | Savings |
|---|---|
| January | $100 |
cite 태그
- cite 태그는 작업의 제목을 정의합니다.
- 폰트 스타일은 기본으로 italic 입니다.
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
The Scream by Edward Munch. Painted in 1893.
em, strong, code, samp, kbd, var 태그
- 각 태그마다 font-style: italic, font-weight: bold 같은 스타일이 있습니다.
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>
Emphasized text
Strong text
A piece of computer code
Sample output from a computer program
Keyboard input
Variable
sub, sup 태그
- 문장의 각주, 위나 아래에 작은 글씨로 써져있는 것입니다.
<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>
This text contains subscript text.
This text contains superscript text.
thead, tbody, tfoot 태그
- 이름에서 알 수 있듯, table 에서 사용하는 head, body, foot 태그입니다.
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| Sum | $180 |
time 태그
- 사람이 읽을 수 있는 날짜/시간을 정의합니다.
- 설정함으로 인해 눈에 보이는 변화는 없지만, 검색 엔진이 더 좋은 검색 결과를 생성하게 도와줍니다.
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
We open at every morning.
I have a date on .
u 태그
- 링크와 혼란을 줄 수 있는 곳에 u 태그를 사용합니다.
- text-decoration: underline 입니다.
<p>This is a <u>parragraph</u>.</p>
This is a parragraph.
wbr 태그
- 줄내림이 생길 수 있는 곳에 기회를 줍니다.
- 한 단어의 길이가 띄어쓰기 없이 길 때, 줄내림을 할 곳을 지정해 줍니다.
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery