HTML5 시맨틱 태그

 

header 머리말 

- 사이드 전체의 제목 부분이 될 수도 있고, 본문의 제목 부분이 될 수도 있음

- 주로 페이지 맨 위쪽이나 왼쪽에 삽입

- <form> 태그를 사용해 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣음

 

header 부분 홈화면(새로고침), 검색창 등 <div>로 따로 묶어서 설정 가능

 

 

<nav> 내비게이션 링크

- 같은 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 나타냄

- 내비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에서도 사용됨

 

<nav> 태그 안에 메뉴를 만듬

 

 

<nav> 태그안에 메뉴를 만들어서 메뉴 클릭시 url로 이동되게 만듬

 

 

 

 

<section> 주제별 콘테츠 영역

 - 주제별로 콘테츠를 묶을 때 사용

 - 섹션 제목을 나타내는<hn> 태그가 함께 사용됨

<article> 콘테츠 내용

 - 웹 상의 실제 내용

 - 태그 적용 부분을 떼어내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘테츠

 

<section> 사용 예제

<article> 사용 예제

 

이 두개는 아직 정확하게 구별되지 않고 사용되고 있음 ( 본문내용에서 사용 ) 

 

 

 

 

 

<aside> 본문 이외의 내용

- 본문 내용 외에 주변에 표시되는 기타 내용들

- 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때 사용

 

<aside> 사용예제

 

 

 

<iframe> 외부 문서 삽입

- 본문 내용과 상관없이 따로 만듬

- 문서 안의 또 다른 문서를 넣고 싶을 떄 사용

- 프레임의 나타날 내용을 수정하기 위해서 문서 전체를 수정할 필요없이 이 아래에 들어가는 외부 문서만 수정을 하면

  이 iframe 자리에 수정된 내용이 나옴

 

 

<iframe> 사용예제

 

 

 

<footer> 제작 정보와 저작권 정보

 - 사이트 제작자의 연락처 정보와 저작권 정보를 표시 

 - <address>태그랑 보통 같이 사용 됨

 

<footer> 사용예제

 

 

 

<address> 제작자 정보와 연락처 정보 

 - 사이트 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보

 - 웹 사이트와 관련된 우편 주소 ( 단순 우편 주소는 <p> 태그 이용 )

<address> 사용예제

 

 

 

 

 <div> 주로 콘텐츠를 묶어 시각적 효과를 적용할 때 즉 콘테츠에 CSS를 적용할 때 사용

 

 

 

IE8 이하 버전이나 시맨틱태그를 지원 안하는 브라우저에서도 사용되게 하는 법

 

https://github.com/aFarkas/html5shiv js 파일 다운로드

 

url 클릭 후 밑으로 내리다가 보면 있음

 

설치 후 압축 해제 해당 위치 해당 파일 사용 // 만들고 있는 웹사이트 특정 폴더에 옮기기

 

 

js폴더안에 html15shiv.js 파일 둠