HMTL 그립핑과 HTML5 새로운 구조에 대해서 한번 알아보겠습니다. 각 파트가 다르지만, 각 방향에 맞게 나누어서 진행해보도록 하겠습니다. HTML은 인터넷 홈페이지를 제작하는 기본 요소이며 각 요소에 대해서 어떤 기능을 하는지 알아야 합니다.
HMTL 그룹핑과 HTML5 새로운 구조
HTML 그룹핑
그룹핑 요소에는 DIV 요소와 SPAN요소가 있습니다. DIV는 블록요소이며 블록요소들을 그룹핑 하는 역할을 가지고 있습니다. SPAN 요소는 인라인 요소들이 그룹핑 하는데 적용됩니다. DIV 요소 안에 블록 요소인 UL과 address 요소가 포함되어 있습니다. 요소들 중에 문서 꼬리말의 의미를 가진 요소는 없습니다. div 요소 안에 id 속성값인 looter를 주어 의미를 부여한 것입니다. span 요소는 인라인 요소인 strong 요소와 em 요소를 포함하고 있습니다. div 요소를 이용하여 일반적인 웹 문서의 메인과 서브의 구조를 마크업할 수 있습니다.
맨 상단에 보여는 컨텐츠 바로가기는 스킵 내비게이션과 동일합니다. 시각 장애들을 위한 스크린 리더 프로그램은 웹 문서를 위에서부터 아래로 읽어주기 때문에 만약 동일한 웹 문서를 여러 번 방문했더라면 같은 내용을 처음부터 다시 들어야 하는 어려움이 발생합니다. 이러한 문제를 해결하기 위해서 반복되는 내용을 스킵하고 본문으로 가게 하는 역할이 스킵 내비게이션입니다.
HTML 새로운 구조
HTML5에서는 기존의 XHTML보다 더 구조적인 웹문서를 만들 수 있도록 지원합니다. 웹 문서의 일반적인 구조는 header, content, footer의 형식으로 구성되어있습니다. xhtml에서는 이러한 요소가 없기 때문에 header 영역인 경우 그룹화 요소인 div에 있는 id 속성을 이용합니다. 이러한 방법으로 처리한다고 하더라도 div 요소가 header의 의미를 가질 수는 없습니다.
HTML5에서는 이러한 부분을 해결할 수 있는 Header, nav, section, article, footer 요소 등의 문서 구조에 대한 요소들이 새롭게 추가되어 의미있는 마크업가능할 수 있습니다. 문법적인 구조로는 XHTML에 비해 간단해졌습니다.