` `과 ` `의 차이는 무엇인가요?

` `은 시맨틱 태그입니다 - 그 내용이 의미 있는 주제별 묶음임을 브라우저와 스크린 리더에 알리며, 보통 제목을 가집니다. ` `는 의미가 없고 스타일링이나 스크립팅을 위한 일반 컨테이너일 뿐입니다. 맞는 시맨틱 태그(` `, ` `, ` `)가 있으면 그것을 쓰고, 마땅한 것이 없을 때만 ` `로 돌아가세요.

HTML 치트시트

Q: 모든 HTML 태그에 닫는 태그가 필요한가요?

대부분은 필요합니다(` ... `). 하지만 일부 "보이드(void)" 요소는 아무것도 담을 수 없어 닫는 태그가 없습니다: ` `, ` `, ` `, ` `, ` `, ` `. HTML5에서는 끝에 슬래시를 붙이거나 붙이지 않고 작성할 수 있습니다.

마지막 업데이트 2026년 5월 27일

Web 플레이그라운드에서 실행해 보기 HTML 무료로 배우기

문서 구조

모든 HTML 페이지는 이 골격으로 시작합니다.

요소	기능
`<!DOCTYPE html>`	문서를 HTML5로 선언 (첫 줄)
`<html lang="en">`	루트 요소; `lang`이 언어를 설정
`<head>`	메타데이터: 제목, 링크, 스크립트 - 페이지에 표시되지 않음
`<meta charset="UTF-8">`	문자 인코딩 (항상 포함)
`<meta name="viewport" content="width=device-width, initial-scale=1">`	모바일에서의 반응형 배율 조정
`<title>`	브라우저 탭과 검색 결과에 표시되는 페이지 제목
`<body>`	페이지에 보이는 모든 것이 여기 들어감

텍스트 및 제목

요소	기능
`<h1>` … `<h6>`	제목, `<h1>`이 가장 중요 (페이지당 하나)
`<p>`	텍스트 단락
`<br>`	줄바꿈 (닫는 태그 없음)
`<hr>`	주제 구분 / 수평선
`<strong>`	중요한 텍스트 (굵게)
`<em>`	강조 텍스트 (기울임)
`<span>`	텍스트 일부에 스타일을 주는 인라인 컨테이너
`<code>`	인라인 코드
`<pre>`	미리 서식 지정된 텍스트 (공백 유지)
`<blockquote>`	인용된 텍스트 블록

링크 및 이미지

요소	문법
링크	`<a href="https://coddy.tech">Coddy</a>`
새 탭에서 열기	`<a href="..." target="_blank" rel="noopener">`
앵커 (id로 이동)	`<a href="#section">Jump</a>`
이미지	`<img src="cat.png" alt="A cat" width="200">`
반응형 이미지	`<img src="..." srcset="..." sizes="...">`
캡션이 있는 그림	`<figure><img ...><figcaption>…</figcaption></figure>`

요소	기능
`<ul>`	순서 없는 (글머리표) 목록
`<ol>`	순서 있는 (번호) 목록
`<li>`	목록 항목 (`<ul>` 또는 `<ol>` 안)
`<dl>`	정의 목록
`<dt>` / `<dd>`	정의 용어 / 정의 설명

표

요소	기능
`<table>`	표 컨테이너
`<thead>` / `<tbody>` / `<tfoot>`	표의 머리글, 본문, 바닥글 그룹
`<tr>`	표 행
`<th>`	헤더 셀 (굵게, 가운데 정렬)
`<td>`	데이터 셀
`colspan` / `rowspan`	열 / 행에 걸쳐 셀 병합

폼 및 입력

입력을 수집하는 모든 폼의 구성 요소.

요소	문법 / 용도
폼	`<form action="/submit" method="post">`
텍스트 입력	`<input type="text" name="q" placeholder="Search">`
이메일 / 비밀번호	`<input type="email">`, `<input type="password">`
체크박스 / 라디오	`<input type="checkbox">`, `<input type="radio">`
숫자 / 날짜	`<input type="number">`, `<input type="date">`
레이블	`<label for="q">Search</label>`
여러 줄	`<textarea rows="4"></textarea>`
드롭다운	`<select><option>One</option></select>`
버튼	`<button type="submit">Send</button>`
필수 필드	`<input required>`

시맨틱 및 레이아웃 태그

일반적인 <div> 대신 이것들을 사용하면 브라우저, 스크린 리더, 검색 엔진이 페이지를 이해합니다.

요소	표시하는 대상
`<header>`	페이지나 섹션의 상단 (로고, 내비게이션)
`<nav>`	내비게이션 링크
`<main>`	주된 콘텐츠 (페이지당 하나)
`<section>`	주제별 콘텐츠 묶음
`<article>`	독립적인 콘텐츠 (게시물, 카드)
`<aside>`	사이드바 / 부수적인 콘텐츠
`<footer>`	페이지나 섹션의 하단
`<div>`	일반 블록 컨테이너 (의미 없음)

자주 쓰는 전역 속성

속성	기능
`id`	요소의 고유 식별자
`class`	하나 이상의 클래스 이름 (CSS / JS용)
`style`	인라인 CSS (아껴 사용)
`title`	마우스를 올렸을 때 표시되는 툴팁 텍스트
`data-*`	사용자 정의 데이터 속성, 예: `data-id="42"`
`hidden`	요소를 숨김

자주 쓰는 모든 HTML 태그와 속성을 기능별로 묶어 정리했습니다. 이 HTML 치트시트는 페이지 골격, 텍스트와 링크, 이미지와 미디어, 목록, 표, 폼, 그리고 마크업에 의미를 부여하는 시맨틱 태그를 다룹니다.

모두 표준 HTML5이며 모든 최신 브라우저에서 동작합니다. 태그를 복사하거나, HTML 플레이그라운드를 열어 실시간 미리보기와 함께 편집해 보세요 - 설정이 필요 없습니다.

HTML 치트시트 자주 묻는 질문

이 HTML 치트시트는 무료인가요?

네. 이 HTML 치트시트는 회원 가입 없이 무료로 사용할 수 있습니다. 즐겨찾기에 추가해 두고 태그나 속성을 찾아봐야 할 때마다 다시 방문하세요.

<section>과 <div>의 차이는 무엇인가요?

<section>은 시맨틱 태그입니다 - 그 내용이 의미 있는 주제별 묶음임을 브라우저와 스크린 리더에 알리며, 보통 제목을 가집니다. <div>는 의미가 없고 스타일링이나 스크립팅을 위한 일반 컨테이너일 뿐입니다. 맞는 시맨틱 태그(<section>, <article>, <nav>)가 있으면 그것을 쓰고, 마땅한 것이 없을 때만 <div>로 돌아가세요.

모든 HTML 태그에 닫는 태그가 필요한가요?

대부분은 필요합니다(<p>...</p>). 하지만 일부 "보이드(void)" 요소는 아무것도 담을 수 없어 닫는 태그가 없습니다: <img>, <br>, <hr>, <input>, <meta>, <link>. HTML5에서는 끝에 슬래시를 붙이거나 붙이지 않고 작성할 수 있습니다.

HTML을 온라인에서 연습할 수 있나요?

네. HTML 플레이그라운드를 열어 실시간 미리보기와 함께 브라우저에서 HTML을 작성해 보세요 - 설치가 필요 없습니다. 체계적으로 배우고 싶다면, Coddy의 무료 인터랙티브 HTML 강좌가 태그, 폼, 레이아웃을 단계별로 가르칩니다.

이 치트시트는 초보자에게 적합한가요?

네. 페이지 골격과 가장 먼저 사용할 일상 태그로 시작해 폼과 시맨틱 마크업으로 이어지므로, 첫날부터 상단 섹션을 사용할 수 있습니다.