1. HTML 요소들의 종류
ㅇ `기본 문서 구조`를 위한 요소들
- 기본 구조 정보 : html, head, body ☞ HTML 기본 구조 요소 참조
. html 요소 : 문서 형태 선언
. head 요소 : 문서 정보들을 나타내는 곳
. body 요소 : 문서 본문을 나타냄
- 부가 정보 제공 : base, link, meta, noscript, script, style, title
. (주로, head 요소 내 사용 가능 요소들)
.. meta 요소, title 요소, link 요소, base 요소, style 요소, script 요소 등
ㅇ `영역(섹션) 구획`을 위한 요소들 ☞ 시맨틱 요소 침조
- (웹페이지 논리 구획) : 웹페이지 전체 또는 일정 영역을 논리적인 구획으로 분할할 때 유용
. header, nav, section, article, aside, footer
- 영역(섹션) 구획 세부사항
. details (세부 설명)
. summary (요약)
. output (출력 결과)
ㅇ `컨텐츠 가독성 제고`를 위한, (내용 묶기/구분) 요소들
- 제목,표제 (Heading) : h1 ~ h6 (6 단계 구분), hgroup
- 단락 (Paragraph) : p (유사한 주제를 갖는 문자열의 묶음)
- 줄바꿈 (Newline) : br
- 수평선(또는,주제 분리) : hr (horizontal rule)
- 인용문 : blockquote
- 공간 분할
. div 요소 (block 형식으로 공간 분할, 가장 일반적이고 가독성 있는 구조 제공)
. span 요소 (inline 형식으로 공간 분할)
- 띄어쓰기 인식 가능 : pre
. html 문서는 띄어쓰기(스페이스바,탭,엔터 등)를 무시하나,
. pre 요소는 이를 그대로 출력시킴
- 기타 : figure, figcaption
ㅇ `하이퍼 링크(앵커)`를 만드는 요소
- a 요소
ㅇ `목록 형식`을 만드는 요소
- ol (ordered list), ul (unordered list), li (description list)
- dt (정의 목록), dd (정의 글자), dl (정의 설명)
ㅇ `테이블 형식`을 만드는 요소 (table 요소)
- table, tbody, td, tfoot, th, thead, tr
- col (표 열), caption (표 제목), colgroup (표 열 그룹)
ㅇ `표시 부분이 특정 의미`를 갖도록 하는 요소
- abbr (축약형 약어 표시)
- address (우편물 주소 표시)
- cite (인용 작품 제목)
- code (컴퓨터 코드)
- dfn (용어 정의)
- kbd (키보드 입력임을 표시)
- q (짧은 인용구 표시)
- samp (프로그램 샘플 코드)
- var (변수 표시)
- 강조 (중요 내용 표시)
. strong (강한 강조) : 통상, 굵은 글꼴체
.. 해당 컨텐츠가 강한 중요성,심각성,긴급성을 갖고 있음을 가리킴
.. 단지 주의를 끄는 굵은 글꼴체가 아님
. em (EMphasis, 약한 강조) : 통상, 기울임체
.. 주위 텍스트에 비해 강조되도록(눈에 띄도록) 함
.. 단어 하나 혹은 몇 개로 제한됨
ㅇ `글자/단어/구문에 스타일링`을 주는 요소 ☞ CSS 텍스트 참조
- b (강조)
- i (이탤릭체/기울어진 글자)
- s 또는 del (수평 취소선)
- small (작은 글자)
- sub (아래 첨자)
- sup (위첨자)
- u 또는 ins (밑줄)
ㅇ `멀티미디어` 요소
- 플러그인 없이 웹브라우저가 직접 지원
. 비디오 : video 요소
. 오디오 : audio 요소
- 한편, 기존 플래시 처럼 플러그인을 통해 랜더링시키는 마크업/태그 : embed, object
ㅇ `이미지` 요소 : img 요소
ㅇ `입력 양식`을 만들기 위한 요소 ☞ 폼 요소 (form 요소) 참조
- fieldset, form, input, button, select, label,legend, textarea
- 폼 레이블 컨트롤 : label
- 폼 컨트롤 그룹핑 : fieldset (그룹핑 기능), legend (그룹핑에 대한 주석)
ㅇ `스크립트` 요소 : script 요소
- 기본적으로 script 태그 내 내용을 자바스크립트 코드로 해석함
ㅇ 기타 요소들
- area
- bdi, bdo
- canvas, command
- datalist
- iframe
- keygen
- map, mark, menu, meter
- option
- param, progress
- rp, rt, ruby
- time, track
- wbr
3. [참고사항]
ㅇ 블록 요소(태그) 및 인라인 요소(태그) 구분 ☞ CSS 박스 모델 참조
- 블록 요소 : p, h1~h6, div, ol, ul 등
- 인라인 요소 : a, span, img 등