시멘틱 태그
시멘틱(semantiv: 의미가 통하는) 요소(element)는 레이아웃을 구분하는 태그로,
이를 사용해서 웹사이트의 구조를 나눌 수 있으며, 그 각각의 주요 태그가 표준화 돼있다.
(물론 <body>와 </body>안에 들어가며, 문서의 기초 레이아웃을 나눈다.)
(예전 html4에서는 <div>태그를 이용해서 id속성으로 header, content, footer등을 구분해 구조를 짰지만, 시멘틱 태그를 이용하면 더 낫다.)
- <header> 태그 : 머리말, 제목
: 문서레이아웃에서 제목부분을 차지하거나, <article>같은 다른 시멘틱 태그안에서 제목부분으로 사용될 수 있다.
(<head> != <header>)
- <nav> 태그 : 내비게이션 링크(문서 연결)
: 문서를 사이트간에 연결하는 링크부분, 네이게이션이라고 함.
주로 메뉴로 사용되며, 독립해서든 시멘틱태그 안에 포함되는 위치 영향을 받지 않고 사용된다.
- <iframe> 태그 : 외부 문서 삽입
: 말그대로 inline frame(인라인 프레임)이라는 뜻으로, 웹문서안에서 다른 웹문서를 표시할때 사용
<iframe src="삽입할외부문서의주소"></iframe>
추가로 다른 <iframe>의 속성에는,
| 속성명 | 설명 |
| width | 너비(px) |
| height | 높이(px) |
| name | 이름 |
| seamless | 테두리 없에기(속성값 없이 사용) |
가 있다.
- <section> 태그 : 콘텐츠 영역
: <header>, <footer>처럼 콘텐츠 영역에 대해서 구분지어주는 태그.
독립해서, 시멘틱태그 안에서, 아니면 <section>태그 안에 중첩되서, <article>태그 안에서도 사용될 수 있다.
<article>태그와 비슷한데, <section>는 콘텐츠 내용을 분류해주는 역할(기능상 구분)만 하지, 실제 내용은 <article>태그에서 들어간다.
- <article> 태그 : 실제 콘텐츠 내용
: 레이아웃상의 분류(기능상 구분)가 아니라, 실제 내용의 콘텐츠(내용상의 구분)가 들어있는 태그.
실질적인 내용이나 콘텐츠를 묶어서 넣게 된다. <section>과는 다르다.
- <aside> 태그 : 본문 이외의 내용 (사이드바)
: 광고나 사이드바 같은 본문 이외의 내용을 담고 있는 태그.
왼쪽, 오른쪽이나 하단에 표시되는 기타 내용들이 이에 속함, 필수 요소가 아니기에 필요할 경우만 사용됨.
- <footer> 태그 : 하단 정보 내용
- 태그 : 사이트 관련 정보
- : 화면 구조의 맨 아래에서 제작정보와 저작권등이 표시되는 영역의 태그.
레이아웃상의 구분을 지어주는 태그기에, 이안에서도 <section>, <article>같은 레이아웃 태그를 사용할 수 있다. - <div> 태그는?
div태그는 html5에서도 중요하게 사용됨, 콘텐츠를 묶어서 스타일(CSS)이나 스크립트등을 적용시킬때 요긴함.
웹브라우저 버전을 고려
오래된 버전에서는 지원하지 않으니 고려해서 사용할 것,
자세한 내용은 HTML5 shiv 사용법을 참고.
'웹(Web) > HTML5' 카테고리의 다른 글
| 1-2. HTML 문서의 구조, html, head, body태그 (0) | 2020.05.02 |
|---|---|
| 1-1. HTML이란, HTML상식, 기본 문법과 주요 태그, 특수기호 표기 (0) | 2020.05.02 |
