html 문서 구조화 요소 명칭과 역활

html문서를 보면 이래와 같은 문서 구조를 갖추고 있어요.

웹 문서의 소스를 보는 방법은 매우 간단합니다. 소스가 보고 싶은 페이지를 열고 F12버튼을 누르면 해당 페이지에 대한 html 소스를 확인할 수 있어요.

 

 

이러한 구조를 갖추어서 코딩해야 하는 이유는 검색엔진, 반응형레이아웃 등을 컴퓨터가 문서의 구조와 내용을 파악해야 하기 때문이죠.  

 

● 머릿말 : header요소

웹문서 페이지 혹은 섹션의 머리말 영역을 나타낼때 사용하고 들어가는 내용들에는 웹문서의 제목, 소개 등 문서 관련 설명등이 있어요.

 

● 탐색메뉴 : nav요소

현 문서에서 다른 페이지 혹은 같은 페이지 이동을 할 수 있는 링크로 구성된 섹션을 표현합니다.

 

● 독립된 본문 : article

웹문서에서 주요 내용을 가진 독립된 컨텐츠를 나타냅니다.  잡지나 신문의 기사일 수도 있으며, 블로그의 글이나 사용자가 올린 의견이나 상호작용적인 위젯이나 가젯 또는 다른 어떤 독립적인 아이템등이 될 수 있습니다.

 

● 문서내 섹션 : section

section요소는 문서나 응용프로그램의 일반적인 섹션을 표현합니다. 제목으로 시작하는 컨텐츠를 의미적으로 그룹핑하기 위해 사용되며 section요소를 사용할 수 있는 예로는 챕터나 탭으로 구분된  대화상자에서 탭된 페이지, 또는 논문의 번호가 매겨진 색션이 될 수 있습니다.

 

● 부수정보 : aside

aside요소는 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있으며 주로 사이드바 형태로 구성됩니다.

 

●  꼬리말 : footer

footer요소는 주로 저작권 정보나 서비스 제공자 정보등을 나타냅니다.  주로 하단에 위치하고 주소, 연락처, 카피라잇등의 정보를 담고있습니다.

 

footer영역

 

머릿속으로는 개념을 알듯하면서 남에게 설명을 못한다면 제대로 이해하고 있는게 아닌거겠죠? 제가 바로 그렇습니다.

열심히 공부해야겠어요ㅠㅠ