HTML5
1.DOCTYPE
개념 DOCTYPE은 브라우저가 어떤 규칙으로 페이지를 렌더링할지 결정한다. DOCTYPE이 선언되면 브라우저는 표준 모드로 렌더링하고, 누락되거나 구식 선언이면 쿼크 모드로 렌더링되어 레이아웃이나 박스 모델 등에서 호환성 문제가 생길 수 있다. HTML5에서는 ``을
2.<html>
모든 HTML 문서의 최상위 요소lang 속성으로 문서의 기본 언어를 지정일반적으로 <html>에 직접 스타일이나 이벤트를 걸지 않는다.RTL 언어는 dir="rtl" 속성을 사용html에 data-theme 속성을 두고 테마 스위치로 활용하기도 한다.
3.<head>
HTML 문서의 메타데이터를 담는 영역화면에 직접 표시되지 않는 정보<title>은 반드시 포함해야 하는 요소임<meta charset="utf-8"><meta name="viewport" content="width=device-width, initia
4.<body>
브라우저에 실제로 표시되는 영역
5.lang 속성
요소에 포함된 텍스트의 언어를 명시해준다.문서의 일부가 다른 언어라면 해당 범위 요소에 lang을 재지정해 혼합 언어를 정확히 표기한다.자식 요소로 상속된다.dir: 언어 방향성을 명시meta charset : 문자 인코딩 선언
6.<meta>
문서의 메타데이터를 정의한다.닫는 태그가 없는 빈 요소로, 속성 조합으로 의미가 정해진다.charset : 문자 인코딩name + content : 의미 있는 문서 레벨 메타데이터 (예: description, author, viewport, theme-color 등)
7.<title>
문서의 브라우저 탭/창 제목을 지정한다.
8.<base>
문서 전체에서 사용되는 상대 URL의 기준과 링크/폼의 기본 target을 지정한다.문서당 최대 1개만 존재하애 하며, 보통 head의 다른 링크/스크립트보다 앞에 둔다.styles/main.css ⇒ https://example.com/project/docs
9.<link>
현재 문서와 외부 리소스의 관계를 선언하고 연결하는 빈 요소이다.사이트에 외부 CSS를 붙일 때파비콘을 제공할 때preload 또는 prefetch를 할 때CSS 연결파비콘
10.element란?
HTML 문서의 기본 단위이다.'여는 태그 + 콘텐츠 + 닫는 태그' 전체 묶음을 의미한다.일부 요소는 닫는 태그가 없는 빈 요소이다.div 남용 대신 의미 있는 요소를 사용aria 속성은 의미론이 부족할 때만 보완적으로 사용
11.tag란?
꺽쇠 괄호 <, >로 둘러싸인 마크업 기호이다.태그에는 속성을 포함하여 추가 정보나 동작을 지정할 수 있다.불필요한 태그 중첩 최소화
12.attribute란?
HTML 태그에 부가 정보를 제공하는 이름=값 쌍값은 따옴표로 감싸는 것이 권장된다.boolean 속성은 이름만으로 참을 의미한다.전역 속성은 거의 모든 요소에서 사용 가능하다. (예: id, class, style, title, hidden, tabindex, ari
13.중첩 규칙
태그를 다른 태그 안에 넣어 계층 구조를 만드는 규칙여는 태그와 닫는 태그의 순서를 반드시 지켜야 한다. (예: 먼저 연 것은 나중에 닫아야 한다.)부모-자식 관계가 명확해야 하며, 특정 태그는 포함할 수 있는 자식의 종류가 제한된다.시맨틱 규칙과 콘텐츠 모델에 따라
14.빈 요소
자식 노드를 가질 수 없고, 내용 없이 동작하는 HTML 요소종료 태그를 사용하면 안된다.속성으로 동작을 정의한다.<hr><img><link><meta><input>
15.블록/인라인
블록 요소: 한 줄 전체를 차지하며 앞뒤로 줄바꿈이 발생하는 요소 유형인라인 요소: 줄바꿈 없이 한 줄 안에서 필요한 너비만 차지하는 요소 유형CSS의 display 속성으로 변경할 수 있다.블록은 width/height/margin/padding을 적용할 수 있다.인
16.전역 속성
대부분의 HTML 요소에 공통적으로 사용할 수 있는 속성들모든 요소에 지정할 수 있으나, 특정 요소에서는 효과가 없을 수 있다.요소의 식별, 스타일, 접근성, 상호작용 등을 보완한다.idclassstyletitletabindexhiddenlangdirdraggablec
17.<header>
문서나 섹션의 머리말을 나타내는 시맨틱 요소소개/탐색/브랜딩 정보를 담는다.페이지 전체의 헤더일 수도 있고, article/section 등 각 섹션의 헤더로도 반복 사용할 수 있다.접근성전역 헤더는 role="banner"를 고려
18.<nav>
문서나 애플리케이션에서 "탐색을 위한 링크 묶음"을 나타내는 시맨틱 섹션이다.페이지 안에 여러 개의 nav를 둘 수 있다. (예: 사이트 상단의 메인 메뉴, 사이드바 카테고리)페이지에 nav가 여러 개라면 각각 목적을 구분해 aria-label을 부여하고, 메인과 보조
19.<main>
페이지에서 가장 핵심적인 고유 콘텐츠를 담는 시맨틱 영역이다.한 문서에 하나만 사용하는 것이 원칙이며, 보통 body 내부의 최상위 수준에 위치한다.레이아웃의 공통 UI는 main 바깥에 둔다.스크린리더의 "메인으로 건너뛰기" 같은 빠른 탐색 지점을 제공하는 데 유리하
20.<section>
문서 안에서 주제별로 구획된 논리적 섹션을 나타내는 시맨틱 요소이다.페이지에 여러 개 사용 가능하며, 일반적으로 섹션 제목을 포함해 해당 구획의 주제를 명시하는 것이 권장된다.그룹화만 필요하고 특별한 의미가 없으면 div가 더 적절하며, section은 의미 있는 주제
21.<article>
문서 안에서 "독립적으로 배포하고 재사용할 수 있는" 콘텐츠 단위를 나타내는 시맨틱 요소다. (예: 블로그 글, 뉴스 기사, 포럼 게시글 등)내부에 header/section/footer를 포함해 자체적으로 하나의 미니 문서를 구성할 수 있다.article 안에 sec
22.<aside>
페이지의 주요 콘텐츠와 직접적이지는 않지만, 관련성 있는 보조 정보를 담는 영역이다.없어도 본문 이해에는 문제가 없지만, 있으면 문맥을 보완해주는 부차적 콘텐츠를 위한 태그다.레이아웃의 사이드바는 물론, 본문 내부의 작은 참고 박스에도 사용할 수 있다.사이드바인기 글,
23.<footer>
문서 전체 또는 특정 섹션의 바닥글 정보를 담는 시맨틱 영역이다.보통 저작권, 작성자, 연락처, 관련 링크처럼 해당 구획을 마무리하는 정보가 들어간다.전역 footer저작권, 약관, 개인정보처리방침, 문의, SNS, 구독, 주소섹션 footer글의 태그, 공유 버튼,
24.<h1>-<h6>
문서와 섹션의 제목을 나타내는 6단계의 시맨틱 요소h1이 가장 상위를 의미h6가 가장 하위를 의미제목은 글자 크기를 위한 것이 아니라 "문서 구조와 계층"을 표현하기 위한 것이다.글자 크기/두께 등 표현은 CSS로 제어한다.
25.<p>
문단을 나타내는 블록 레벨 요소단순 줄바꿈이 아닌 논리적 덩어리로서의 텍스트를 표현한다.시각적 줄바꿈은 CSS나 <br>로 처리한다.한 문단 안의 단순 줄바꿈은 <br>가 아닌 CSS로 해결을 우선 고려한다.강조는 strong/em처럼 의미 있는 인라인 요소
26.<span>
인라인 범용 컨테이너이다.의미가 없는 작은 구간의 텍스트나 인라인 요소를 묶을 때 사용한다.주로 스타일링/스크립팅 훅으로 활용한다.의미를 부여하지 않으므로, 의미가 필요한 경우에는 strong/em/mark/code 등 적절한 시맨틱 인라인 요소를 우선 고려한다.특정
27.<strong>
강한 중요성을 표현하는 시맨틱 인라인 요소이다.스크린리더는 strong 영역을 더 강조하여 읽을 수 있으며, 검색/요약에도 신호가 된다.strong 안에 em 등 다른 인라인 요소를 중첩할 수 있다.단지 두껍게 보이게 하려면 CSS를 사용하고, 중요함을 전달하려면 st
28.<em>
문맥상 강조를 나타내는 시맨틱 인라인 요소이다.읽을 때의 억양/강세가 달라져 의미가 변하는 부분을 표시한다.em을 중첩하면 강조 강도가 단계적으로 높아진다.단순히 스타일을 바꾸고 싶다면 CSS를, 의미상 강조가 필요하면 em을 쓴다.중요함을 알리고 싶으면 strong,
29.<small>
저작권, 법적 표기, 부가 설명 등 주요 내용에 덧붙여지는 짧은 부차적 정보를 나타내는 시맨틱 인라인 요소이다. (예: 주소, 저작권, 가격표 등)짧은 정보에만 국한한다.주요 콘텐츠가 아닌 보조적 정보만 small로 설정한다.
30.<mark>
문서에서 사용자의 현재 맥락과 관련성이 있는 텍스트 구간을 하이라이트로 표시하는 시맨틱 인라인 요소이다.강조가 아니라, 참조/검색 결과/현재 활동과 연결된 부분 등 특별한 관심이 필요한 영역을 뜻한다.일반적은 중요 강조(strong), 문맥 강조(em)과 다르게 특정
31.<time>
문서에서 날짜 또는 시간 정보를 시맨틱하게 표시하는 인라인 요소다.사람이 읽기 쉬운 형태(예: 2025년 8월 17일)와 기계가 파싱할 수 있는 표준 데이터(datetime 속성)를 함께 제공할 수 있다.날짜 /시간 정보가 데이터인 경우 반드시 time 태그를 사용한다
32.<abbr>
약어, 줄임말, 머리글자를 나타내는 시맨틱 인라인 태그다. (예: 기술 용어, 조직명, 방침, 표준, 각종 줄임말)title 속성과 함께 사용하면 원래 의미를 툴팁으로 제공할 수 있다.dfn 태그(용어 공식 정의 마크업)와 함께 쓰면 용어의 공식 정의 + 약어 표시를
33.<code>
코드 조각, 소스 코드, 변수명, 명령어 등 컴퓨터 코드를 시맨틱하게 표시하는 인라인 요소이다.주요 목적은 코드 구간을 명확하게 구분하는 것이다.모노스페이스 글꼴로 기본 표시되어 코딩 특유의 느낌을 준다.마크다운에서 \`\`로 감싼 인라인 코드가 HTML 변환 시 &l
34.<pre>
들여쓰기, 줄바꿈, 공백 등 작성한 그대로의 원본 서식이 유지된 텍스트 블록을 시맨틱하게 표시하는 블록 요소이다.코드, 시 등 형식 자체가 정보의 일부인 콘텐츠에서 사용한다.
35.<kbd>
"키보드 입력"을 의미하는 인라인 요소기본적으로 모노스페이스 글꼴로 렌더링된다.
36.<q>
짧은 인라인 인용문을 표시하는 요소브라우저가 보통 앞뒤에 따옴표를 자동으로 붙여준다.cite 속성으로 인용의 출처 URL을 제공할 수 있으나, 화면에 직접 표시되지는 않는다.긴 인용문은 blockquote를 사용하고, q는 짧은 인용에 적합하다.언어별 인용부호 차이를
37.<blockquote>
긴 인용문을 의미론적으로 나타내는 블록 요소이다.cite 속성으로 인용의 출처 URL을 메타데이터로 제공할 수 있다.짧은 인라인 요소는 q가 더 적합하고, blockquote는 문단/여러 문장 같은 "길고 독립된" 인용에 사용한다.
38.<cite>
저작물의 제목 또는 출처를 표시하는 인라인 시맨틱 요소이다. (예: 책, 영화, 논문, 음악, 웹사이트 등)사람 이름이 아니라 작품의 제목을 넣는 것이 권장된다.q와 blockquote는 인용된 내용을 다루지만, cite는 인용의 출처를 담당한다.
39.<sub>
텍스트를 아래 첨자로 표시하는 인라인 시맨틱 요소이다.화학식, 수학 표기, 각주 번호 등에 사용된다.단순히 모양을 위해 쓰지 말고, 타이포그래피 관례상 아래 첨자여야 할 때만 사용한다. (예: H_20, X_1)
40.<sup>
텍스트를 위 첨자로 표시하는 인라인 시맨틱 요소수학 지수, 각주 번호 등을 표기할 때 사용한다.시각적 효과만을 위해 남용하지 말고, 의미가 실제로 위 첨자여야 하는 경우에 사용한다.
41.<wbr>
Word Break Opportunity의 약자여기서 줄바꿈이 가능하다는 힌트를 브라우저에게 제공하는 인라인 요소다.줄바꿈을 강제하지 않으며, 레이아웃이 좁아져 필요할 때만 해당 위치에서 줄을 바꿀 수 있게 한다.긴 문자열의 오버플로우를 방지하고 자연스러운 줄바꿈 위치
42.<br>
줄바꿈을 즉시 강제하는 인라인 빈 요소이다.시맨특 의미는 "여기서 행을 바꾼다"이다.텍스트 흐름을 끊지 않고 같은 문단 내에서 줄만 바꾼다.문단 구분 용도로 쓰지 않는다.
43.<hr>
주제의 전환을 나타내는 수평 구분선콘텐츠 흐름 상의 의미 있는 단절을 표현한다.HTML5부터 시맨틱 의미가 "주제 전환"으로 정의됐다.단순히 선을 긋기 위한 용도라면 CSS로 처리하는 것이 좋다.
44.<a>
하이퍼링크를 생성해 다른 문서, 현재 문서의 특정 위치, 이메일/전화, 다운로드 등으로 이동하는 인라인 시맨틱 요소이다.새 탭 사용 시 rel="noopener noreferrer" 권장 (보안)페이지 이동은 a, 페이지 내 동작은 button을 사용한다."여기를 클릭
45.<a>의 href 속성
링크가 어디로 이동할지를 지정하는 속성이다.보통 a, link, area, base 요소에 사용된다.값으로 절대 URL, 상대 URL, 해시(문서 내 앵커), 다양한 스킴(mailto:, tel:, ftp:, data:, javascript: 등)을 지정할 수
46.<a>의 target 속성
링크를 클릭했을 때 문서를 "어디에서" 열지 결정하는 a 태그의 속서이다.기본값은 현재 탭에서 열리는 \_self이다.\_self: 현재 탭/프레임에서 연다.\_blank: 새 탭(또는 새 창)에서 연다.\_parent: 부모 프레임에서 연다(프레임 사용 시).\_to
47.<a>의 rel(noopener, noreferrer) 속성
rel은 링크된 문서와의 관계를 나타내는 a 태그의 속성이다.noopener: 새 탭으로 열린 페이지가 원본 페이지 window(opener)에 접근하지 못하게 막는다noreferrer: 리퍼러(Referer) 헤더를 보내지 않아, 방문 출처 URL이 전달되지 않게 한
48.<a>의 download 속성
a 태그에서 링크를 열지 않고 파일로 직접 다운로드하도록 지시하는 속성이다.href가 가리키는 리소스를 저장하도록 브라우저에 힌트를 준다.값이 있으면 저장 파일명으로 사용된다. (예: download="파일이름.txt")
49.<link>의 rel, as 속성
rel: 현재 문서와 링크된 리소스의 “관계(relationship)”를 나타내는 속성으로, 값에 따라 브라우저의 로딩 전략과 의미가 달라진다.as: 리소스의 종류를 지정해 프리로드의 우선순위, 보안 체크(CSP), 캐시 키 등을 정확히 설정하게 한다. 주로 rel="
50.breadcrumb 패턴
사용자가 현재 페이지의 위치를 계층 구조로 보여주는 보조 내비게이션 패턴이다.주 내비게이션을 보완해 정보 구조를 이해하고 상위로 빠르게 이동하게 돕는다.출처:https://brunch.co.kr/@blackindigo-red/45인지 부하 감소 (지금 어디인지
51.<ul>
순서가 없는 목록을 나타내는 블록 레벨 요소이다.자식으로 <li>만 포함한다.불릿 모양은 list-style 속성으로 변경 가능하다.<li> 안에 또 다른 ul/ol을 넣어 계층적 목록 구성이 가능하다.내비게이션 메뉴nav > ul > li > a 구조카드형
52.<ol>
순서가 있는 목록을 나타내는 시맨틱 블록 레벨 요소항목 순서가 의미에 영향을 줄 때 사용한다.자식으로 <li>만 포함하는 것이 원칙이다.list-style-type으로 숫자를 로마 숫자나 알파벳 등으로 변경 가능하다.start 속성으로 시작 번호 지정 가능하다.r
53.<li>
목록 항목을 나타내는 요소목록 내 각 아이템 하나를 시맨틱하게 표현한다.value 속성으로 번호를 개별 지정할 수 있다.li는 반드시 ul/ol/menu 안에만 둔다.내비게이션에서 현재 페이지를 표시할 땐 aria-current="page"를 a 또는 li의 자식에 적
54.<dl>
dl은 "용어-설명" 쌍을 나타내는 정의 목록 컨테이너이다.자식으로 용어(dt)와 설명(dd)를 포함한다."이름-홍길동, 역할-개발자" 처럼 속성-값 표시에 적합하다.FAQ처럼 질문과 답변도 적합하다.
55.<dt>
정의 목록(dl)에서 정의할 항목을 나타내는 요소이다.레이블 역할을 한다.하나의 dt 뒤에 여러 dd가 올 수 있고, 반대로 여러 dt를 하나의 dd가 설명할 수도 있다.관련 dd가 바로 뒤에 오도록 배치해 의미적 관계를 유지한다.CSS Grid/Flex로 dt와 dd
56.<dd>
정의 목록(dl)에서 레이블(dt)를 설명으로 풀어주는 요소이다.하나의 dt 뒤에 여러 dd가 올 수도 있고, 여러 dt를 하나의 dd가 설명할 수도 있다.
57.중첩 리스트
중첩 리스트는 li 안에 또 다른 ul/ol/dl을 넣어 계층 구조를 만드는 패턴이다.ul/ol의 직계 자식은 반드시 li여야 한다. ul/ol 바로 안에 다른 ul/ol을 넣지 말고, 반드시 li 태그 안에 넣는다.
58.<img>
문서에 이미지를 넣는 빈 요소이다.닫는 태그가 없다.반드시 src와 alt 속성을 함께 사용한다.이미지의 크기는 CSS로 제어 권장 (보통 max-width:100%, height: auto;로 반응형 처리)loading="lazy"로 로딩 최적화이미지를 링크로 만들려
59.<figure>
문서의 본문과 관련은 있지만, 제거하거나 위치를 옮겨도 본문 흐름이 깨지지 않는 독립적인 콘텐츠 묶음을 나타내는 시맨틱 블록 요소이다.보통 이미지, 다이어그램, 코드, 인용, 표 등과 그 설명을 함께 감싼다.제목/설명/출처 등 메타 정보를 명시figure 안에서 첫 번
60.<audio>
오디오 콘텐츠를 웹 브라우저에서 직접 재생할 수 있게 해주는 요소이다.대부분의 브라우저에서 자동재생이 제한된다.청각 장애인을 위한 대체 텍스트 제공이 필요하다.JS로 커스텀 플레이어를 만들거나, 진행률 표시, 볼륨 조절 등의 고급 기능 구현이 가능하다.
61.<video>
비디오를 웹 브라우저에서 직접 재생할 수 있게 해주는 요소이다.자동재생, 반복재생, 음소거, 사전로딩 등 지원비디오 로드 전 표시할 썸네일 이미지 설정 가능대부분의 브라우저에서 자동재생을 제한함width/height를 미리 설정하지 않으면 로딩 중 페이지 레이아웃이 변
62.<source>
<audio>, <video>, <picutre> 요소에 사용할 수 있는 다중 미디어 자원을 정의하는 요소이다.브라우저 호환성 문제를 해결하기 위해 여러 개의 미디어 파일 형식을 제공할 때 사용한다.브라우저가 지원하는 첫 번째 형식을 자동으로 선택하여
63.<track>
\-<audio>와 <video> 요소에 자막, 캡션, 설명 등의 시간별 텍스트 트랙을 제공하는 요소이다.미디어 재생과 동기화되는 시간 기반 텍스트 콘텐츠를 정의한다.WebVTT(.vtt) 형식의 파일을 사용하여 특정 시간대에 표시할 텍스트를 지정하고, 접근
64.<table>
행과 열 구조로 데이터를 표현하는 테이블을 만드는 요소이다.table > tr > td/th 순서의 계층 구조thead, tbody, tfoot으로 머리글, 본문, 바닥글 구분colspan, rowspan 속성으로 셀 확장 가능레이아웃 목적으로 사용 금지caption,
65.<form>
사용자로부터 데이터를 입력받아 서버로 전송하기 위한 입력 양식을 만드는 컨테이너 요소다양한 입력 요소들을 포함하여 구성된다.action 속성으로 데이터를 전송할 서버 URL을 지정한다.method 속성으로 GET 또는 POST 방식을 선택할 수 있다.name 속성이 있
66.<textarea>
여러 줄의 텍스트를 입력받을 수 있는 폼 요소<input type="text">와 달리, 긴 텍스트나 여러 줄의 내용을 자유롭게 입력할 수 있다.form의 하위 요소로 사용된다.rows 속성과 cols 속성으로 기본 크기를 설정한다.여는 태그와 닫는 태그 사이에
67.<select>
드랍다운 리스트를 만드는 폼 요소이다.내부에 option 태그들을 포함하여 각각의 선택 항목을 정의한다.기본적으로 하나만 선택 가능하지만, multiple 속성으로 다중 선택 지원optgroup 태그로 관련 옵션들을 그룹으로 묶을 수 있다.selected 속성으로 미리
68.<button>
사용자가 클릭할 수 있는 버튼을 정의할 때 사용input 태그와 달리 닫는 태그가 있어 내부에 텍스트나 이미지 등의 콘텐츠를 삽입할 수 있다. (예: 텍스트, 이미지, HTML 요소)type 속성으로 버튼의 동작을 제어한다. (예: submit(기본값), reset,
69.<fieldset>
개념 form 안에서 연관된 입력 요소들과 그에 대응하는 label 들을 그룹으로 묶는 요소이다. 특징 박스 모양의 경계선이 생겨, 시각적 구분을 제공한다. legend 태그를 함께 쓰는 것이 좋다. 예시
70.required 속성
input, select, textarea 등 폼 요소에 사용하는 Boolean 속성이다.이 속성이 있으면, 해당 필드는 반드시 입력해야 폼이 제출된다.사용자가 비워두고 제출하려고 하면, 브라우저가 자동으로 경고 메시지를 표시하면서 제출을 막아준다.checkbox나 r
71.placeholder 속성
input이나 textarea 등에 입력할 값의 예시나 간단한 안내를 잠시 보여주는 속성이다.사용자가 입력을 시작하면 이 힌트는 자동으로 사라진다.짧은 안내만 권장한다.value 속성은 실제 초기값이므로, 폼 전송시 그 값이 그대로 서버로 가지만, placeholder
72.autocomplete 속성
브라우저가 사용자가 이전에 입력했던 값을 자동으로 완성하거나 안내하는 기능을 허용할지 지정한다.email, current-password, family-name, tel 등 구체적인 값을 지정할 수도 있어, 브라우저가 더 정확하게 자동완성 값을 불러올 수 있게 한다.f
73.<datalist>
미리 정의된 옵션들을 제안해 주는 자동완성 드롭다운 기능을 제공한다.HTML5에서 추가된 태그select 태그와 달리 목록 외의 값도 자유롭게 입력할 수 있다. (옵션에 없는 값도 입력할 수 있다.)input의 list 속성과 datalist의 id 값이 일치해야 한다
74.개발자 도구
웹 페이지의 내부 구조, 코드, 성능, 네트워크 문제 등을 쉽게 분석하고 디버깅할 수 있도록 브라우저에 내장된 도구원하는 영역을 클릭하면 해당 요소의 HTML 구조와 적용된 스타일을 실시간으로 보여준다.서버로 오가는 모든 데이터를 추적할 수 있다.콘솔에서 명령을 실행하
75.주석
코드에 설명이나 메모를 추가할 때 사용하는 기능이다.<!--주석 내용--> 형식으로 사용한다.브라우저에 표시되지 않고, 오로지 소스 코드 상에서만 보인다.한 줄/여러 줄 모두 사용 가능하다.코드를 일부 일시적으로 실행하지 않고 비활성화할 때 자주 사용한다.
76.들여쓰기
코드의 구조와 계층을 한눈에 보기 쉽도록 만드는 정렬 규칙주로 2칸 또는 4칸의 공백을 사용들여쓰기는 코드 가독성, 협업, 유지보수성을 높여줌HTML 자체 문법은 아니지만, 좋은 코드 습관으로 권고된다.