HTML5 기본 문서

개발/HTML 2013. 11. 21. 19:41

1. 시맨틱 (semantic)태그의 의미

-시맨틱의 단어 뜻은 의미를 부여했다는 뜻

-HTML5에서는 태그만 보고도 문서를 쉽게 이해 할 수 있도록 의미를 가지는 태그를 도입

-종류 : <header> <hgroup> <nav> <article> <section> <aside> <footer> 등

 

2. <header>
     -사이트 전체의 머리부분이 된다.
     -<head>태그와의 차이점 
             <head>태그는 문서에서 단 한번만 사용하지만 <header>는 여러번 사용 가능
     -<head>태그는 <html>태그 다음에 입력하나,<header>태그는 본문 <body>태그 안에서 사용가능 하다

 

3. <hgroup>

-<hgroup>태그는 제목과 그의 관련된 부제목을 묶어주는 역할 담당

-<header>와의 차이점

<header>태그는 페이지를 구성하기 위한 구분단위, 즉 내용에 따른 페이지 구성분류 단위이고

<hgroup>은 페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오게하는 역할을 담당

 

4. <nav>

-<nav> 네비게이션 표현을 위한 태그

-<nav>는 본문 위치에 영향을 받지 않는다, <header><footer><aside>중 어느 위치도 상관없다.

즉 <body>태그 안에는 어디든 사용할 수가 있다.

 

5. <article>

-<article>태그는 웹페이지 상에서의 실제 내용을 의미

-이 태그를 사용한 웹컨텐츠는 다른곳에 배포하거나 재사용가능

-검색엔진의 검색로봇에서는 이 태그가 사용된 컨텐츠를 배포할 수 있는 컨텐츠로 인식

 

6. <section>

-이 태그는 웹컨텐츠들을 그룹으로 묶어주는 역할 담당

-<article>태그와는 달리 <section>태그로 묶은 컨텐츠는 재배포 할 수 없다.

   단, <section>태그 안에 <article>태그를 사용할 수 있다.

   또 <article>안에 <section>사용도 가능하다

 

7. <aside>

-웹 컨텐츠 제작시 주 내용이 아닌 왼쪽이나 오른쪽에 부수적인 내용이 들어가는 부분에 사용

 

8. <footer>

-웹사이트의 저작권 정보나 저작권표기와 같은 내용이 들어가는 부분