<!DOCTYPE html> | HTML5 문서 타입 선언 |
<html lang="en"> | 언어가 있는 루트 요소 |
<head> | 문서 메타데이터 컨테이너 |
<body> | 문서 본문 내용 |
<meta charset="UTF-8"> | 문자 인코딩 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | 반응형 뷰포트 |
<title>Page Title</title> | 페이지 제목 |
<link rel="stylesheet" href="style.css"> | 스타일시트 연결 |
<script src="script.js"></script> | 자바스크립트 연결 |
<script defer src="script.js"></script> | 스크립트 지연 로딩 |
<meta name="description" content="..."> | 페이지 설명 (SEO) |
<meta name="keywords" content="..."> | 키워드 (SEO) |
<meta name="author" content="..."> | 저자 이름 |
<meta name="robots" content="index,follow"> | 검색 엔진 지시자 |
<meta property="og:title" content="..."> | Open Graph 제목 |
<meta property="og:description" content="..."> | Open Graph 설명 |
<meta property="og:image" content="..."> | Open Graph 이미지 |
<link rel="icon" href="favicon.ico"> | 파비콘 |
<link rel="canonical" href="..."> | 정식 URL |
<header> | 헤더 섹션 |
<nav> | 내비게이션 섹션 |
<main> | 주요 콘텐츠 (유일) |
<article> | 독립적 콘텐츠 |
<section> | 주제별 그룹 |
<aside> | 사이드바 콘텐츠 |
<footer> | 푸터 섹션 |
<figure> | 캡션이 있는 그림 |
<figcaption> | 그림 캡션 |
<address> | 연락처 정보 |
<time datetime="2024-01-01"> | 기계 판독 형식의 날짜/시간 |
<mark> | 강조 텍스트 |
<details> | 확장 가능한 세부 사항 |
<summary> | 세부 사항 요약 |
<dialog> | 대화 상자 |
<progress value="50" max="100"> | 진행률 표시줄 |
<meter value="0.7"> | 게이지/미터 |
<h1> to <h6> | 제목 (h1 = 가장 중요) |
<p> | 단락 |
<br> | 줄바꿈 |
<hr> | 수평선 |
<pre> | 서식이 지정된 텍스트 |
<blockquote> | 블록 인용 |
<strong> | 강한 중요성 (굵게) |
<em> | 강조 (기울임) |
<b> | 굵게 (중요성 없음) |
<i> | 기울임 (강조 없음) |
<u> | 밑줄 |
<s> | 취소선 |
<small> | 작은 텍스트 |
<sub> | 아래 첨자 |
<sup> | 위 첨자 |
<code> | 인라인 코드 |
<kbd> | 키보드 입력 |
<var> | 변수 |
<samp> | 샘플 출력 |
<abbr title="..."> | 툴팁이 있는 약어 |
<cite> | 인용 |
<q> | 인라인 인용 |
<ul> | 순서 없는 목록 |
<ol> | 순서 있는 목록 |
<li> | 목록 항목 |
<ol start="5"> | 시작 번호 지정 |
<ol reversed> | 역순 |
<dl> | 설명 목록 |
<dt> | 설명 용어 |
<dd> | 설명 내용 |
<a href="url">Link</a> | 하이퍼링크 |
<a href="#id">Anchor</a> | 앵커 링크 |
<a href="mailto:email"> | 이메일 링크 |
<a href="tel:+1234567890"> | 전화 링크 |
<a target="_blank"> | 새 탭에서 열기 |
<a rel="noopener noreferrer"> | 새 탭 보안 |
<a download="filename"> | 다운로드 링크 |
<img src="url" alt="description"> | 대체 텍스트가 있는 이미지 |
<img loading="lazy"> | 지연 로딩 |
<img width="100" height="100"> | 크기 지정 |
<picture> | 반응형 이미지 |
<source srcset="img.webp" type="image/webp"> | 이미지 소스 |
<img srcset="small.jpg 300w, large.jpg 800w"> | 반응형 srcset |
<img sizes="(max-width: 600px) 100vw, 50vw"> | 이미지 크기 |
<video src="video.mp4" controls> | 컨트롤이 있는 비디오 |
<video autoplay muted loop> | 자동 재생 비디오 |
<video poster="thumbnail.jpg"> | 비디오 포스터 |
<audio src="audio.mp3" controls> | 컨트롤이 있는 오디오 |
<source src="video.mp4" type="video/mp4"> | 미디어 소스 |
<track kind="subtitles" src="subs.vtt"> | 자막 |
<iframe src="url"> | 외부 페이지 임베드 |
<iframe sandbox> | 샌드박스 iframe |
<iframe allow="fullscreen"> | 전체 화면 허용 |
<embed src="file.pdf"> | 콘텐츠 임베드 |
<object data="file.pdf"> | 객체 임베드 |
<canvas id="canvas"> | 그래픽용 캔버스 |
<svg> | SVG 그래픽 |
<table> | 테이블 컨테이너 |
<thead> | 테이블 헤더 그룹 |
<tbody> | 테이블 본문 그룹 |
<tfoot> | 테이블 푸터 그룹 |
<tr> | 테이블 행 |
<th> | 헤더 셀 |
<td> | 데이터 셀 |
<caption> | 테이블 캡션 |
colspan="2" | 여러 열 병합 |
rowspan="2" | 여러 행 병합 |
<th scope="col"> | 열 헤더 범위 |
<th scope="row"> | 행 헤더 범위 |
<colgroup> | 열 그룹 |
<col span="2"> | 열 정의 |
<form action="url" method="post"> | 액션이 있는 폼 |
<form enctype="multipart/form-data"> | 파일 업로드 폼 |
<fieldset> | 폼 컨트롤 그룹 |
<legend> | 필드셋 캡션 |
<label for="id"> | 입력 레이블 |
<input type="text"> | 텍스트 입력 |
<input type="password"> | 비밀번호 입력 |
<input type="email"> | 이메일 입력 |
<input type="number"> | 숫자 입력 |
<input type="tel"> | 전화번호 입력 |
<input type="url"> | URL 입력 |
<input type="search"> | 검색 입력 |
<input type="date"> | 날짜 선택 |
<input type="time"> | 시간 선택 |
<input type="datetime-local"> | 날짜와 시간 |
<input type="color"> | 색상 선택 |
<input type="range"> | 슬라이더 |
<input type="file"> | 파일 업로드 |
<input type="hidden"> | 숨겨진 입력 |
<input type="checkbox"> | 체크박스 |
<input type="radio" name="group"> | 라디오 버튼 |
<select> | 드롭다운 선택 |
<option value="val"> | 선택 옵션 |
<optgroup label="Group"> | 옵션 그룹 |
<select multiple> | 다중 선택 |
<datalist id="list"> | 입력 제안 |
placeholder="..." | 플레이스홀더 텍스트 |
required | 필수 필드 |
disabled | 비활성화된 입력 |
readonly | 읽기 전용 입력 |
autofocus | 로드 시 자동 포커스 |
autocomplete="off" | 자동 완성 비활성화 |
min="0" max="100" | 최소/최대 값 |
step="1" | 단계 증가 |
pattern="[A-Za-z]+" | 정규식 패턴 |
minlength="5" maxlength="10" | 길이 제한 |
accept="image/*" | 허용 파일 유형 |
<button type="submit"> | 제출 버튼 |
<button type="button"> | 일반 버튼 |
<button type="reset"> | 리셋 버튼 |
<input type="submit" value="Submit"> | 제출 입력 |
<textarea rows="4" cols="50"> | 여러 줄 텍스트 |
<output> | 계산 결과 |
id="unique" | 고유 식별자 |
class="name" | CSS 클래스 |
style="color: red" | 인라인 스타일 |
title="tooltip" | 툴팁 텍스트 |
hidden | 요소 숨기기 |
data-*="value" | 커스텀 데이터 속성 |
lang="en" | 언어 코드 |
dir="rtl" | 텍스트 방향 |
alt="description" | 이미지 대체 텍스트 |
aria-label="label" | 접근 가능한 레이블 |
aria-hidden="true" | 스크린 리더에서 숨기기 |
aria-describedby="id" | 설명 참조 |
role="button" | ARIA 역할 |
tabindex="0" | 탭 순서 |
tabindex="-1" | 탭 순서에서 제외 |
onclick="..." | 클릭 이벤트 |
onsubmit="..." | 폼 제출 이벤트 |
onchange="..." | 변경 이벤트 |
oninput="..." | 입력 이벤트 |
onload="..." | 로드 이벤트 |
onerror="..." | 오류 이벤트 |