HTML 태그 126개 사전

태그마다 무엇을 하는지, 닫는 태그가 필요한지, 자주 쓰는 속성이 무엇인지 한 줄로 정리했습니다.

문서 뼈대5

모든 문서가 갖는 뼈대입니다. 순서와 자리가 정해져 있습니다.

<html>문서 전체를 감싸는 뿌리 태그입니다. lang 속성으로 문서의 언어를 알립니다.<head>화면에 그리지 않는 문서 정보를 담습니다. 제목·메타·스타일이 여기 들어갑니다.<body>화면에 보이는 내용 전부가 이 안에 들어갑니다.<title>브라우저 탭과 검색 결과에 나오는 문서 제목입니다.<base>문서 안 상대 주소의 기준이 되는 주소를 정합니다.

구획17

문서를 뜻 있는 덩어리로 나눕니다. 검색과 화면 낭독이 이 구조를 따라갑니다.

<header>한 구획의 머리말입니다. 제목이나 로고, 안내가 들어갑니다.<nav>주요 이동 링크 묶음입니다. 모든 링크 묶음이 아니라 길잡이만 감쌉니다.<main>그 문서의 본론입니다. 한 문서에 하나만 두고, 머리말과 꼬리말은 뺍니다.<section>제목을 가진 하나의 주제 묶음입니다. 뜻 없는 상자로 쓰면 안 됩니다.<article>그 자체로 떼어 놓아도 뜻이 통하는 글입니다. 기사·게시물·댓글이 그렇습니다.<aside>본문 옆에 곁들이는 내용입니다. 빼도 본문이 그대로 읽힙니다.<footer>한 구획의 꼬리말입니다. 저작권, 연락처, 관련 링크가 들어갑니다.<div>아무 뜻이 없는 상자입니다. 다른 태그로 표현할 수 없을 때만 씁니다.<h1>그 문서에서 가장 큰 제목입니다. 한 문서에 하나가 원칙입니다.<h2>h1 아래 단계의 제목입니다. 큰 갈래를 나눌 때 씁니다.<h3>h2 안을 다시 나누는 제목입니다.<h4>네 번째 단계 제목입니다. 여기까지 내려가면 구조를 다시 볼 때입니다.<h5>다섯 번째 단계 제목입니다. 실제로 쓰이는 일은 드뭅니다.<h6>여섯 번째이자 가장 작은 제목입니다.<hgroup>제목과 그에 딸린 부제를 한 덩어리로 묶습니다.<address>그 글이나 문서의 연락처를 표시합니다. 일반 주소를 적는 곳이 아닙니다.<search>검색을 위한 입력 묶음임을 알립니다. 비교적 최근에 표준이 된 태그입니다.

글7

문단과 인용, 코드 블록처럼 한 덩어리로 흐르는 글입니다.

<p>한 문단입니다. 닫는 태그를 빼도 브라우저가 알아서 닫습니다.<br>줄바꿈 하나입니다. 문단 간격을 벌리는 용도로 쓰면 안 됩니다.<hr>주제가 바뀌는 자리를 나타냅니다. 단순한 가로줄 장식이 아닙니다.<pre>적은 그대로 보여 줍니다. 공백과 줄바꿈이 살아 있습니다.<blockquote>다른 곳에서 가져온 긴 인용입니다. cite 속성에 출처 주소를 적습니다.<figure>본문에서 참조하는 그림이나 코드 묶음입니다. 옮겨도 뜻이 유지됩니다.<figcaption>figure에 붙는 설명입니다. figure 안에서 처음이나 마지막에 둡니다.

문장 안 표시30

문장 안에서 일부만 표시합니다. 줄을 새로 시작하지 않습니다.

<a>다른 곳으로 가는 링크입니다. href가 없으면 링크가 아닌 자리표시가 됩니다.<span>문장 안에서 아무 뜻 없이 감싸는 상자입니다. 색이나 글꼴을 따로 줄 때 씁니다.<strong>중요하다는 뜻입니다. 굵게 보이는 것은 결과일 뿐입니다.<em>말할 때 힘주어 읽는 부분입니다. 기울임은 그 표현일 뿐입니다.<b>뜻의 강조 없이 눈에 띄게만 합니다. 중요하다면 strong을 씁니다.<i>다른 결의 말임을 나타냅니다. 외래어나 학명, 생각 속 말에 씁니다.<u>맞춤법 오류처럼 별도 표시가 필요한 부분에 밑줄을 긋습니다.<s>이제는 맞지 않는 내용에 취소선을 긋습니다. 삭제 이력에는 del을 씁니다.<mark>찾아보는 사람에게 중요한 부분을 형광펜처럼 표시합니다.<small>면책 조항이나 저작권처럼 곁들이는 작은 글씨입니다.<sub>아래 첨자입니다. H₂O의 2처럼 씁니다.<sup>위 첨자입니다. 제곱이나 각주 번호에 씁니다.<code>코드 한 조각입니다. 대개 고정폭 글꼴로 보입니다.<kbd>사용자가 누르는 키를 나타냅니다. Ctrl이나 Enter처럼 씁니다.<samp>프로그램이 내놓은 출력입니다.<var>수식이나 코드 안의 변수 이름입니다.<q>문장 안에 들어가는 짧은 인용입니다. 따옴표는 브라우저가 붙입니다.<cite>작품의 제목을 나타냅니다. 사람 이름에는 쓰지 않습니다.<abbr>줄임말입니다. title 속성에 원래 말을 적어 둡니다.<time>날짜나 시각입니다. datetime 속성에 기계가 읽을 꼴로 적습니다.<data>화면에 보이는 값 옆에 기계가 읽을 값을 함께 답니다.<dfn>그 자리에서 처음 정의되는 낱말을 나타냅니다.<bdi>글자 방향이 다른 글이 주변을 흔들지 않게 가둡니다.<bdo>글자 방향을 강제로 뒤집습니다. dir 속성이 반드시 필요합니다.<ruby>한자 위에 읽는 법을 다는 표기입니다. rt와 함께 씁니다.<rt>ruby 안에서 실제 읽는 법이 들어가는 자리입니다.<rp>ruby를 못 그리는 브라우저에서 대신 보여 줄 괄호입니다.<wbr>여기서 줄이 바뀌어도 좋다고 알려 줍니다. 긴 주소에 씁니다.<ins>나중에 더해진 부분입니다. 문서의 수정 이력을 남길 때 씁니다.<del>지워진 부분입니다. ins와 짝을 이뤄 수정 이력을 보여 줍니다.

목록7

순서가 있거나 없는 목록, 용어 풀이입니다.

<ul>순서가 없는 목록입니다. 항목을 바꿔 놓아도 뜻이 그대로입니다.<ol>순서가 있는 목록입니다. start로 시작 번호를, reversed로 거꾸로 셀 수 있습니다.<li>목록 안의 한 항목입니다. ul이나 ol 안에서만 씁니다.<dl>용어와 뜻을 짝지어 늘어놓는 목록입니다.<dt>dl 안에서 설명될 용어 쪽입니다.<dd>dt에 붙는 설명 쪽입니다. 한 용어에 여러 개를 달 수 있습니다.<menu>명령이나 도구를 늘어놓는 목록입니다. 지금은 ul과 같게 다뤄집니다.

표10

가로세로로 짜인 자료입니다. 화면 배치용이 아닙니다.

<table>가로세로로 짜인 자료를 담습니다. 화면 배치 용도로는 쓰지 않습니다.<thead>표의 머리 줄 묶음입니다. 인쇄할 때 쪽마다 되풀이됩니다.<tbody>표의 본문 줄 묶음입니다. 적지 않아도 브라우저가 만들어 넣습니다.<tfoot>표의 맨 아래 요약 줄입니다. 합계를 넣을 때 씁니다.<tr>표의 한 줄입니다. 안에 th나 td가 들어갑니다.<th>머리 칸입니다. scope로 그 칸이 행을 설명하는지 열을 설명하는지 밝힙니다.<td>자료가 들어가는 칸입니다. colspan과 rowspan으로 칸을 합칩니다.<caption>표 전체의 제목입니다. table 안 맨 앞에 둡니다.<colgroup>열 여러 개를 한 묶음으로 다룹니다. 열 단위 스타일에 씁니다.<col>colgroup 안에서 열 하나(또는 span만큼)를 가리킵니다.

입력14

값을 받아 보내는 입력들입니다.

<form>입력을 모아 보내는 묶음입니다. action에 보낼 곳, method에 방식을 적습니다.<input>한 칸의 입력입니다. type 하나로 글·숫자·날짜·색·파일이 모두 됩니다.<textarea>여러 줄을 받는 입력 칸입니다. 기본값은 태그 사이에 적습니다.<button>누르는 단추입니다. form 안에서 type을 안 적으면 제출 단추가 됩니다.<select>여러 값 중 하나를 고르는 목록입니다. multiple을 주면 여러 개도 됩니다.<option>select 안의 선택지 하나입니다.<optgroup>선택지를 갈래로 묶어 보여 줍니다.<label>입력 칸에 붙는 이름표입니다. for로 이으면 글자를 눌러도 칸이 선택됩니다.<fieldset>관련된 입력들을 테두리로 묶습니다. disabled로 한꺼번에 잠급니다.<legend>fieldset의 제목입니다. 묶음 안 첫 자리에 둡니다.<datalist>입력 칸에 뜨는 추천 목록입니다. 다른 값도 그대로 칠 수 있습니다.<output>계산 결과를 담는 자리입니다. 어떤 입력에서 나왔는지 for로 밝힙니다.<progress>일이 얼마나 진행됐는지 보여 주는 막대입니다.<meter>정해진 범위 안의 값을 눈금으로 보여 줍니다. 진행률에는 쓰지 않습니다.

그림·소리·영상10

그림과 소리, 영상, 그리고 직접 그리는 화면입니다.

<img>그림 한 장입니다. alt에 그림이 전하는 내용을 반드시 적습니다.<picture>화면 크기나 형식에 따라 다른 그림을 고르게 합니다.<source>picture·video·audio 안에서 고를 수 있는 후보 하나입니다.<video>영상을 재생합니다. autoplay는 muted와 함께여야 대개 동작합니다.<audio>소리를 재생합니다. controls를 주지 않으면 화면에 아무것도 안 보입니다.<track>영상에 자막이나 설명을 붙입니다. WebVTT 파일을 가리킵니다.<canvas>스크립트로 그림을 그리는 빈 화면입니다. 그린 것은 글자로 남지 않습니다.<svg>크기를 키워도 깨지지 않는 벡터 그림을 문서 안에 직접 그립니다.<map>그림 위에 누를 수 있는 영역을 얹습니다. area와 함께 씁니다.<area>map 안의 누를 수 있는 한 조각입니다. 모양과 좌표로 범위를 정합니다.

끼워넣기4

다른 문서나 자원을 문서 안에 끼워 넣습니다.

스크립트·스타일5

동작과 모양을 문서에 붙입니다.

문서 정보2

사람이 아니라 브라우저와 검색엔진이 읽는 정보입니다.

여닫기3

자바스크립트 없이 눌러서 여닫는 것들입니다.

<details>접었다 펴는 상자입니다. 자바스크립트 없이 동작합니다.<summary>details가 접혀 있을 때 보이는 제목 줄입니다.<dialog>대화 상자입니다. showModal로 열면 뒤쪽 조작이 막힙니다.

더 쓰지 않음12

표준에서 물러난 태그입니다. 옛 문서를 읽을 때만 만납니다.

읽는 방법

태그는 대개 여는 것과 닫는 것이 짝을 이룹니다. img나 br처럼 내용이 없는 태그만 닫지 않습니다.
닫지 않는 태그에 </br>을 붙이면 브라우저가 무시하거나 빈 줄이 하나 더 생깁니다.
보이는 모양은 CSS가 정합니다. 태그는 "이것이 무엇인가"를 말하고, 굵게·기울임은 그 결과일 뿐입니다.
뜻이 맞는 태그를 고르면 검색과 화면 낭독이 함께 좋아집니다. div로 다 감싸면 그 정보가 사라집니다.

자주 묻는 질문

Q. HTML 태그는 모두 몇 개인가요?

표준에 살아 있는 태그는 110개 안팎이고, 폐기된 것까지 더하면 130개쯤 됩니다. 여기에는 지금 쓰는 태그와 옛 문서에서 만나는 태그를 함께 126개 실었습니다.

Q. 닫는 태그가 없는 태그는 무엇인가요?

img·br·hr·input·meta·link처럼 안에 내용이 없는 태그들입니다. 이런 태그에 </img>를 붙이면 브라우저가 무시합니다. XHTML 시절 습관대로 <br />처럼 슬래시를 넣어도 되지만, HTML에서는 없어도 같습니다.

Q. div와 section은 뭐가 다른가요?

div는 아무 뜻이 없는 상자이고, section은 제목을 가진 하나의 주제 묶음입니다. 그 자리에 제목을 붙일 수 있으면 section, 그저 묶어서 스타일만 주려는 것이면 div가 맞습니다.

Q. 태그 이름은 대문자로 써도 되나요?

HTML에서는 대소문자를 가리지 않아 <DIV>도 동작합니다. 다만 관행은 소문자이고, XHTML이나 SVG처럼 XML 규칙을 따르는 곳에서는 소문자만 유효합니다.

Q. 폐기된 태그를 쓰면 어떻게 되나요?

브라우저 대부분이 아직 그려 주기는 합니다. 다만 표준에서 물러난 태그라 언제 사라져도 이상하지 않고, 대체 수단이 이미 있습니다 — center는 CSS로, font도 CSS로, marquee는 CSS 애니메이션으로 대신합니다.