Engineering
HTML 주요 요소와 속성
HTML 주요 요소와 속성 학습 내용을 정리한 백필 노트입니다.
이 글은 2025년 학습 기록을 블로그 형식으로 정리한 백필 노트입니다.
1. 개요
이 문서는 웹 개발에 필요한 HTML5 요소(Elements)와 속성(Attributes)을 의미론적(Semantic) 관점에서 정리한 것입니다. 웹 표준을 준수하며 효과적인 마크업 구조를 구현하는 것을 목표로 합니다.
- 기준: HTML5 표준, 모든 브라우저 지원 (IE 지원 불가 별도 표시)
- 제외: Deprecated (더 이상 사용되지 않는) 요소 및 속성
- 표기: 빈 태그는
<TAG />로, 필수 속성은(필수)로 표시합니다.
2. 주요 범위 및 메타데이터 요소
가. 문서의 기본 구조
HTML 문서의 기본 골격을 형성하는 요소입니다.
HTML
<!DOCTYPE **html**>
<html lang="ko">
<head></head>
<body></body>
</html>
| 요소 | 설명 | 표시 특성 | 참조 |
| --- | --- | --- | --- |
| <html> | HTML 문서의 전체 범위를 지정합니다. | | MDN |
| <head> | HTML 문서의 정보를 지정합니다. | | MDN |
| <body> | HTML 문서의 구조(콘텐츠)를 지정합니다. | block | MDN |
나. 메타데이터 요소 (<head> 내부에 사용)
문서 정보, 외부 리소스 연결 등을 담당하며 SEO 최적화와 사용자 경험에 기여합니다.
| 요소 | 설명 | 표시 특성 | 참조 |
| --- | --- | --- | --- |
| <title> | 브라우저 탭에 보여지는 문서의 제목을 지정합니다. | | MDN |
| <base /> | 문서 내 모든 상대 URL의 기준 URL을 지정합니다. (문서당 1개) | | MDN |
| <link /> | 외부 리소스(CSS, Icon 등)를 연결하고 관계를 명시합니다. (rel 속성 필수) | | MDN |
| <meta /> | 문자 인코딩, 검색엔진 정보 등 기타 메타데이터를 지정합니다. | | MDN |
| <style> | 문서 내부에 스타일 정보(CSS)를 직접 작성합니다. | | MDN |
3. 콘텐츠 구분 요소
문서의 구조를 의미에 맞게 구분하며, 기능적 차이는 없습니다.
| 요소 | 설명 | 표시 특성 | 참조 |
| --- | --- | --- | --- |
| <h1>~<h6> | 문서의 정보 계층(제목)을 구조화합니다. 숫자가 낮을수록 중요도가 높으며, <h1>은 문서당 하나만 사용합니다. | block | MDN |
| <header> | 문서나 섹션의 헤더(로고, 제목, 검색 등)를 지정합니다. | block | MDN |
| <footer> | 문서나 섹션의 푸터(작성자, 저작권 등)를 지정합니다. | block | MDN |
| <main> | 문서의 핵심 콘텐츠를 지정합니다. (문서당 1개) | block | MDN |
| <article> | 독립적으로 재사용 가능한 영역(뉴스 기사, 블로그 글 등)을 지정합니다. | block | MDN |
| <section> | 문서의 일반적인 영역을 지정하며, 보통 제목 요소를 포함합니다. | block | MDN |
| <aside> | 문서의 별도 콘텐츠(광고, 사이드바 등)를 지정합니다. | block | MDN |
| <nav> | 다른 페이지로의 링크(메뉴, 목차 등) 영역을 지정합니다. | block | MDN |
| <address> | 연락처 정보를 제공합니다. | block | MDN |
| <div> | 의미 없이 콘텐츠 영역을 묶는 용도로 사용합니다. | block | MDN |
4. 텍스트 콘텐츠 요소
텍스트를 구조화하고 의미를 부여하여 가독성과 접근성을 높입니다.
| 요소 | 설명 | 표시 특성 | 참조 |
| --- | --- | --- | --- |
| <ol> | 순서가 있는 목록(Ordered List)을 지정합니다. | block | MDN |
| <ul> | 순서가 없는 목록(Unordered List)을 지정합니다. | block | MDN |
| <li> | 목록의 각 항목(List Item)을 지정합니다. | list-item | MDN |
| <dl> | 용어(dt)와 정의(dd)의 그룹(Description List)을 지정합니다. | block | MDN |
| <dt> | 용어를 지정합니다. (Definition Term) | block | MDN |
| <dd> | 용어의 정의(설명)를 지정합니다. (Definition Details) | block | MDN |
| <p> | 하나의 문단(Paragraph)을 지정합니다. | block | MDN |
| <hr /> | 문단 수준의 분리(가로줄)를 의미합니다. | block | MDN |
| <pre> | 서식이 미리 지정된 텍스트(공백, 줄바꿈 유지)를 나타냅니다. | block | MDN |
| <blockquote> | 긴 인용문(Block Quotation)을 지정합니다. cite 속성으로 출처 URL을 명시할 수 있습니다. | block | MDN |
5. 인라인 텍스트 및 수정 요소
가. 인라인 텍스트 요소
텍스트의 일부를 강조하거나 스타일을 적용합니다.
| 요소 | 설명 | 표시 특성 | 참조 |
| --- | --- | --- | --- |
| <a> | 다른 URL로 연결되는 하이퍼링크(Anchor)를 지정합니다. | inline | MDN |
| <abbr> | 약어(Abbreviation)를 지정하며, title 속성으로 전체 설명을 제공합니다. | inline | MDN |
| <b> | 특별한 의미 없이 문체가 다른 글자의 범위를 지정합니다. (Bold) | inline | MDN |
| <mark> | 사용자의 관심을 끌기 위해 하이라이팅합니다. (노란 배경) | inline | MDN |
| <em> | 단순한 의미 강조를 표시합니다. (Emphasis, Italic) | inline | MDN |
| <strong> | 의미의 중요성을 나타냅니다. (Strong Importance, Bold) | inline | MDN |
| <i> | 아이콘, 특수기호 등 평범한 글자와 구분하기 위해 사용합니다. (Italic) | inline | MDN |
| <dfn> | 용어를 정의할 때 사용합니다. (Definition, Italic) | inline | MDN |
| <cite> | 창작물(책, 영화 등)에 대한 참조를 지정합니다. (Citation, Italic) | inline | MDN |
| <q> | 짧은 인용문을 지정합니다. (Inline Quotation) | inline | MDN |
| <u> | 순수하게 꾸미는 용도의 밑줄(Underline)을 지정합니다. | inline | MDN |
| <code> | 컴퓨터 코드 범위를 지정합니다. (Monospace 글꼴) | inline | MDN |
| <kbd> | 키보드 입력을 나타내는 텍스트 범위를 지정합니다. | inline | MDN |
| <sup> | 위 첨자(Superscript)를 지정합니다. | inline | MDN |
| <sub> | 아래 첨자(Subscript)를 지정합니다. | inline | MDN |
| <time> | 날짜나 시간을 나타냅니다. datetime 속성으로 기계가 읽을 수 있는 값을 제공합니다. | inline | MDN |
| <span> | 의미 없이 텍스트 영역을 묶는 용도로 사용합니다. | inline | MDN |
| <br /> | 줄바꿈을 지정합니다. | inline | MDN |
나. 텍스트 수정 요소
텍스트의 추가 및 삭제를 명확하게 전달합니다.
| 요소 | 설명 | 표시 특성 | 참조 |
| --- | --- | --- | --- |
| <ins> | 새로 추가된(Inserted) 텍스트 범위를 지정합니다. | inline | MDN |
| <del> | 삭제된(Deleted) 텍스트 범위를 지정합니다. | inline | MDN |
6. 멀티미디어 및 내장 콘텐츠 요소
| 요소 | 설명 | 표시 특성 | 참조 |
| --- | --- | --- | --- |
| <img /> | 이미지를 삽입합니다. (src와 alt 속성 필수) | inline | MDN |
| <audio> | 소리 콘텐츠(MP3 등)를 삽입합니다. | inline | MDN |
| <video> | 동영상 콘텐츠(MP4 등)를 삽입합니다. | inline | MDN |
| <figure> | 이미지, 도표 등 독립적인 콘텐츠 영역을 지정합니다. | block | MDN |
| <figcaption> | <figure> 요소의 설명을 지정합니다. (Figure Caption) | inline | MDN |
| <iframe> | 다른 HTML 페이지를 현재 페이지에 삽입합니다. | inline | MDN |
| <canvas> | 스크립트를 통해 그래픽이나 애니메이션을 렌더링합니다. | inline | MDN |
| <script> | JavaScript 코드를 포함하거나 외부 스크립트를 참조합니다. | none | MDN |
| <noscript> | 스크립트를 지원하지 않는 브라우저에 보여줄 내용을 정의합니다. | inline | MDN |
7. 표 (Table) 콘텐츠 요소
데이터를 구조화된 표 형태로 표현합니다.
HTML
<table>
<caption>Fruits</caption>
<colgroup>
<col span="2" style="background-color: yellowgreen;">
<col style="background-color: tomato;">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>F123A</td>
<td>Apple</td>
<td>$22</td>
</tr>
</tbody>
</table>
| 요소 | 설명 | 표시 특성 | 참조 |
| --- | --- | --- | --- |
| <table> | 표를 지정합니다. | table | MDN |
| <tr> | 표의 행(Table Row)을 지정합니다. | table-row | MDN |
| <th> | 표의 머리글 칸(Table Header)을 지정합니다. (colspan, rowspan으로 칸 병합 가능) | table-cell | MDN |
| <td> | 표의 일반 칸(Table Data)을 지정합니다. | table-cell | MDN |
| <caption> | 표의 제목을 지정합니다. | table-caption | MDN |
| <colgroup> | 열의 집합(Column Group)을 지정합니다. | table-column-group | MDN |
| <col> | <colgroup> 내에서 열(Column)을 지정합니다. | table-column | MDN |
| <thead> | 표의 머리글 그룹(Table Head)을 지정합니다. | table-header-group | MDN |
| <tbody> | 표의 본문 그룹(Table Body)을 지정합니다. | table-row-group | MDN |
| <tfoot> | 표의 바닥글 그룹(Table Foot)을 지정합니다. | table-footer-group | MDN |
8. 양식 (Form) 요소
사용자로부터 데이터를 입력받기 위한 양식을 구성합니다.
| 요소 | 설명 | 표시 특성 | 참조 |
| --- | --- | --- | --- |
| <form> | 서버에 정보를 제출하기 위한 양식 범위를 정의합니다. | block | MDN |
| <input /> | 다양한 타입의 데이터 양식을 지정합니다. (type 속성으로 종류 결정) | inline-block | MDN |
| <label> | 입력 요소(input 등)의 제목을 지정합니다. | inline | MDN |
| <button> | 선택 가능한 버튼을 지정합니다. | inline-block | MDN |
| <textarea> | 여러 줄의 텍스트 양식을 지정합니다. | inline-block | MDN |
| <fieldset> | 양식의 관련 요소들을 그룹화합니다. | block | MDN |
| <legend> | <fieldset>의 제목을 지정합니다. | block | MDN |
| <select> | 드롭다운 목록을 지정합니다. | inline-block | MDN |
| <datalist> | <input>을 위한 자동완성 목록을 지정합니다. | none | MDN |
| <optgroup> | <select> 내의 <option>을 그룹화합니다. | block | MDN |
| <option> | <select>나 <datalist>의 옵션을 지정합니다. | inline | MDN |
| <progress> | 작업의 완료 진행률을 표시합니다. | inline-block | MDN |
9. 전역 속성 (Global Attributes)
모든 HTML 요소에서 공통으로 사용할 수 있는 속성입니다.
| 속성 | 설명 | 참조 |
| --- | --- | --- |
| id | 문서 전체에서 고유한 식별자(ID)를 정의합니다. | MDN |
| class | 공백으로 구분된 요소의 별칭(클래스)을 지정합니다. | MDN |
| style | 요소에 적용할 인라인 CSS를 선언합니다. | MDN |
| title | 요소의 추가 정보(설명)를 지정합니다. (마우스 오버 시 툴팁으로 표시) | MDN |
| lang | 요소의 언어를 지정합니다. | MDN |
| data-* | JS에서 사용할 사용자 정의 데이터 속성을 지정합니다. (dataset으로 접근) | MDN |
| draggable | 요소가 드래그 가능한지 여부를 지정합니다. | MDN |
| hidden | 요소를 숨깁니다. | MDN |
| tabindex | Tab 키로 포커스할 순서를 지정합니다. (-1: 포커스 가능하나 탭 순서 제외, 0: 순서에 포함) | MDN |
| contenteditable | 요소의 사용자 편집 가능 여부를 지정합니다. | MDN |