Web/HTML
HTML 요소 - 컨텐츠 구분
투런포
2021. 11. 22. 19:37
반응형
HTML 요소
html
- 문서의 범위를 설정한다.
head
- 문서의 정보
- HTML의 문서 제목을 쓸 수 있다. ex) <title>HTML 제목 </title>(title tag)
- 기타 정보 (meta tag) ex) <meta charset="UTF-8">(인코딩 방식), <meta name="author" content="홍길동">
- 스타일 직접 입력
- 스타일 외부에서 가져와서 연결 ex) <link rel="stylesheet" href="./main.css">
body
- 문서의 구조
컨텐츠 구분
header
- 일반적으로 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함한다.
- header, footer는 후손이 될 수 없다.
footer
- 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 포함한다.
- header, footer는 후손이 될 수 없다.
h1 ~ h6
- 6단계의 구획 제목을 나타낸다.
- 글씨 크기를 위해 제목 태그를 사용하면 안된다. 대신 css의 font-size 속성을 사용해야한다.(구조를 잡는데 사용)
- 순차적으로 사용하는 것을 권장한다.
- 한 페이지에 하나 사용을 권장한다.
main
- 문서의 핵심주제나 애플리케이션의 핵심 기능성에 대한 부연, 또는 직접적으로 연관된 컨텐츠들로 이루어진다.
- 문서 전체에서 하나만 존재 해야 한다.
- 인터넷 익스플로어에서 사용 불가능하다.
article
- 독릭접으로 구분되거나 재사용 가능한 영역을 설정한다.
- 일반적으로 <h1>~<h6>를 포함하여 식별한다.
- 작성일자와 시간을 <time>의 datetime 속성으로 작성한다.
section
- 문서의 일반적인 영역을 설정한다.
- 일반적으로 <h1>~<h6>를 포함하여 식별한다.
aside
- 문서의 별도 컨텐츠를 설정한다. (보통 광고나 기타 링크 등의 사이드바를 설정한다.)
nav
- 다른 페이지 링크를 제공하는 영역을 설정한다.
- Navigation, 보통 메뉴(Home, About, Contact), 목차, 색인 등을 설정한다.
address
- <body>, <article>, <footer> 등에서 연락처 정보를 제공하기 위해 포함하여 사용한다.
div
- 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정한다.
- Division, 꾸미는 목적으로 사용한다.
※ 참고 링크