html5 구조를 만들기 위해 사용하는 태그
[header]
업체 로고나, 상호, 내비게이션, 사이트의 기타 하위 부분 등이 들어 갈수 있는 요소
굳이 페이지 상단에 오지 않아도 된다.
header 요소에는 적어도 한 개의 제목(h1~h6)이 들어 있어야 한다.
section, header, footer 요소는 절대로 들어갈 수 없다.
nav 요소도 일종의 section이므로 header안에 들어갈 수 없다.
콘텐트 요소
단락으로 묶을 때는 p요소
chapter처럼 비교적 큰 논리적 정보를 묶을 때는 div요소
(div는 단순히 자체적인 시맨틱 의미가 없는 블록 컨테이너)
html5에서는 의미에 맞게 콘텐트를 그룹으로 묶거나 구분 지을 수 있다.
[section]
html5에는 단락, 이미지, 제목 등의 콘텐트를 한 데 묶어서 더 큰 논리적 단위를 형성해 주는 section 요소가 있다.
section 요소 안에는 header나 footer를 넣을 수 있다.
body에 들어 갈 수 있는 모든 요소를 넣을 수 있다.
class나 id 속성을 적절히 사용하여 좀 더 특정한 정보도 넣을 수 있다.
section 요소가 div 요소를 대체한 것은 아니다.
section 요소는 반드시 의미가 적절할 때만 사용한다.
[article]
article은 논리상 자신이 들어 있는 페이지와 별개인 섹션이다.
section과 article요소 안의 제목
섹션은 앞의 제목 한개와 연결되므로 이러한 제한이 없어졌다.
제목 단계가 아니라 서로 포함관계를 형성하는 section 요소의 포함 깊이를 기준으로 인식된다.
새로운 방식을 사용하는 주목적은 제목을 6계층 이상 사용하기 위함.
두가지 방식이 있는 다른 이유 - 일부 브라우저, 특히 시각 장애가 있는 스크린 리더 등에 들어 있는
브라우저는 제목 계층을 사용해서 콘텐트 개요를 생성하고 이로써 각 페이지를 수월하게 탐색
[nav]
오직 메인 내비게이션 블록이 들어 있는 섹션에만 사용
단점. nav 요소로 포장해야 한다는 점(감싸야한다)
[figure]
이미지를 넣을 수 있는 figure 요소
독립적이며 주로 문서의 메인 흐름에서 단독 단위로서 참조되는 콘텐트를 마크업하는 용도
<figure>
<img src="이미지경로" alt="이미지 자체" />
<legend>이미지 캡션</legend>
</figure>
[aside]
기사나 줄거리는 주로 사이드 바 안에 관련된 부수적 콘텐트가 표시됩니다.
이런 가사나 줄거리를 지칭하는 어사이드 개념과 함께 이런 종류의 컨텐트를 마크업 할 수 있는 aside 요소가 생겨났다.
<section>
<h1>표현적 html</h1>
<aside>주저리 설명 주저리 설명</aside>
</section>
[footer]
푸터 역시 굳이 문서 끝에만 두는 법은 없다.
footer 요소에 제목, 헤더, 섹션 또 다른 푸터를 넣어도 상관이 없다.
업체 로고나, 상호, 내비게이션, 사이트의 기타 하위 부분 등이 들어 갈수 있는 요소
굳이 페이지 상단에 오지 않아도 된다.
header 요소에는 적어도 한 개의 제목(h1~h6)이 들어 있어야 한다.
section, header, footer 요소는 절대로 들어갈 수 없다.
nav 요소도 일종의 section이므로 header안에 들어갈 수 없다.
콘텐트 요소
단락으로 묶을 때는 p요소
chapter처럼 비교적 큰 논리적 정보를 묶을 때는 div요소
(div는 단순히 자체적인 시맨틱 의미가 없는 블록 컨테이너)
html5에서는 의미에 맞게 콘텐트를 그룹으로 묶거나 구분 지을 수 있다.
[section]
html5에는 단락, 이미지, 제목 등의 콘텐트를 한 데 묶어서 더 큰 논리적 단위를 형성해 주는 section 요소가 있다.
section 요소 안에는 header나 footer를 넣을 수 있다.
body에 들어 갈 수 있는 모든 요소를 넣을 수 있다.
class나 id 속성을 적절히 사용하여 좀 더 특정한 정보도 넣을 수 있다.
section 요소가 div 요소를 대체한 것은 아니다.
section 요소는 반드시 의미가 적절할 때만 사용한다.
[article]
article은 논리상 자신이 들어 있는 페이지와 별개인 섹션이다.
section과 article요소 안의 제목
섹션은 앞의 제목 한개와 연결되므로 이러한 제한이 없어졌다.
제목 단계가 아니라 서로 포함관계를 형성하는 section 요소의 포함 깊이를 기준으로 인식된다.
새로운 방식을 사용하는 주목적은 제목을 6계층 이상 사용하기 위함.
두가지 방식이 있는 다른 이유 - 일부 브라우저, 특히 시각 장애가 있는 스크린 리더 등에 들어 있는
브라우저는 제목 계층을 사용해서 콘텐트 개요를 생성하고 이로써 각 페이지를 수월하게 탐색
[nav]
오직 메인 내비게이션 블록이 들어 있는 섹션에만 사용
단점. nav 요소로 포장해야 한다는 점(감싸야한다)
[figure]
이미지를 넣을 수 있는 figure 요소
독립적이며 주로 문서의 메인 흐름에서 단독 단위로서 참조되는 콘텐트를 마크업하는 용도
<figure>
<img src="이미지경로" alt="이미지 자체" />
<legend>이미지 캡션</legend>
</figure>
[aside]
기사나 줄거리는 주로 사이드 바 안에 관련된 부수적 콘텐트가 표시됩니다.
이런 가사나 줄거리를 지칭하는 어사이드 개념과 함께 이런 종류의 컨텐트를 마크업 할 수 있는 aside 요소가 생겨났다.
<section>
<h1>표현적 html</h1>
<aside>주저리 설명 주저리 설명</aside>
</section>
[footer]
푸터 역시 굳이 문서 끝에만 두는 법은 없다.
footer 요소에 제목, 헤더, 섹션 또 다른 푸터를 넣어도 상관이 없다.
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌