레퍼런스

HTML 태그 사전

자주 쓰는 HTML 태그의 역할과 사용 예시를 한국어로 정리했습니다. 태그 이름으로 빠르게 찾아보세요.

구조 · 시맨틱

문서의 골격과 영역을 나누는 구조·시맨틱 요소입니다.

<html>문서 전체를 감싸는 최상위 루트 요소입니다.<head>화면에 보이지 않는 문서 메타데이터를 담습니다.<body>화면에 표시되는 모든 콘텐츠를 담습니다.<header>페이지나 섹션의 머리말 영역입니다.<footer>페이지나 섹션의 꼬리말 영역입니다.<nav>주요 내비게이션 링크 묶음을 나타냅니다.<main>문서의 핵심 콘텐츠를 담는 영역입니다.<section>주제별로 묶은 콘텐츠 구획입니다.<article>독립적으로 배포 가능한 콘텐츠 단위입니다.<aside>본문과 간접적으로 관련된 보조 콘텐츠입니다.<div>의미 없는 범용 블록 컨테이너입니다.<span>의미 없는 범용 인라인 컨테이너입니다.<h1>가장 중요한 최상위 제목입니다.<h2>두 번째 수준의 제목입니다.<h3>세 번째 수준의 제목입니다.<h4>네 번째 수준의 제목입니다.<h5>다섯 번째 수준의 제목입니다.<h6>가장 낮은 수준의 제목입니다.<p>하나의 문단을 나타냅니다.<hr>주제 전환을 나타내는 구분선입니다.<br>줄바꿈을 삽입합니다.<figure>캡션을 가질 수 있는 독립 콘텐츠입니다.<figcaption>figure 콘텐츠의 캡션입니다.<address>연락처 정보를 나타냅니다.

텍스트 · 인라인

문단·목록·강조 등 글의 의미를 표현하는 요소입니다.

<a>다른 페이지나 위치로 가는 하이퍼링크입니다.<strong>중요성이 높은 텍스트를 나타냅니다.<em>강조(어조 변화)를 나타냅니다.<b>의미 없이 시각적으로 굵게 표시합니다.<i>의미 없이 시각적으로 기울임 표시합니다.<mark>형광펜처럼 강조 표시된 텍스트입니다.<small>저작권·면책 등 부가 정보를 나타냅니다.<sub>아래 첨자를 나타냅니다.<sup>위 첨자를 나타냅니다.<code>한 줄 코드 조각을 나타냅니다.<pre>공백과 줄바꿈을 그대로 보존합니다.<kbd>키보드 입력을 나타냅니다.<blockquote>블록 단위 인용문입니다.<q>짧은 인라인 인용문입니다.<cite>저작물의 제목(출처)을 나타냅니다.<abbr>약어를 나타냅니다.<time>날짜·시간을 기계가 읽을 수 있게 나타냅니다.<del>삭제된(이전) 텍스트를 나타냅니다.<ins>추가된 텍스트를 나타냅니다.<ul>순서 없는 목록입니다.<ol>순서 있는 목록입니다.<li>목록의 한 항목입니다.<dl>설명 목록(용어-정의 쌍)입니다.<dt>설명 목록의 용어입니다.<dd>설명 목록의 정의/설명입니다.

폼 · 입력

사용자 입력을 받고 제출하는 폼 관련 요소입니다.

<form>사용자 입력을 모아 제출하는 폼입니다.<input>한 줄 입력 필드입니다.<button>클릭 가능한 버튼입니다.<label>입력 요소의 설명 라벨입니다.<select>드롭다운 선택 목록입니다.<option>select 안의 선택 항목입니다.<textarea>여러 줄 텍스트 입력 영역입니다.<fieldset>관련 입력들을 그룹으로 묶습니다.<legend>fieldset 그룹의 제목입니다.<datalist>입력 필드의 자동완성 후보 목록입니다.<progress>작업 진행률을 나타냅니다.<meter>범위 안의 측정값을 나타냅니다.

표

행과 열로 데이터를 표현하는 표 요소입니다.

<table>표 형식 데이터를 담는 컨테이너입니다.<thead>표의 머리글 행 그룹입니다.<tbody>표의 본문 행 그룹입니다.<tfoot>표의 바닥글 행 그룹입니다.<tr>표의 한 행입니다.<th>표의 머리글 셀입니다.<td>표의 데이터 셀입니다.<caption>표의 제목(설명)입니다.

미디어 · 임베드

이미지·비디오·외부 콘텐츠를 삽입하는 요소입니다.

<img>이미지를 삽입합니다.<picture>조건에 따라 다른 이미지를 제공합니다.<source>picture·video·audio의 대체 소스입니다.<video>동영상을 재생합니다.<audio>오디오를 재생합니다.<iframe>다른 문서를 현재 페이지에 삽입합니다.<canvas>스크립트로 그림을 그리는 영역입니다.<svg>벡터 그래픽을 그립니다.<track>비디오·오디오의 자막 트랙입니다.

메타 · 문서

문서 정보와 외부 리소스를 연결하는 요소입니다.

<meta>문서의 메타데이터를 정의합니다.<link>외부 리소스를 문서에 연결합니다.<title>브라우저 탭·검색 결과에 표시될 제목입니다.<style>문서 안에 CSS를 작성합니다.<script>JavaScript를 포함하거나 불러옵니다.<base>문서의 기준 URL을 지정합니다.<noscript>스크립트가 꺼졌을 때 보여줄 내용입니다.<template>렌더링되지 않는 재사용 마크업 조각입니다.