HTML 구조와 문법

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

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

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

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

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

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

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

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

1장에서 잠시 보았던 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 문법에서는 일부 태그를 조건에 따라 생략할 수 있지만, 지금은 html·head·body를 모두 적어 설정과 화면 내용을 구분해 봅니다.

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

HTML의 핵심 문법

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

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

• 태그(Tag)
  • <와 >로 둘러싸인 키워드를 태그라고 부릅니다. 예를 들어, <h1>, <p>, <img> 등이 태그입니다.
  • 대부분의 태그는 시작 태그(Opening Tag)와 종료 태그(Closing Tag) 한 쌍으로 이루어집니다. 종료 태그는 시작 태그와 비슷하지만 < 뒤에 /가 붙습니다.
    • 예시: <h1> (시작 태그) </h1> (종료 태그)
• 요소(Element)
  • 시작 태그와 종료 태그, 그리고 그 사이에 포함되는 콘텐츠(Content)를 모두 합쳐서 요소라고 부릅니다.
    • 예시: <h1>이것은 제목입니다.</h1> (하나의 h1 요소)
    • 여기서 <h1>은 시작 태그, </h1>은 종료 태그, 이것은 제목입니다.는 콘텐츠입니다.
• 빈 요소 (Void Element)
  • <img>, <br> 같은 빈 요소는 자식 콘텐츠와 종료 태그를 가질 수 없습니다. HTML의 빈 요소와 XML의 self-closing 표기는 구분합니다.
  • 예시: <img> (이미지), <br> (줄 바꿈), <input> (입력 필드), <meta>, <link>
  • HTML에서는 <img src="image.jpg">처럼 씁니다. <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로 제어하는 것이 더 유연합니다.)

• 값을 쓰는 속성은 속성명="값"처럼 등호(=)로 연결합니다. required 같은 불리언 속성은 이름만 적을 수 있습니다.
• 이 교재에서는 속성 값을 큰따옴표로 묶습니다. HTML은 조건에 맞는 따옴표 없는 값도 허용하지만, 공백이 있는 값을 명확하게 쓰고 실수를 줄이려면 따옴표를 사용하는 편이 좋습니다.
• 태그 이름과 속성, 서로 다른 속성 사이는 공백으로 구분합니다.

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

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

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

주석은 페이지의 일반 화면에 문장으로 표시되지 않습니다. 하지만 페이지 소스 보기나 개발자 도구를 열면 방문자도 읽을 수 있으므로 비밀번호나 비밀 키를 적으면 안 됩니다.

HTML 주석은 <!--로 시작해서 -->로 끝납니다.

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

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

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

블록 요소와 인라인 요소

브라우저의 기본 스타일에서 흔히 보는 표시 방식은 블록(Block)과 인라인(Inline)입니다. 요소의 의미와 표시 방식은 구분하며, CSS의 display와 레이아웃 설정으로 표시 방식을 바꿀 수 있습니다.

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

• 블록 요소 (Block-level Elements)
  • 일반적인 블록 흐름에서는 새로운 줄에서 시작하며, 별도의 너비 제한이 없으면 사용할 수 있는 너비를 채웁니다.
  • 마치 문단이나 제목처럼 블록 형태로 존재합니다.
  • 대표적인 블록 요소: <div>, <h1>~<h6>, <p>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section>, <article>, <aside> 등

  <h1>첫 번째 제목</h1>
  <p>첫 번째 단락입니다.</p>
  <p>두 번째 단락입니다.</p>
  <div>이것은 div 블록입니다.</div>

  위 코드는 별도 CSS가 없는 일반 블록 흐름에서 각 요소가 새 줄에서 시작합니다. 너비는 화면 전체라고 고정되는 것이 아니라 부모의 사용 가능한 영역을 기준으로 정해집니다.

• 인라인 요소 (Inline Elements)
  • 인라인 요소는 새로운 줄을 시작하지 않고, 자신의 콘텐츠만큼의 너비만 차지합니다.
  • 텍스트의 흐름 속에서 일부를 강조하거나 링크를 삽입할 때 주로 사용됩니다.
  • 대표적인 인라인 요소: <span>, <a>, <strong>, <em>, <img>, <input>, <label>, <button> 등

  안녕하세요, <strong>[여러분의 이름]</strong>입니다.
  <a href="#">더 알아보기</a> 이곳에 <img src="icon.png" alt="아이콘"> 이미지가 있습니다.

  위 코드는 <strong>과 링크·이미지를 글의 흐름에 놓습니다. 공간이 충분하면 같은 줄에 이어지지만, 좁은 화면에서는 다음 줄로 넘어갈 수 있습니다. input이나 button 같은 컨트롤은 일반 글자와 크기 처리 방식이 다를 수 있으므로, 여기서는 “문서에서 어떤 의미인지”와 “CSS로 어떻게 보이는지”를 먼저 구분합니다.

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

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

이 절의 통합 다이어그램은 HTML 문서의 기본 구조와 DOM 해석 흐름을 함께 점검하는 방법을 정리합니다.

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

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

문서 구조를 직접 대조하기

기본 예제를 structure.html로 저장해 여세요. title만 “구조 실험”으로 바꾸고 저장·새로고침한 뒤, 브라우저 탭과 페이지 안 제목 중 어디가 바뀌는지 확인합니다. 다음에는 h1 내용만 바꿔 같은 두 위치를 비교하세요. 마지막으로 HTML 주석에 “학습용 메모”를 쓰고, 화면에는 안 보이지만 페이지 소스에서 읽을 수 있는지 확인합니다.

스스로 판단하기

큰 글자로 보이는 div와 기본 크기가 작은 h1 중 문서 제목이라는 의미를 가진 것은 어느 쪽인가요? 또 주석으로 비밀번호를 숨기면 방문자에게 비밀이 될까요? 모양과 의미, 표시와 공개 여부를 나누어 설명해 보세요.