html

HTML 기초.

문서 구조, 요소, 속성, 중첩, DOM으로 이어지는 HTML 기본

**HTML(HyperText Markup Language)**은 웹 문서의 구조와 의미를 표현하는 마크업 언어다. 브라우저는 HTML을 파싱해 DOM 트리를 만들고, CSS와 JavaScript가 이 구조를 사용한다.

🧱 문서의 기본 구조

HTML 문서가 DOM 트리로 구성되는 구조

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>문서 제목</title>
  </head>
  <body>
    <h1>페이지 제목</h1>
    <p>문서 내용</p>
  </body>
</html>

<!doctype html>: 문서를 HTML5 표준 모드로 해석하게 한다.
<html lang="ko">: 문서의 최상위 요소이며 기본 언어를 알린다.
<head>: 제목, 문자 인코딩, 메타데이터, 외부 리소스를 정의한다.
<body>: 사용자 화면에 표시할 문서 내용을 담는다.

🏷️ 요소와 속성

HTML 요소는 보통 시작 태그, 콘텐츠, 종료 태그로 구성된다.

<a href="/docs" target="_blank">문서 보기</a>

요소(element): <a>문서 보기</a> 전체를 뜻한다.
태그(tag): 요소의 시작과 끝을 표시한다.
속성(attribute): href, target처럼 요소에 추가 정보를 준다.
빈 요소: img, input, br처럼 종료 태그 없이 사용하는 요소다.

속성값은 따옴표로 감싸고, 같은 문서에서는 표기 방식을 일관되게 유지한다.

🪆 중첩과 문서 트리

요소 안에 다른 요소를 넣으면 부모, 자식 관계가 생긴다. 태그가 겹치지 않도록 열린 순서의 반대로 닫아야 한다.

<!-- 올바른 중첩 -->
<p>문서의 <strong>핵심 내용</strong>이다.</p>

<!-- 잘못된 중첩 -->
<p>문서의 <strong>핵심 내용</p></strong>

브라우저는 잘못된 HTML을 가능한 범위에서 복구하지만, 의도와 다른 DOM이 만들어질 수 있다.

🔗 자주 쓰는 콘텐츠 요소

제목: h1부터 h6까지 문서의 제목 계층을 표현한다.
문단: p는 하나의 문단을 나타낸다.
목록: ul, ol, li로 순서 없는 목록과 순서 있는 목록을 만든다.
링크: a는 다른 문서나 같은 문서의 위치로 이동시킨다.
이미지: img에는 콘텐츠를 설명하는 alt를 함께 제공한다.
강조: strong, em은 시각적 굵기보다 의미상 중요도와 강세를 나타낸다.

✅ 기본 체크리스트

문서마다 내용에 맞는 title과 lang을 지정한다.
제목 단계는 문서 구조에 맞게 순서대로 사용한다.
클릭 동작에는 역할에 따라 a 또는 button을 선택한다.
이미지에는 의미 있는 alt를 제공한다.
표현만을 위해 요소를 선택하지 않고 콘텐츠의 의미를 먼저 본다.

🔗 참고 자료

MDN: HTML 콘텐츠 만들기 — HTML 문서 구조와 기본 마크업을 소개한다.
MDN: HTML 요소 참고 — HTML 요소별 역할과 속성을 정리한다.
WHATWG HTML Living Standard — HTML의 공식 Living Standard다.