HTML 구조와 문법

1장에서 우리는 웹이 작동하는 방식과 HTML, CSS, 자바스크립트가 웹 페이지를 구성하는 핵심 언어라는 것을 학습했습니다.

그리고 나의 첫 프로필 페이지를 만들며 HTML이 웹 페이지의 뼈대를 만든다는 것을 어렴풋이 경험했죠.

이제부터는 웹 개발의 가장 기본적인 건축 자재인 HTML(HyperText Markup Language)에 대해 더욱 깊이 파고들어 볼 차례입니다.

이 장에서는 HTML 문서 구조와, HTML의 최소 단위인 요소/태그의 문법 규칙을 핵심부터 정리합니다.

이 지식은 웹 페이지의 문서 구조를 설계할 때 기준이 됩니다.

구성	역할	브라우저 해석	실수 신호
doctype	표준 모드 선언	quirks mode를 피함	레이아웃이 브라우저마다 다름
html	문서 전체의 루트	언어와 문서 범위 기준	lang 누락으로 접근성 저하
head	메타데이터와 외부 리소스	title, meta, link를 먼저 읽음	화면 콘텐츠를 head에 배치
body	사용자에게 보이는 콘텐츠	DOM 트리의 주요 화면 영역	구조 없는 div 나열
DOM	태그를 노드 트리로 변환	CSS/JS가 탐색하는 구조	닫힘 태그 오류와 중첩 혼란

HTML 문서의 기본 구조 이해하기

HTML 구조와 문법에서는 태그 의미, 브라우저 해석, 사용자에게 보이는 결과를 연결합니다.

영역	담는 내용	사용 예	주의점
head	문서 제목과 메타데이터	title, meta charset, viewport	보이는 제목 h1을 넣지 않음
resource	스타일과 외부 파일 연결	link stylesheet, preload	불필요한 차단 리소스 주의
script	동작 코드 연결	defer, module	렌더링을 막는 위치인지 확인
body	화면에 표시되는 콘텐츠	header, main, footer	의미 없는 중첩 div 남발
flow	브라우저의 파싱 순서	head 준비 후 body 렌더	메타 정보와 콘텐츠 역할 혼동

모든 HTML 문서는 웹 브라우저가 해당 문서를 올바르게 해석하고 표시할 수 있도록 정해진 기본 구조를 따릅니다.

1장에서 잠시 보았던 HTML 코드의 뼈대를 다시 한번 살펴보며 각 부분이 어떤 의미를 가지는지 자세히 알아봅시다.

index.html

<!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>

위 코드는 모든 HTML 문서가 가져야 할 최소한의 구조를 보여줍니다.

각 줄이 무엇을 의미하는지 하나씩 살펴보겠습니다.

<!DOCTYPE html>: 문서 유형 선언 (Document Type Declaration)

이 코드는 웹 브라우저에게 이 문서는 HTML5 표준에 따라 작성된 HTML 문서입니다.라고 알려주는 역할을 합니다.
웹 브라우저는 이 선언을 보고 문서를 렌더링할 때 어떤 규칙을 따를지 결정합니다. 이것이 없으면 오래된(구형) 웹 표준에 따라 문서를 해석할 수도 있어, 예상치 못한 방식으로 웹 페이지가 표시될 수 있습니다. 반드시 HTML 문서의 가장 첫 줄에 위치해야 합니다.

<html lang="ko">: HTML 문서의 루트(Root) 요소

이 태그는 전체 HTML 문서의 시작과 끝을 나타내는 가장 상위(root) 요소입니다. 모든 HTML 콘텐츠는 이 <html> 태그 안에 포함되어야 합니다.
lang="ko" 속성은 이 문서의 주요 언어가 한국어(Korean)임을 나타냅니다. 이는 검색 엔진 최적화(SEO)에 도움이 되며, 스크린 리더와 같은 보조 기술이 올바른 언어로 콘텐츠를 읽어줄 수 있도록 돕습니다. 필요에 따라 en(영어), ja(일본어) 등으로 변경할 수 있습니다.

<head>: 문서의 메타데이터 영역

head 태그는 웹 페이지 자체에 대한 정보(메타데이터)를 담는 영역입니다. 이 안에 있는 내용은 사용자에게 직접적으로 웹 페이지에 표시되지는 않습니다.
주로 다음과 같은 정보들이 포함됩니다.
- <meta> 태그: 문서의 문자 인코딩(charset), 뷰포트 설정(viewport), 웹 페이지 설명(description), 검색 키워드(keywords) 등 웹 페이지에 대한 다양한 메타 정보를 정의합니다.
- <title> 태그: 웹 브라우저의 탭이나 창 제목 표시줄에 나타나는 웹 페이지의 제목을 정의합니다.
- <link> 태그: 외부 CSS 파일을 연결하거나 파비콘(Favicon, 웹사이트 아이콘)을 연결할 때 사용합니다.
- <style> 태그: HTML 문서 내부에 직접 CSS 스타일을 작성할 때 사용합니다.
- <script> 태그: 자바스크립트 코드를 포함하거나 외부 자바스크립트 파일을 연결할 때 사용합니다.

<body>: 문서의 콘텐츠 영역

body 태그는 웹 브라우저 화면에 실제로 사용자에게 보여질 모든 내용을 담는 영역입니다. 여러분이 웹 페이지에서 보는 모든 텍스트, 이미지, 버튼, 동영상 등은 모두 이 <body> 태그 안에 작성됩니다.
<h1>, <p>, <img>, <a> 등 콘텐츠를 구성하는 다양한 HTML 요소들이 이곳에 위치합니다.

HTML의 핵심 문법

HTML 문서를 이루는 가장 기본적인 빌딩 블록은 바로 요소(Element)입니다.

그리고 이 요소를 표현하기 위해 사용하는 것이 바로 태그(Tag)입니다.

태그(Tag)
- <와 >로 둘러싸인 키워드를 태그라고 부릅니다. 예를 들어, <h1>, <p>, <img> 등이 태그입니다.
- 대부분의 태그는 시작 태그(Opening Tag)와 종료 태그(Closing Tag) 한 쌍으로 이루어집니다. 종료 태그는 시작 태그와 비슷하지만 < 뒤에 /가 붙습니다.
  - 예시: <h1> (시작 태그) </h1> (종료 태그)
요소(Element)
- 시작 태그와 종료 태그, 그리고 그 사이에 포함되는 콘텐츠(Content)를 모두 합쳐서 요소라고 부릅니다.
  - 예시: <h1>이것은 제목입니다.</h1> (하나의 h1 요소)
  - 여기서 <h1>은 시작 태그, </h1>은 종료 태그, 이것은 제목입니다.는 콘텐츠입니다.
빈 태그 (Self-closing Tag)
- 일부 태그는 콘텐츠를 가질 필요가 없어서 종료 태그가 존재하지 않습니다. 이러한 태그를 빈 태그 또는 셀프 클로징 태그라고 부릅니다.
- 예시: <img> (이미지), <br> (줄 바꿈), <input> (입력 필드), <meta>, <link>
- HTML5에서는 빈 태그에 /를 붙이지 않는 것이 일반적입니다. (예: <img src="image.jpg">) 하지만 XML/XHTML 스타일로 <img src="image.jpg" />와 같이 작성해도 웹 브라우저는 인식합니다.

태그, 요소, 속성, 빈 태그를 한 번에 구분할 수 있도록 작성 순서를 다이어그램으로 정리하면 다음과 같습니다.

시작 태그
<a 어떤 요소인지 이름을 먼저 정한다.
속성
href="/about" 링크 목적지처럼 추가 정보를 붙인다.
콘텐츠
>소개 보기 사용자가 화면에서 읽는 내용을 넣는다.
종료 태그
</a> 내용이 끝나는 지점을 브라우저에 알려준다.

열 구성 · 단위 · 형태 · 읽는 기준 · 예외
단위	형태	읽는 기준	예외
태그	<h1>	콘텐츠의 역할을 이름으로 표시한다	종료 태그만 따로 의미를 갖지는 않는다
요소	<p>내용</p>	시작, 내용, 종료가 하나의 덩어리다	빈 태그는 내용 영역이 없다
속성	alt="로고"	시작 태그 안에서 세부 정보를 준다	값은 따옴표로 감싸는 습관을 둔다
빈 태그	<img> <br>	콘텐츠 없이 자체 기능을 수행한다	HTML5에서는 보통 종료 태그를 쓰지 않는다

속성(Attributes): 요소에 추가 정보 부여하기

HTML 요소는 단순히 내용만 담는 것이 아니라, 추가적인 정보를 가질 수 있습니다.

이러한 추가 정보는 속성(Attribute)이라고 불리며, 시작 태그 내에 속성명="값"의 형태로 작성합니다.

<a href="https://www.google.com" target="_blank" title="새 탭에서 구글 열기">구글로 이동</a>
<img src="images/logo.png" alt="회사 로고" width="100" height="50">

위 예시에서 <a> 태그는 링크를 만드는 요소이며, href, target, title이 속성입니다.

<img> 태그는 이미지를 삽입하는 요소이며, src, alt, width, height가 속성입니다.

href 속성: 하이퍼링크가 가리키는 URL(주소)을 지정합니다.
target 속성: 링크를 클릭했을 때 페이지를 여는 방식을 지정합니다. _blank는 새 탭이나 새 창에서 링크를 엽니다.
title 속성: 요소에 대한 추가 정보를 제공하며, 마우스 오버 시 툴팁으로 표시될 수 있습니다.
src 속성: 이미지 파일의 경로(Source)를 지정합니다.
alt 속성: 이미지가 로드되지 않았을 때 대신 표시될 텍스트 또는 시각 장애인용 스크린 리더가 이미지를 설명할 때 사용될 대체 텍스트(Alternative text)를 지정합니다. 웹 접근성을 위해 매우 중요합니다.
width, height 속성: 이미지의 너비와 높이를 픽셀 단위로 지정합니다. (일반적으로 크기는 CSS로 제어하는 것이 더 유연합니다.)

주의사항:

속성명과 값 사이에는 등호(=)가 있어야 합니다.
속성 값은 항상 큰따옴표(") 또는 작은따옴표(')로 묶어야 합니다. 일반적으로 큰따옴표를 사용하는 것이 권장됩니다.
태그와 속성, 속성명과 값 사이에는 공백을 사용하여 구분합니다.

HTML 주석: 코드에 메모 남기기

코드를 작성하다 보면 특정 부분에 대한 설명이나 나중에 참고할 내용을 남겨두고 싶을 때가 있습니다.

이때 주석(Comment)을 사용합니다.

주석은 웹 브라우저에 표시되지 않으며, 오직 개발자만이 코드를 읽을 때 볼 수 있습니다.

HTML 주석은 로 끝납니다.

<!-- 아래 단락은 사용자 화면에 표시됩니다. -->
<p>이것은 주석 아래에 있는 단락입니다.</p>

주석은 코드의 가독성을 높이고, 다른 개발자 또는 미래의 내가 코드를 이해하는 데 큰 도움을 줍니다.

또한, 특정 코드를 일시적으로 비활성화할 때도 유용하게 사용됩니다.

블록 요소와 인라인 요소

HTML의 모든 요소는 기본적으로 두 가지 주요 표시 유형 중 하나를 가집니다.

바로 블록(Block) 요소와 인라인(Inline) 요소입니다.

이 두 가지 개념을 이해하는 것은 웹 페이지의 레이아웃을 이해하고 CSS를 효과적으로 적용하는 데 매우 중요합니다.

블록 요소 (Block-level Elements)
- 블록 요소는 항상 새로운 줄에서 시작하며, 가능한 한 많은 너비(부모 요소의 100%)를 차지합니다.
- 마치 문단이나 제목처럼 블록 형태로 존재합니다.
- 대표적인 블록 요소: <div>, <h1>~<h6>, <p>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section>, <article>, <aside> 등
```
<h1>첫 번째 제목</h1>
<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>
<div>이것은 div 블록입니다.</div>
```
위 코드를 브라우저에서 보면, 각 요소가 모두 새로운 줄에서 시작하고 너비가 화면 전체를 차지하는 것을 확인할 수 있습니다.
인라인 요소 (Inline Elements)
- 인라인 요소는 새로운 줄을 시작하지 않고, 자신의 콘텐츠만큼의 너비만 차지합니다.
- 텍스트의 흐름 속에서 일부를 강조하거나 링크를 삽입할 때 주로 사용됩니다.
- 대표적인 인라인 요소: <span>, <a>, <strong>, <em>, <img>, <input>, <label>, <button> 등
```
안녕하세요, <strong>[여러분의 이름]</strong>입니다.
<a href="#">더 알아보기</a> 이곳에 <img src="icon.png" alt="아이콘"> 이미지가 있습니다.
```
위 코드를 브라우저에서 보면, 안녕하세요 다음에 <strong> 태그 안의 텍스트가 바로 이어지고, <a> 태그와 <img> 태그도 모두 같은 줄에 이어서 표시되는 것을 확인할 수 있습니다.

이 블록/인라인 개념은 나중에 CSS를 배울 때 각 요소의 배치와 크기를 조절하는 데 핵심적인 역할을 합니다.

어떤 요소가 기본적으로 블록이고 인라인인지 이해하는 것은 웹 페이지를 설계하는 데 매우 중요한 첫걸음입니다.

아래 다이어그램은 HTML 한 문서를 작성할 때 기본 구조, 문법 단위, 표시 흐름을 함께 점검하는 방법을 정리한 것입니다.

점검 항목	의미	좋은 예	나쁜 신호
Skeleton	doctype, html, head, body 골격	표준 모드와 언어 설정	head/body 경계 혼란
Element	콘텐츠를 감싸는 의미 단위	h1, p, a, img	모든 것을 div로 처리
Attribute	요소의 추가 정보	href, src, alt, lang	필수 속성 누락
Flow	block과 inline 배치 흐름	문서 순서와 읽기 흐름 일치	CSS 없이 의미가 사라짐
Comment	코드 설명과 구분	<!-- note -->	주석에 민감 정보 기록

HTML 기본 구조를 익힌 뒤에는 각 요소가 브라우저, 검색 엔진, 보조 기술에 어떤 정보를 주는지 함께 확인하는 습관이 중요합니다.

doctype
문서 모드 선언
브라우저가 표준 모드로 해석하도록 하는 첫 신호다. · standards mode
head
메타 정보
문자 인코딩, viewport, title, 외부 리소스처럼 화면 밖의 정보를 모은다. · document metadata
body
콘텐츠 구조
사용자가 읽고 조작하는 제목, 문단, 링크, 이미지, 폼이 들어간다. · visible content
semantic
의미 요소
header, main, nav, section, article, footer는 문서 영역의 역할을 드러낸다. · landmark
attribute
속성 규칙
id, class, href, alt 같은 속성은 요소의 의미와 동작을 보완한다. · element detail

이번 장에서는 HTML 문서의 기본적인 구조부터 시작하여 요소, 태그, 속성, 주석, 그리고 블록/인라인 요소의 개념까지 HTML의 가장 핵심적인 문법을 상세하게 살펴보았습니다.

이 지식들은 앞으로 다양한 HTML 태그들을 배우고 웹 페이지를 구성하는 데 굳건한 기반이 될 것입니다.

구분	확인할 것	좋은 상태	고칠 신호
Structure	doctype, html, head, body 존재	문서 시작이 예측 가능	브라우저 보정에 의존
Heading	h1부터 제목 계층 유지	목차처럼 읽힘	크기 조절용 제목 건너뛰기
Attribute	href, src, alt, name의 목적	필수 값이 콘텐츠와 연결	빈 alt와 깨진 링크
Inline	문장 안 의미 표시	a, strong, code를 용도에 맞게 사용	block 요소를 문장 중간에 억지 배치
Validate	중첩과 닫힘 태그 검사	DOM 구조가 의도와 일치	자동 보정으로 레이아웃이 달라짐