html5의 기본구조

안녕하세요 엔디프입니다.

이번에는 HTML5의 기본구조에 대해서 알아보도록 하겠습니다.

솔직히 조금만 관심이 있어서 책 찾아봐도 다 나오고 검색해도 친절하게 설명하고있는 곳이 많기는합니다.

저도 제 나름대로 분석하고 연구한 것을 토대로 포스팅 해보도록 하겠습니다.

HTML5가 HTML4와 다른점은

1. 의미있는 태그의 존재입니다.

쉽게 설명드려서 HTML4.01 에서

<div id="nav"><div>

라고 썼다면 이것은 html5에서

<nav></nav> or <nav id="nav"></nav>

로 바뀌었죠

의미가 없는 디브 요소가 빠지고 의미가 있는 요소들이 생기면서 html5가 좀더 웹표준에 가까워 졌다는 이야기 입니다.

<아래 그림은 html5의 기본기조도입니다.>

1. <header>는 사이트 상단을 나타냅니다.

2. <nav>는 네비게이션 을 나타냅니다.

3. 중요한건 section과 article의 관계인데요  잠시 section과 article의 관계를 알아보도록 하겠습니다. section과 article의 동일한 기능을 컨텐츠를 포함하는 의미있는 태그입니다.

article 과 section의 차이점

1. <article>은 실제로 웹페이지에서의 내용을 이야기 합니다.

article은 다른곳에서도 사용이 가능합니다.

포탈사이트들의 검색로봇은 <article>태그 안에 있으면 그 컨텐츠를 포탈에 노출시켜도 되는 컨텐츠로 인식하고 가져갑니다.

2. section요소의 특수한 형태라고 생각할수 있겠습니다.

주의를 둘러싼 콘텐츠와 별도로 독립적일수 있는 콘텐츠, 블로그, 비디오, 뉴스기사, 블로그 답글 등  

"배포할 수 있는" 콘텐츠를 마크업 하도록 만들어졌다고 합니다.

[출처] article과 section은 어떻게 사용해야 할까?|작성자 killPass

3. section은 웹 컨텐츠 여러개를 묶어서 그룹으로 묶어주는 것입니다.

article과 의 차이점은 재배포가 안됩니다.

꼭 배보플 해야한다면 section 안에 또다른 section을 넣는것도 가능합니다.

4. 이 두가지 마크업은 SEO(검색엔진 최적화)와도 연관이 있습니다. 구글 등에서 검색순위에 안정적으로 노출되기 원하신다면 html5코딩시 article 을 쓰시고 내용을 코딩하셔야 합니다. 구글 크롤링에서는 article 태그를 인식합니다.