본문 바로가기

HTML 태그

Modified Date: 2015-05-22

문서 정보 요소

Doctype

  • HTML5
  • HTML은 해당 DTD의 명세에 맞게 작성하며, W3C validation을 통과해야 한다.

인코딩

  • UTF-8
  • IE의 title 버그를 고려하여 title 보다 인코딩 선언을 먼저 한다.

언어코드

  • HTML 태그에 lang을 이용하여 언어코드를 설정한다.
    ex) <html lang=”en”>

head

  • meta, link, style, script, title 순서로 선언한다.
  • script는 jquery등 우선 호출되어야하는 library를 제외하고는 </body> 앞 쪽에 선언한다.

meta

문서의 기본 인코딩, Cache(필요할 경우에만), 스타일 형식, 스크립트 형식, keywords, description 순서로 엘리먼트를 선언한다.

코드 예시

<meta charset="UTF-8">
 <meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, target-densitydpi=medium-dpi" />
 <meta name="description" content="페이지 설명" />
 <meta name="keywords" content="페이지 키워드(쉼표로 구분)" />
 <link rel="stylesheet" id="ID" href="URL" type="text/css" media="all" />
 <script type="text/javascript" src="URL"></script>
 <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 <title>페이지 제목</title>

title

  • 페이지 타이틀의 사이트내 고유한 제목이여야 한다.
  • 해당 페이지의 핵심과 가까운 내용부터 표시하며, SEO(search engine optimization) 방침에 따라 변경될 수 있다.

link

rel, id, href, type, media 순서로 선언한다.

script

type, src 순서로 선언한다. language 속성은 사용하지 않는다.

콘텐츠 요소

form

label

  • 접근성 보장을 위하여 입력 양식에는 반드시 label을 사용한다. 단, 검색 양식 등 관습적으로 label을 빼는 경우에는 생략이 가능하다.
  • for 값은 연관 input의 id 값과 동일한 이름을 사용한다.

fieldset

폼 컨트롤의 자식 노드로 선언하여, 폼 컨트롤 엘리먼트 중 의미나 맥락상 함께 사용될 요소들을 묶는 용도로 사용한다.

input

  • label 엘리먼트와 함께 사용하며, 분할 입력의 경우 title을 사용한다.
  • image 타입의 항목은 alt 속성에 대체 텍스트를 함께 제공한다.
  • text 타입의 항목은 type, id, title, value, accesskey 순서로 선언한다.

table

  • 레이아웃을 표현하기 위해 사용하지 않는다. 데이터를 표현하기 위해서만 사용한다.
  • border=”1″ 을 선언하여, CSS를 지원하지 않는 환경에서도 표의 테두리가 표시되도록한다.
  • cellpadding은 선언하지 않고, CSS에서 셀 여백을 초기화한다.

caption

화면 출력 여부와 관계없이 반드시 사용한다. 표의 제목을 기입한다.

col, colgroup

표현 형태에 대한 값을 직접 입력하지 않는다. 필요하다면 CSS를 적용한다.

th

scope, abbr 순서대로 선언, scpoe 는 필수적으로, abbr은 콘텐츠에 따라 선택적으로 사용한다.

a

href, target, title 순서로 선언한다.

iframe

가급적 사용하지 않는 것을 원칙으로 하나, 부득이 사용할 경우 src, width, height, title, frameborder, marginwidth, marginheight, scrolling 순서로 선언한다. title에 프레임 내용을 반드시 표기한다.

img

  • src, width, height, title, alt, usemap 순서로 선언한다.
  • src와 alt 속성은 절대 생략될 수 없다.
  • 태그 내에 이벤트 핸들러를 사용할 수 없다.

댓글 쓰기