- 9/20 화요일
어제(월요일) 강사님 개인 사정으로 휴강이였다.
오늘은 html5를 배웠다. 그래서 semantic tag에 대해서 정리를 해보았다.
Semantic tag
시맨틱(semantic)태그의 의미
- 시맨틱(semantic) = 의미를 부여 했다는 뜻
- HTML5에서는 태그만 보고도 문서를 쉽게 이해 할 수 있도록 의미를 가지는 태그를 도입, 이것을 시맨틱 태그라한다.
<header>, <hgroup>, <nav>, <article>, <section>, <aside>, <footer> 등semantic 태그의 종류
1. <header>
- 사이트 전체의 머리부분이 된다.
- <head>태그와의 차이점:
- <head>태그는 문서에서 단 한 번만 사용할수 있고,
<header> 태그는 여러 번 사용할 수 있다.
- <head>태그는 <html>태그 다음에 입력하나,
<header> 태그는 본문 즉 <body>태그 안에서 사용가능하다.
2. <hgroup>
- <hgroup>태그는 제목과 그와 관련된 부제목을 묶어주는 역할.
- <header>와의 차이점:
- <header>태그는 페이지를 구성하기 위한 구분단위, 즉 내용에 따른 페이지 구성분류단위,
<hgroup>은 페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오게 하는 역할을 담당.
3. <nav>
- <nav>태그는 네비게이션 표현을 위한 태그이다.
- <nav>는 본문 위치에 영향을 받지 않는다.
<header><footer><aside>중 어느 위치도 상관없다.
즉, <body>태그 안에는 어디든 사용할 수가 있습니다.
4. <article>
- <article>태그는 웹페이지 상에서의 실제 내용을 의미한다.
- <article>태그를 사용한 웹컨텐츠는 다른 곳에 배포하거나 재사용할 수 있다.
- 검색엔진의 검색로봇에서는 <article>태그가 사용된 컨텐츠를 배포할 수 있는 컨텐츠로 인식한다.
5. <section>
- <section>태그는 웹컨텐츠들을 그룹으로 묶어주는 역할을 담당한다.
- <article>태그와는 달리 <section>태그로 묶은 컨텐츠는 재배포 할 수 없다.
- 단, <section>태그로 내용을 묶은 후 그 안에서 <article>태그를 사용할 수 는 있다.
- <section>태그로 내용을 묶은 후 그 안에서 또 다른 <section>태그를 사용할 수 있다.
6. <aside>
- 웹컨텐츠 제작시 주 내용이 아닌 왼쪽이나 오른쪽에 부수적인 내용이 들어가는 부분을 <aside>태그로 표현한다.
7. <footer>
- <footer>태그는 웹사이트의 저작권 정보나 저작권표기와 같은 내용이 들어가는 부분이다.
손체리