지금까지는 이전버전의 html에서 사용되던 방법으로 구조잡는 연습을 했습니다.
이제부터는 html5버전의 웹표준에 맞춰서 코딩하는 연습을 해 보고자 합니다.
html5는 시멘틱태그를 활용하여 코딩된다고 합니다.
물론 이전에 사용되던 방식을 사용해서 코딩해도 웹이 동작하는데 있어서는 전혀 문제가 없습니다.
하지만 웹페이지를 만든다는것은 곧 누군가에게 보여주기위함이고,
html5 방식을 사용해서 코딩하면 네이버 봇, 구글 봇 등 컴퓨터 친화적으로 우리 웹페이지의 데이터를 전송 할 수 있습니다.
이 말은 즉 검색을 통해 노출 될 확률이 높아진다는 것을 의미하기도 합니다.
또한 웹표준에 맞춰 코딩을 하면 접근성을 향상시킬수 있습니다.
일반인은 물론 장애우께서도 음성정보등을 통해 웹 사이트를 방문 하실 때 어려움이 없도록 하는것도 웹코딩의 필수 요소라 생각합니다.
웹사이트는 보통 크게 헤더<header>, 섹션<section>, 푸터<footer>로 구성된다.
헤더<header>구역에는 로고, 내비게이션 등 보통 페이지에서 제일 위에 나타나는 구역이다.
<header id="header">
<h1>로고입니다.</h1>
<!--내비게이션 태그-->
<!--header 내부에서만 사용-->
<nav>
</nav>
</header>
header 구역 내부에서만 쓸 수 있는 <nav>태그는 내비게이션을 만들어두는 구역이다.
nav안에는 <ul>,<li>등 리스트 태그와 <a>태그를 활용해 내비게이션을 꾸밀 수 있다.
섹션<section>구역은 홈페이지의 컨텐츠들이 담기는 구역이다.
<!--메인이미지-->
<section id="main_img_area">
</section>
<!--내용-->
<section id="contents">
<!--content가 들어갈 section에서만 사용-->
<article id="banner_box">
</article>
<article id="notice">
<!--작은 콘텐츠 단위 제목영역 선언-->
<header></header>
<!--작은 콘텐츠 내용영역 선언-->
<section></section>
<!--작은 콘텐츠 하단영역 선언-->
<footer></footer>
</article>
<article id="news"></article>
<article id="service"></article>
<article id="product"></article>
</section><section>은 여러번 사용 할 수 있으며, <section> 내부에서만 사용할 수 있는 <article>태그도 있다.
<article>은 섹션내부에서만 사용 할 수 있으며, 섹션에서 세부적인 구역을 나누는 태그이다.
이 <article> 안에서도 또 <header>, <section>, <footer>구역을 선언해서 중첩으로 사용 할 수 있다.
푸터<footer>구역은 페이지 하단의 저작권, 주소, 연락처 등의 정보 표시 역할을 하는 구역이다.
<!--하단-->
<footer id="footer">
<!--footer 하단 주소 등 사이트 및 회사정보 표현하는 태그-->
<address>
</address>
</footer>이또한 마찬가지로 <footer>태그를 통해 사용하며 주소를 나타낼 수 있는 <address> 태그가 있습니다.