개요
HTML 문서를 구성하는 요소들을 카테고리별로 묶어 핵심 의미와 사용 시점을 빠르게 파악하는 참고서 시맨틱 마크업과 접근성, SEO에 직접적인 영향을 주는 요소 위주로 정리 전체 목록과 세부 제약은 MDN 문서를 최종 기준으로 확인 권장
메인 루트와 구획 루트
- html: 문서 루트 요소, 모든 요소의 조상이어야 함
- body: 문서 본문 루트, 문서 내 하나만 존재
문서 메타데이터
- head: 기계가 읽는 문서 메타데이터 컨테이너
- base: 문서 내 상대 URL의 기준 URL 지정, 문서당 하나만 허용
- link: 외부 리소스와의 관계 선언, CSS 연결과 파비콘 등
- meta: title, style 등으로 표현 불가한 메타데이터 표현
- style: 문서 범위의 스타일 선언
- title: 브라우저 탭에 표시되는 문서 제목, 텍스트만 허용
콘텐츠 구획
문서 구조와 내비게이션에 쓰이는 시맨틱 컨테이너
- header: 소개 및 탐색 보조 영역, 제목 로고 검색 폼 등 포함 가능
- footer: 가장 가까운 섹션 또는 구획 루트의 푸터
- nav: 문서 내외 링크 내비게이션 구획
- main: 문서 본문의 주요 콘텐츠 영역, 문서당 하나 권장
- section: 독립 구획, 더 적합한 의미 요소가 없을 때 사용
- article: 독립 배포 재사용 가능한 단위, 기사 포스트 등
- aside: 본문과 간접 관련된 보조 콘텐츠, 사이드바 콜아웃 등
- h1–h6: 6단계 제목 수준, h1이 최상위
- address: 인접 구획의 연락처 정보 표현
텍스트 콘텐츠
문단과 목록 등 블록 레벨 텍스트 구조화
- p: 문단
- blockquote: 긴 인용문, cite 특성으로 출처 URL 표기 가능
- hr: 주제 전환 또는 구획 분리 의미
- pre: 공백과 줄바꿈을 보존하는 미리 서식 지정 텍스트
- figure: 본문과 독립 가능한 콘텐츠 묶음
- figcaption: figure의 설명 캡션
- ol: 순서 있는 목록
- ul: 순서 없는 목록
- li: 목록 항목, ol ul menu 내부에 위치
- dl: 용어와 설명의 쌍 목록
- dt: 용어 항목
- dd: 용어 설명 값
- div: 의미 없는 일반 컨테이너, 스타일 구조 보조 용도
- menu: 사용자 명령 묶음 표현
인라인 텍스트 시멘틱
단어 구 수준의 의미와 강조 표현
- a: 하이퍼링크 앵커, href로 목적지 지정, 링크 텍스트는 목적지 설명 필요
- abbr: 약어, title로 전체 의미 제공 권장
- b: 특별한 중요도 없이 주의 환기 용도, 스타일링 목적 사용 지양
- bdi: 양방향 텍스트에서 주변과 분리된 방향성 격리
- bdo: 텍스트 쓰기 방향 오버라이드
- br: 강제 줄바꿈
- cite: 저작물의 출처 제목 표기
- code: 짧은 코드 조각 표시
- data: 사람이 읽는 값에 기계가 읽는 값 연결, 시간 데이터면 time 사용 권장
- dfn: 현재 문맥에서 정의되는 용어 표식
- em: 의미적 강조, 중첩 시 강조 강도 상승
- i: 문맥상 구분되는 텍스트, 외래어 기술 용어 생각 등
- kbd: 사용자 입력 표기, 관례적으로 고정폭 글꼴
- mark: 현재 맥락에서 중요해 하이라이트된 부분
- q: 짧은 인라인 인용문, 긴 인용은 blockquote 사용
- ruby: 동아시아 문자 루비 주석 컨테이너
- rt: 루비 주석의 발음 번역 등 표기 텍스트
- rp: 루비 미지원 환경용 괄호 보조 표기
- s: 더 이상 정확하지 않거나 무관한 텍스트 표시, 변경 이력에는 del ins 사용
- samp: 프로그램 출력 예시
- small: 주석 저작권 법적 고지 등 작은 텍스트
- span: 의미 없는 인라인 컨테이너, 스타일 특성 공유에 사용
- strong: 중대 긴급 의미의 강조
- sub: 아래첨자
- sup: 위첨자
- time: 특정 시점 또는 구간, datetime 특성으로 기계 가독성 향상
- u: 비문자 주석 표시 기본 밑줄 표현, 스타일로 변경 가능
- var: 변수 이름 표기 관례적으로 이탤릭 표시
- wbr: 줄바꿈 가능한 힌트 위치 지정
이미지와 멀티미디어
- img: 이미지 삽입
- audio: 오디오 포함, 다중 소스 지원, MediaStream 가능
- video: 비디오 플레이어 삽입, 오디오만이면 audio 권장
- track: audio video의 시간 기반 텍스트 트랙, WebVTT TTML 지원
- map: 이미지 맵 정의 컨테이너
- area: 이미지 맵 내 핫스팟과 링크 정의, map 내부에서만 사용
내장 콘텐츠
- embed: 외부 애플리케이션 대화형 콘텐츠 임베드 지점
- iframe: 중첩 브라우징 컨텍스트 삽입 프레임
- object: 외부 리소스 플러그인 통합 포인트, 매개변수는 param으로 전달
- picture: 반응형 이미지 아트디렉션 컨테이너, 내부 source img 조합
- source: picture audio video 내 미디어 소스 지정, 타입 미디어 조건 선택 지원
- portal: 페이지 전환과 프리렌더링을 위한 임베드 실험적 요소, 지원 범위 확인 필요
스크립트
- script: 실행 코드 또는 데이터 삽입, 주로 JavaScript JSON GLSL 등
- noscript: 스크립트 미지원 또는 비활성화 환경에서 보여줄 대체 콘텐츠
- canvas: 2D 캔버스 API 또는 WebGL로 그래픽 애니메이션 렌더링
수정사항 표시
- ins: 문서에 추가된 텍스트 범위
- del: 문서에서 제거된 텍스트 범위
표
표는 접근성과 구조화를 위해 캡션 요약 헤더 스코프 지정이 중요
- table: 표 컨테이너
- caption: 표 제목 설명
- thead: 머리글 행 그룹
- tbody: 본문 행 그룹
- tfoot: 요약 합계 등 바닥글 행 그룹, 긴 표에서 반복 표시 최적화에 유용
- tr: 표의 행 정의, td th 혼합 가능
- th: 헤더 셀, scope headers 특성으로 연관 범위 명시
- td: 데이터 셀
- colgroup: 열 그룹 정의
- col: 열 단위 의미 스타일 지정, colgroup 내부에서 사용
양식
대화형 입력 수집과 제출을 위한 요소 집합
- form: 입력 컨트롤을 담는 제출 단위
- label: UI 항목 설명, 접근성 연결 필수
- input: 가장 다양한 입력 컨트롤, type과 특성 조합으로 동작 결정
- textarea: 멀티라인 텍스트 입력
- button: 클릭 가능한 버튼, 기본 동작과 스타일은 CSS로 제어
- select: 옵션 메뉴 컨트롤
- optgroup: select 옵션 그룹화
- option: select datalist 항목 정의
- datalist: 입력 보조 선택지 목록 컨테이너
- fieldset: 관련 컨트롤과 레이블 묶음
- legend: fieldset의 설명 제목
- output: 계산 결과나 사용자 행동 결과 표출 컨테이너
- progress: 작업 진행률 표시
- meter: 범위 내 스칼라 값 백분율 지표
대화형 요소
- details: 토글 가능한 정보 공개 위젯, summary와 함께 사용
- summary: details 공개 상자의 요약 캡션, 클릭 시 부모 details의 열림 상태 전환
- dialog: 모달 비모달 대화 상자 컴포넌트, 포커스 트랩과 접근성 고려 필요
웹 컴포넌트
- template: 즉시 렌더링되지 않는 HTML 템플릿 보관소, JS로 인스턴스화
- slot: 컴포넌트 외부 마크업 삽입 지점, 분리된 DOM 트리 합성에 사용
폐기되었거나 비권장 요소
다음 요소는 사양에서 폐지되었거나 사용 비권장 상태로 신규 프로젝트 사용 금지, 기존 코드에서도 대체 권장
- acronym big blink bgsound dir image keygen marquee menuitem nobr noembed noframes plaintext shadow spacer strike tt xmp 등 구형 요소 전반
- applet frame frameset center font 등 표현 플러그인 레이아웃 목적의 요소는 CSS와 현대 API로 대체
- content는 웹 컴포넌트 구 사양 요소로 slot으로 대체
- rb rtc 등 일부 루비 하위 요소는 구현과 지원 상황을 확인 후 사용 결정
- param은 object 파라미터 지정 용도이나 현대 웹에선 대체 방식 우선
사용상의 주의와 베스트 프랙티스
- 의미 우선 선택 시맨틱 요소를 먼저 고려 후 div span으로 보완
- 접근성 보장 제목 계층 h1–h6의 순서 논리 유지, nav와 landmark 역할 활용
- 폼 레이블과 컨트롤 연결 for id 또는 라벨 래핑으로 보장
- 미디어 대체 track 제공과 대체 텍스트 alt 제공으로 포괄적 접근성 확보
- 표 구조 명확화 caption scope headers와 요약 제공, 복잡 표는 ARIA 속성 검토
- 링크 텍스트는 목적지를 설명하는 문구로 작성, 여기 클릭 같은 비정보적 표현 지양
- 폐기 요소나 비표준 기능 사용 회피, 필요 시 폴리필과 지원 범위 명시
마무리
여기 정리는 카테고리별 핵심 의미와 사용 시점을 빠르게 상기하기 위한 실무 요약 세부 동작 특성 브라우저 호환성 예시는 MDN과 사양 문서를 상시 참조 권장