1. meta 태그
<meta name="keywords" content="웹 접근성, 웹 표준, 품질마크, 웹 컨텐츠" />
<meta name="subject" content="웹 접근성 전문가 소개" />
<meta name="description" content="웹 접근성에 대한 개요와 웹 접근성 등등" />
<meta name="author" content="keum1112@naver.com, 금동준" />
<meta name="robots" content="index, follow" />
<meta name="copyright" content="Copyright 2010 WAP corp." />
  • keywords 요소를 이용하면 웹 페이지 홍보의 수단으로 검색 키워드 지정할 수 있다.
  • subject 요소를 이용하면 웹 페이지에 제목을 지정할 수 있다.
  • description 요소를 이용하면 페이지 내용을 설명할 수 있다.
  • author 요소를 이용하여 제작자 정보를 지정할 수 있다.
  • robots 요소를 이용하여 검색 로봇 제어 할 수 있다.
  • copyright 요소를 이용하여 저작권의 정보를 지정할 수 있다.
2. address 태그
<address>서울시 중랑구 망우3동</address>
  • 웹 문서의 아래쪽에 연락처 및 제작자, 저작권 정보 등을 표시할 때 유용하게 쓰이는 태그이다.
3. div 태그
<div id="header">헤더영역</div>
<div id="content">컨텐츠영역</div>
<div id="aside">사이드영역</div>
<div id="footer">푸터영역</div>
  • 컨텐츠영역을 나눌때 유용하게 쓰이는 태그이다. 
  • 블록레벨 엘리먼트이다.
4. map태그
<img src="img/imgMap.jpg" usemap="#Map" />
<map name="Map" id="Map">
 <area shape="rect" coords="40,77,112,152" href=" alt=" />
 <area shape="poly" coords="293,15,232,51,254,111,334,111,355,51" href=" alt=" />
 <area shape="circle" coords="201,169,60" href=" alt=" />
</map>

5. 비순서형 태그
<ul>
    <li>당근1개</li>
    <li>상추2개</li>
</ul>

6. 순서형 태그
<ol>
    <li>당근1개</li>
    <li>상추2개</li>
</ol>

7. 정의형 태그
<dl>
    <dt>XHTML</dt>
    <dl>HTML은 Hyper Text Markup Language의 약자</dl>
</dl>

8. 강조 태그

<em>인식의 용이성</em>
<strong>인식의 용이성</strong>
  • em default : 이탤릭체
  • storng default : 볼드체
9. 인용 태그

<blockquote cite="http://copyrightdj.tistory.com">
   <p>p는 단락 태그</p>
</blockquote>
<p>단락 태그 p<q cite="http://copyrightdj.tistory.com" title="웹접근성 예제" />
이다.</p>
  • blockquote 태그는 블록 인용구
  • q 태그는 인라인 인용구
10. 축약어와 두문자어 태그

<abbr title="Liquid Crystal Display">LCD</abbr>
<acronym title="Distributed Denial of Service">DDoS</acronym>
  • abbr은 축약어를 사용할 때
  • acronym은 두 문자를 결합할 때
  • 글자에 마우스 포인터가 가면 풍선말이 나옴.
11. 취소 및 추가 태그

<del>138,000원</del>
<ins>99,000원<ins>
  • del 태그는 컨텐츠 삭제 태그 가운데에 줄이 그어짐.
  • ins 태그는 컨텐츠 추가 태그 밑줄이 그어짐.
12. 윗첨자와 아랫첨자 태그
X<sup>2</sup>
Y<sub>2</sub>
  • sup 태그는 윗 첨자 태그
  • sub 태그는 아랫첨자 태그
13. 테이블 제목 태그와 요약 속성

<table summary="웹 접근성 관련 내용">
    <caption>웹 접근성 및 웹 표준 관련 서적</caption>
</table>
  • table 태그의 summary 속성은 table의 내용을 요약하는 속성이다.
  • caption 태그는 테이블의 이름을 지정하는 태그이다.
14. 테이블의 그룹화 태그
<!-- 열의 그룹화 -->
<colgroup>
    <col id="test1" />
    <col id="test2" />
</colgroup>
<!-- 행의 그룹화 -->
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>

15. 제목 셀과 내용 셀의 연관성 부여 태그
<!-- scope 속성 이용 -->
<th scope="col"></th>
<th scope="row"></th>
<!-- id, headers 속성 이용 -->
<th id="publishing"></th>
<td headers="publishing"></td>
 
16. 폼 컨트롤 그룹화 태그

<form>
    <fieldset>
        <legend>필수 입력 사항</legend>
        <p>아이디 : <input type="text" id="userId" /></p>
        <p>비밀번호 : <input type="text" id="passwd" /></p>
    </fieldset>
</form>

17. label 태그
<!-- 명시적인 레이블 -->
<p><label for="userId">아이디</label> : <input type="text" id="userId" /></p>
<!-- 암묵적인 레이블 -->
<p><label>연락처 : <input type="text" id="userPhone" /></label></p>

18. 동영상 태그

<!-- 플래시 -->
<object type="application/x-shockwave-flash" data="data/banner.swf" width="306" height="125" id="banner">
      <param name="movie" value="data/banner.swf" />
      <param name="allowFullScreen" value="false" />
      <param name="quality" value="high" />
      <param name="bgcolor" value="#ffffff" />
</object>
<!-- 동영상 -->
<object id="player" height="300px" width="320px" type="application/x-oleobject" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6">
      <param name="movie" value="data/interview.wmv" />
      <param name="autostart" value="0" />
      <param name="showcontrols" value="1" />
        <!--[if !IE]> <-->
        <object height="300px" width="320px" data="data/interview.wmv" type="video/x-ms-wmv">
          <param name="autostart" value="0" />
          <param name="showcontrols" value="1" />
          <p>동영상 파일 : <a href="data/interview.wmv">두산베어스 내야수 손시헌 선수 인터뷰</a> </p>
        </object>
        <!--> <![endif]-->
</object>