HTML 구조와 문법

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

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

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

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

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

ARCHITECTURE

HTML 소스가 문서 구조와 DOM으로 해석되는 과정

doctype→document mode, html/head/body, tokenized elements/attributes, parser recovery, DOM tree, default reading flow의 경계 지도

source 해석
tokenizer와 tree builder가 element·attribute·text를 insertion mode에 따라 DOM 노드로 만든다.
DOCTYPE의 별도 역할
DOCTYPE은 standards/quirks mode를 정한다. head나 body의 부모가 아니다.
문서 트리
DOM Document 아래 document element인 html이 있고, 그 안에서 head와 body는 서로 형제다.
복구 규칙
생략 tag와 잘못된 중첩 때문에 완성 DOM은 source 문자열 순서와 다를 수 있다.
읽기 흐름
body의 semantic order가 키보드·보조 기술·기본 문서 흐름의 출발점이다.

DOCTYPE, html, head, body를 처리 순서 상자로 직렬 연결하지 않는다. 여기서 핵심은 mode 결정과 부모·형제 관계다.

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

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

모든 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" />와 같이 작성해도 웹 브라우저는 인식합니다.

태그, 요소, 속성, 빈 태그는 작성 순서와 브라우저 해석 결과를 함께 비교하면 한 번에 구분할 수 있습니다.

속성(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 문서의 기본 구조와 DOM 해석 흐름을 함께 점검하는 방법을 정리합니다.

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

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

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