HTML5 기본 구조
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>
-웹사이트의 저작권 정보나 저작권표기와 같은 내용이 들어가는 부분
'홈페이지제작 > HTML' 카테고리의 다른 글
| [HTML기초] 표만들기 (0) | 2018.03.09 |
|---|---|
| iframe 태그 사용법과 유튜브 동영상 삽입하기 (0) | 2018.03.07 |
| [HTML] 홈페이지에 오디오 삽입 방법 (0) | 2018.02.06 |
| HTML은 무엇인가? (0) | 2018.02.06 |
| [블로그에 파비콘 달기] 파비콘 만들고 적용하기 (0) | 2018.01.29 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.