<body>
<form>
<h3>당신이 좋아하는 동물은 무엇입니까?</h3>
<input type="radio" name="animal" value="dog" />강아지
<input type="radio" name="animal" value="cat" checked />고양이
</form>
</body>
# checked 속성 : 해당 속성이 있는 선택지가 기본적으로 선택된 상태로 실행
<body>
<form>
<select name="subjects" size="3" multiple>
<option value="1" selected>HTML5</option>
<option value="2">CSS3</option>
<option value="3">Javascript</option>
</select>
</form>
<form>
<select name="major">
<optgroup label="language">
<option selected>Korea</option>
<option>English</option>
<option>China</option>
<option>Germany</option>
</optgroup>
</select>
</form>
<form>
<label>전공 분야를 입력하세요.
<input type="text" list="majorlist" name="major" />
<datalist id="majorlist">
<option value="Software">소프트웨어</option>
<option value="Robot">로봇</option>
<option value="System">시스템</option>
</datalist>
</label>
</form>
</body>
# option : 목록을 정의
# selected : 해당 리스트가 기본적으로 선택되어 있도록 설정
# multiple : 다수 항목을 동시 선택 가능하도록 설정
# optgroup : 리스트를 묶음(그룹화)
# datalist : 추천하는 리스트를 나타냄 (input의 list 속성과 datalist의 id가 동일해야함)
<body>
<form>
<fieldset>
<legend>개인 정보 입력</legend>
<p>이름 : <input type="text" name="name"></p>
<p>학교 : <input type="text" name="school"></p>
</fieldset>
</form>
</body>
# legend : 그룹 타이틀
<head>
<meta http-equiv="refresh" content="5;url=https://www.google.co.kr/">
</head>
# content"시간;url=희망하는 url" 방식으로 작성. 위 경우 5초 후 구글 페이지로 새로고침
해당 문서의 모든 상대 URL이 사용할 기본(기준) URL을 지정합니다.
<head>
<base href="http://www.w3.org" />
</head>
<body>
<a href="international/" target="_blank">W3C INTERNAMTIONAL</a>
<a href="standards/" target="_blank">W3C STANDARDS</a>
</body>
# a tag를 클릭시 w3를 기본 url로 지정하여 international, w3 standards 페이지로 이동
area 요소와 함께 이미지 맵을 정의할 때 사용합니다.
<body>
<map name="infographic" id="infographic">
<area shape="poly" coords="130,147, 200,107, 254,219, 130,228"
href="https://developer.mozilla.org/docs/Web/HTML"
target="_blank" alt="HTML" />
<area shape="poly" coords="130,147, 130,228, 6,219, 59,107"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank" alt="CSS" />
<area shape="poly" coords="130,147, 200,107, 130,4, 59,107"
href="https://developer.mozilla.org/docs/Web/JavaScript"
target="_blank" alt="JavaScript" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info2.png" alt="MDN infographic" />
</body>
# name : 맵을 참조할 떄 사용할 수 있는 이름. 필수로 존재해야 함. id와 같이 모든 map tag에서 유일한 값을 가져야 함. id가 존재하는 경우 id와 name의 값이 동일해야 함
# shape : 이미지 좌표의 모양 (rect : 사각형 좌표, circle : 원형 좌표, poly : 다각형 좌표)
# coords : 이미지 좌표 (rect : x1,y1(시작점 좌표) x2,y2(끝점 좌표), circle : x1,y1(시작점 좌표) r(반지름), poly : x,y(시작점 좌표) ~ x,y(끝점 좌표). poly의 경우 처음과 마지막 좌표 쌍이 동일하지 않으면 브라우저는 마지막 좌표 쌍을 추가하여 다각형을 닫음)
description list · term · data. 설명 목록을 나타냅니다. dl은 dt로 표기한 용어와 dd로 표기한 설명 그룹의 목록을 포함하여 설명 목록을 생성합니다.
<body>
<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
</body>