본문 바로가기
Development/HTML

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

by Dev. Jkun 2013. 5. 29.
반응형

출처 : 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<sup>2</sup> + 4x + 4 = (x+2)<sup>2</sup>



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

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

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


반응형

댓글