[웹표준,웹접근성] HTML TAG

웹 접근성에 대해 공부하다보니 평소에 잘 쓰지 않던 태그들이 많다는 것을 알게 되었고,

이에 대해서 한번 리뷰를 해보려고 합니다.

정리하다 보면 좋은 태그들을 발견할 수 있지 않을까 싶습니다.

---

 

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

• <templete> 안에 있는 내용은 보이지 않습니다.

abbr 태그

• 축약형 언어를 표시할 때 사용합니다.
• World Health Organization의 축약형은 WHO입니다.
• 마우스를 올리게 되면 title이 뜹니다.

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>

map, area 태그

• 접근성 교육에서 들었는데 요즘은 잘 쓰지 않는다고합니다.
• [W3school 예제](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap)에서 사용해보시면 좋을것 같습니다.
• 이미지 태그와 함께 사용합니다.
• 이미지 안에서 클릭요소를 만들어 주는 태그입니다. 클릭시 이동 혹은 다운로드 같은 기능이 있습니다.
• 사용법
  • 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>

cite 태그

• cite 태그는 작업의 제목을 정의합니다.
• 폰트 스타일은 기본으로 italic 입니다.

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

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>

sub, sup 태그

• 문장의 각주, 위나 아래에 작은 글씨로 써져있는 것입니다.

<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>

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>

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>

u 태그

• 링크와 혼란을 줄 수 있는 곳에 u 태그를 사용합니다.
• text-decoration: underline 입니다.

wbr 태그

• 줄내림이 생길 수 있는 곳에 기회를 줍니다.
• 한 단어의 길이가 띄어쓰기 없이 길 때, 줄내림을 할 곳을 지정해 줍니다.

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>