1. 이미지를 a태그로 감쌀 때
<a href="products.html">
<img src="icon.gif" alt="" />
Products page
</a>
2. TABINDEX의 순서는 논리적 순서대로 설정
3. map태그의 이미지에 사용되는 alt=””
<img src="welcome.gif" usemap="#map1" alt="Areas in the library. Select an area for more information on that area." />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference" />
<area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab" />
</map>
alt 속성을 가진 area 요소 확인. alt 속성에 의해 명시된 대체 텍스트가 area 요소에 의해 참조되는 이미지맵의 일부 이미지와 동일한 목적으로 제공되는지 확인.
4. Html에 title요소 넣기
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The World Wide Web Consortium</title>
</head>
<body>
...
</body>
</html>
5. 약어 ex>www / 사용시 abbr태그
<p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>
6. title로 링크 태그에 부가 설명 추가
a태그는 링크 요소가 있을 경우 text를 사용해 링크의 목적을 서술해야 함.
만약 text로 잘 설명되어있다면, a태그 안에 img요소 있다 하더라도 alt=""처럼 설명을 비워두어도 됨
<a href="http://example.com/subscribe.html" target="_blank" title="link opens in new window">
Subscribe to email notifications about breaking news
</a>
링크의 목적 확실히
<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html"
title="Read more about failed elephant evacuation">
Evacuation Crumbles Under Jumbo load
</a>
<a href="help.html" target="_blank">Show Help (opens new window)</a>
7. Table에 cation 추가
<table>
<caption>Schedule for the week of March 6</caption>
...</table>
8. table의 Id와 headers
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
9. label이 어떤 버튼을 향하고 있는지
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
라디오버튼
<input type="radio" name="flavor" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label><br/>
10. 인용 / cite는 출저 / blockqute는 인용문
<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p> - 출저
<blockquote> - 인용문
<p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
hedges, and, guided by the sense of smell, would find the first violets and lilies.
There, too, after a fit of temper, I went to find comfort and to hide my hot face
in the cool leaves and grass.</p>
</blockquote>
11. <html lang=”ko”>
12. 한 페이지 안에 무조건 h태그 하나는 있어야
13. Fieldset
<fieldset>
<legend>The play <cite>Hamlet</cite> was written by:</legend>
<input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
<label for="shakesp">William Shakespeare</label><br />
<input type="radio" id="kipling" name="hamlet" value="b">
<label for="kipling">Rudyard Kipling</label><br />
<input type="radio" id="gbshaw" name="hamlet" value="c">
<label for="gbshaw">George Bernard Shaw</label><br />
<input type="radio" id="hem" name="hamlet" value="d">
<label for="hem">Ernest Hemingway</label><br />
<input type="radio" id="dickens" name="hamlet" value="e">
<label for="dickens">Charles Dickens</label>
</fieldset>
14. select태그
<label for="month">Month:</label>
<select name="month" id="month">
<option value="1">January</option>
<option value="2"> February</option>
...
<option value="12">December</option>
</select>
15. 선택목록 그룹화
<form action="http://example.com/prog/someprog" method="post">
<label for="food">What is your favorite food?</label>
<select id="food" name="food">
<optgroup label="Fruits">
<option value="1">Apples</option>
<option value="3">Bananas</option>
<option value="4">Peaches</option>
<option value="5">...</option>
</optgroup>
<optgroup label="Vegetables">
<option value="2">Carrots</option>
<option value="6">Cucumbers</option>
<option value="7">...</option>
</optgroup>
<optgroup label="Baked Goods">
<option value="8">Apple Pie</option>
<option value="9">Chocolate Cake</option>
<option value="10">...</option>
</optgroup>
</select>
</form>
16. 멀티선택요소
<form action="http://example.com/prog/someprog" method="post">
<label for="related_techniques"><strong>related techniques:</strong></label>
<select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
<optgroup label="General Techniques">
<option value="G1">G1: Adding a link at the top of each page ... </option>
<option value="G4">G4: Allowing the content to be paused and restarted ... </option>
<option value="G5">G5: Allowing users to complete an activity without any time... </option>
<option value="G8">G8: Creating an extended audio description for the ... </option>
<option value="G9">G9: Creating captions for live synchronized media... </option>
<option value="G10">G10: Creating components using a technology that ... </option>
</optgroup>
<optgroup label="HTML Techniques">
<option value="H2">H2: Combining adjacent image and text links for the same ... </option>
<option value="H4">H4: Creating a logical tab order through links, form ... </option>
<option value="H24">H24: Providing text alternatives for the area ...
</option>
</optgroup>
<optgroup label="CSS Techniques">
<option value="C6">C6: Positioning content based on structural markup... </option>
<option value="C7">C7: Using CSS to hide a portion of the link text... </option>
</optgroup>
<optgroup label="SMIL Techniques">
<option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
<option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
<option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
</optgroup>
<optgroup label="ARIA Techniques">
<option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
<option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
<option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
<option value="ARIA4">ARIA4: Using WAI-ARIA to programmatically identify form ... </option>
</optgroup>
<optgroup label="Common Failures">
<option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
<option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
<option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images ... </option>
<option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
</optgroup>
</select>
</form>
17. title요소로 정보제공
<label for="accNum1">Account number: </label>
<input id="accNum1" type="text" size="10" value="" title="Your account number
can be found in the top right-hand corner of your bill." />
18. 필수 상태 나타나기 위한 별표
CSS:
.req {font-size: 150%}
HTML:
<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label>
<input type="text" name="firstname" id="firstname" />
19. 라디오버튼 / 체크박스의 필수 상태
라디오버튼과 체크박스는 다른 상호 작용 컨트롤과는 다르게 각각의 라디오버튼과 체크박스로 부터 필수 상태가 필요한 것이 아니라 그룹에 대한 필수 상태가 필요하다. 보기에서 사용된 방법은 라디오버튼 과 체크박스에 1-3이 적용되지만, 필수 상태를 나타내기 위해서는 label 요소 대신 legend 요소에서 해야 한다.
예제 코드:
<fieldset>
<legend>I am interested in the following (Required):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>