Simpler is better!

표현(화면디자인)과 콘텐츠의 분리

1.      콘텐츠의 포맷을 바꾸기 위해서 인라인 형태의 style이나 <font> 태그와 같은 deprecated 된 태그 및 속성은 절대 사용하지 않는다.

l         가능한 외부 stylesheet를 사용하고, 그렇지 않으면 내장된 stylesheet를 사용한다.

l         사장된 HTML 태그 참조 URL:
http://www.codehelp.co.uk/html/deprecated.html
http://www.w3schools.com/tags/default.asp

2.      <b>나 <i> 같은 콘텐츠가 어떻게 표기되는가를 나타내는 태그 보다는, <strong> 과 <em>과 같은 콘텐츠의 중요성을 정의하는 태그를 사용하도록 노력하라. 또한 <h1> ~<h6>와 같은 heading 태그로 페이지를 구조화하고, <p> 태그로 단락을 구분하라.

l         참조 URL:
http://www.w3schools.com/tags/tag_phrase_elements.asp

3.       테이블은 데이터를 표시할 때만 사용하고, 화면 레이아웃 문제에 대한 대책으로 사용하지 마라.

l         <thead>, <tbody> 나 <caption> 같은 태그를 같이 사용하라.

l         참조 URL:
http://www.w3schools.com/html/html_tables.asp
http://www.w3.org/TR/html401/struct/tables.html

4.      테이블에 대한 대안으로 테이블의 내용을 선형적인 형태로 제공할 수 있는 대안을 사용하라.

l         일반적으로 <dl>, <dt>, <dd>와 같은 definition list 태그를 사용하여 잘 해결될 수 있다.

l         참조 URL:
http://www.w3.org/TR/html401/struct/lists.html

5.      CSS의 layout 속성을 의미있게 사용하라.

l         참조 URL:
http://naradesign.net/wp/2007/02/03/113/
http://ilmol.com/wp/css/css_dictionary/layout-display/