HTML 코드 작성의 기준이 되는 핵심 가이드라인을 제공해보겠다.
(1) 텍스트의 제목은 h1, h2, h3 등의 태그로 계층화해서 보여준다. 가장 외곽의 제목일수록 크기가 커야 한다. HTML 기본값으로 된 크기를 CSS로 세세하게 조정이 가능하다. 대다수의 웹디자이너들은 이들 코드들의 폰트 크기를 레이아웃 기획에 맞게 세세하게 조정한다.
(2) 단락은 p를 써서 구분한다. div 태그로 전체 텍스트를 묶고 div 태그 내부에 p를 써서 단락을 묶는다.
(3) 연관된 항목을 나열할때는 ul 태그와 li태그로 순서지정없이 나열하기도 한다. 이는 CSS로 한줄로 표시되게 할 수도 있어서 이 기능으로 메뉴를 구현하기도 한다.
(4) 인용된 글처럼 좌우에 여백을 두어야 한다면 blockquote를, 소스코드처럼 다른 폰트로 보여주려면 code를 쓴다.
(5) cite 태그로 책 제목이나 뉴스 기사를 참조할때 쓴다. address 태그도 연락처 정보와 작성자 정보표시에 좋다.
(6) 텍스트나 이미지 시각적 표현은 CSS로 한다.
(7) table 태그보다 div와 span 태그를 선호해야 한다. div 태그와 다르게 특별하게 br 태그를 안쓰면 span은 한줄에 표시된다. 이를 잘 쓰면 특정 구간의 폰트에 효과를 주는 것이 가능해진다. div 태그는 position: CSS 속성이나 float: 속성 등으로 배치를 다양화할 수 있다.
(8) div를 쓸 때는 HTML5에서 제공하는 기본 레이아웃 구조를 명시하는 태그 내에 쓴다. article, section, header, footer가 그 태그들이다.
(9) 닫혀야 하는 태그면 늘 닫아야 한다. p와 /p, div와 /div와 같다. br이나 img 태그처럼 닫히는 태그가 제공이 안된 경우는 예외다.
(10) 작성한 HTML 문서를 W3C의 검증도구로 검증해서 오류나 개선사항을 확인해보는 것도 유익하다.
이 글은 인사이트에서 출간한 “세상에 없던 가장 꼼꼼한 매뉴얼” (원제: CSS3 The Missing Manual)에서 해설한 것을 바탕으로 내 표현으로 정리한 해설이다. 알고 있던 것을 점검하고 정보 제공을 위해 작성했다. 참고가 되실 것이다.