티스토리 뷰

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, 꾸미는 목적으로 사용한다.

※ 참고 링크

- https://heropy.blog/

 

 

'Web > HTML' 카테고리의 다른 글

HTML 요소 - 인라인 텍스트 & 수정  (0) 2021.11.28
HTML 요소 - 문자 콘텐츠  (0) 2021.11.27
블럭요소와 인라인요소  (0) 2021.11.22
HTML의 문법  (0) 2021.05.08
이미지에 대한 이해  (0) 2021.05.08
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/09   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함