[HTML] 마크업할때 웹표준을 준수하는 방법

왜 웹표준이 중요할까?
만약 내가 홈페이지를 하나 열심히 만들었는데
웹표준이 아닌 경우라면 사용성이 떨어져서 안타깝게도 이 세상에서 금방 소멸될지도 모른다.
내가 만든 페이지가 오래 지속되기 위해서는 웹표준을 잘 익혀서 만들어야 한다.
우선 웹표준을 잘 지키기 위해서는 요소에 대한 이해가 필요하다.

요소란 무엇일까

태그란 '<'와 '>'로 둘러싸인 시작(<p>)과 종료 태그(/p)의 형태이고,
속성은 id, class, type 등과 같이 이름 그대로 속성값을 지정하며,
요소란 시작 태그와 종료 태그를 포함한 뭉테기를 말한다.

요소의 두 가지 형태

1. 블록 요소
: 블록의 모양처럼 영역이 가로 끝까지 차지하며 줄바꿈된 형태(한줄 다 차지)를 말하는 요소 
ex) h1~6, p, div 등

 <div> div입니다. </div> <!-- css 배경색 부여 -->
 <h1> h1입니다. </h1> <!-- css 배경색 부여 -->

div입니다.                                                    (맨 끝까지)
h1입니다.                                                     (맨 끝까지)


2. 인라인 요소
: 줄바꿈이 없이 해당 요소의 내용만큼만 자리를 차지하는 요소
ex) strong, a, span 등

 <strong> strong입니다. </strong>
 <span> span입니다. </span> <!-- css 배경색 부여 -->

strong입니다. span입니다.

 

웹 표준의 준수

1. 열고 닫는 태그를 온전히 닫아 줄 것.

<p><span>...</span></p> // 옳은 표현
<p><span>...</span> // 틀린 표현

2. 블록 요소를 인라인 요소에 넣지 말 것.

 <span>
   <div></div>
 </span>
 // 틀린표현

 <div>
  <span></span>
 </div>
 // 옳은표현

div, span은 모두 아무 의미가 없는 요소이며,
div는 의미없는 블럭 요소, span은 의미없는 인라인 요소라고 부른다.
이들은 레이아웃을 정하거나, 그룹을 만들거나, class로 이름을 붙여 css를 조절하기 위해 사용하고 인라인 요소 안에 블록 요소를 넣는 것은 비표준이라고 볼 수 있다.

3. HTML5의 블록 요소 / 인라인 요소 태그 리스트

블록 요소 태그 리스트
adress, article, aside, audio, blockquote, canvas, dd, div, dl, 
fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, 
header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video


인라인 요소 태그 리스트
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, 
input, kbd, label, map, object, q, samp, small, script, select, 
span, strong, sub, sup, textarea, tt, var

* 웹표준은 인라인 요소, 블럭 요소를 잘 구분해서 사용하면 대부분 준수