웹표준가이드(3) / 올바른 마크업을 위한 준수사항

출처 : http://blog.naver.com/maglitt/60052954929

01 / 무분별한 table의 사용금지

 

 

 

02 / 잘못된 위치, 태그, 스크립트 사용

• form태그 tr태그 사이에 넣지 않기
• ⇒ 오류의 원인 (form태그의 공배해결을 위해)
• ⇒ 해결책 form {margin:0;}
  
  
• form submit 자바스크립트로 하지 않기
• ⇒ 잘못된 표현예 <a href="javascript:search()"><img src="test.gif" /></a>
• ⇒ 해결책  <input type="submit" /> 혹은 <input type="image" />
  
  

  <form action="/search/" method="get" onsubmit="validation(this)"> <div class="search"> <select> <option>제목</option> <option>내용</option> <option>작성자</option> </select> <input type="text" size="10" class="type-text" /> <inpyt type="image" src="button_search.gif" alt="검색" /> </div> </form>

 

 

 

03 / 올바른 그룹요소의 사용 (div, span)

• div등 일부 태그를 table 대용으로 사용하지 않도록 한다. (의미에 맞는 태그사용)
• block / inline 예
• block 요소 ⇒ <div>, <form>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>
• inline 요소 ⇒ <span>, <a>, <img>, <slect>, <input>

 

 

 

04 / 표제의 사용(Heading)

• <h1>~<h6> 문서내 가장 중요한 제목을 <h1>에서 부터 차례대로 하위 heading 지정
• <h1> 하위 heading은 <h3>로 건너띄어서는 안된다.

 

 

 

05 / 올바른 문단작성을 위한<p>태그

• <p>올바른 문단작성을 위해 P태그 사용해라</p>
• <p>태그는 inline요소만을 포함할 수 있다.⇒

 

 

 

06 / 구문을 분리해서 사용하라 (em,strong,dfn,code,samp,kbd,var,cite,abbr,acronym)

• 의미에 있어 강조(em, strong)
• <em> ⇒ 이탤릭체로 표현
• <strong> ⇒ 볼드체로 표현
• <i> 또는 <b> 단순히 표현을 이탤릭이나 볼드로 표현 
• <i> 이탤릭
• <b> 볼드
  
  
• 용어정의를 나타는 <dfn>
• <dfn> DDR(dial-on-demand routing) </dfn> 이란 어쩌구 저쩌구....
  
  
• 코드표현 <code>
• <code> ⇒ 컴퓨터 코드를 나타냄
• <samp> ⇒ 코드의 결과 출력물을 나타냄
  
  
• 값을 표현하는 <kbd>
• <kbd> ⇒ 유저키보드 입력
• <kbd>Enter</kbd>키를 누르세요.
• <var> ⇒ 프로그램에서의 변수선언
  
  
• 인용이나 출처를 나타내는 <cite>
  
  
• 축약을 표현하는 <abbr>, <acronym>
• <abbr> ⇒ 축약어(한글자씩 읽음) ⇒ who(w.h.o로 한글자씩 발음)
• <acronym> ⇒ 두문자어(약어를 그대로 발음) ⇒ Dom(돔으로 발음)
  
  
• 인용문구표현하는 <blockquote>, <q>
• <blockquote> ⇒ block요소
• <q> ⇒ inline요소
  
  
• 첨자 <sup>, <sub>
• x² + 4x + 4 = (x+2)²

07 / 추가 및 삭제 <ins>, <del>

• 문서에 <ins>새로 추가</ins>되거나 <del>삭제된 내용</del>을 표시 할 수 있습니다.
• <ins> 밑줄로 표시
• <del> 취소선으로 표시

08 / 리스트항목 <ul>, <ol>, <dl> 

• <ul></ul>
• 하위로 <li></li>를 가진다.
• 앞에 불릿이 붙는다.
  
  
• <ol> </ol>
• 하위로 <li> </li>가 붙는다.
• 앞에 자동적으로 숫자가 붙는다.
  
  
• <dl></dl>
• 하위에 <dt><dd>를 가진다.
• <dt> ⇒ term을 담는다.
• <dd> ⇒ definition을 담는다.

  [출처] 웹표준가이드(3) / 올바른 마크업을 위한 준수사항|작성자 마그리뜨