HTML은 웹페이지에 글과 이미지를 배치하는 도구를 넘어, 콘텐츠의 구조와 의미를 정의하는 언어다. 사람은 제목의 크기나 글자의 색상만 보아도 정보의 중요성을 어느 정도 판단할 수 있다. 그러나 브라우저, 검색엔진, 스크린 리더와 같은 소프트웨어는 문서에 부여된 구조와 의미를 바탕으로 콘텐츠를 이해한다.

웹사이트가 제대로 작동하려면 정보가 단순히 화면에 표시되는 것만으로는 부족하다. 제목과 본문이 구분되어야 하고, 메뉴와 주요 콘텐츠의 역할이 명확해야 하며, 이미지와 영상에는 적절한 설명이 필요하다. HTML은 이러한 웹 콘텐츠의 기본 구조를 만드는 역할을 담당한다.

이 장에서는 HTML의 기본 문법부터 문서 구조, 텍스트, 목록, 링크, 이미지, 멀티미디어, 표, 입력 양식까지 살펴본다. 특히 의미를 고려한 HTML 작성(시맨틱 HTML) 이 웹 접근성과 검색엔진 최적화에 어떤 의미를 갖는지 설명한다.

1. HTML의 개념과 역할

1.1 HTML이란 무엇인가

HTML은 HyperText Markup Language의 약자로, 우리말로는 하이퍼텍스트 마크업 언어라고 한다. 웹페이지에 포함되는 텍스트, 이미지, 링크 등의 구성 요소를 정의하고 이들 사이의 관계를 구조화하는 데 사용된다.

여기서 하이퍼텍스트(HyperText)는 링크를 통해 다른 문서나 정보로 이동할 수 있는 텍스트를 의미한다. 전통적인 인쇄 문서는 일반적으로 앞에서 뒤로 읽는 선형적 구조를 갖지만, 웹에서는 링크를 선택해 서로 연결된 여러 문서를 자유롭게 탐색할 수 있다.

마크업(Markup)은 콘텐츠에 표식을 부여하여 역할이나 의미를 나타내는 방식이다. 예를 들어 어떤 문장이 제목인지, 일반 문단인지, 다른 문서로 이동하는 링크인지를 태그(Tag)로 구분한다.

HTML은 일반적으로 프로그래밍 언어가 아니라 마크업 언어로 분류된다. HTML 자체는 복잡한 계산이나 프로그램의 실행 흐름을 담당하지 않는다. 대신 웹페이지를 구성하는 정보의 내용과 구조를 명시한다.

1.2 HTML, CSS, JavaScript의 관계

웹페이지는 크게 세 가지 기술의 결합으로 구현된다.

HTML

구조와 의미

CSS

디자인과 배치

JavaScript

동작과 상호작용

웹페이지 구현을 구성하는 세 가지 핵심 기술

건축에 비유하면 HTML은 건물의 구조와 공간의 용도를 정의하는 설계에 해당한다. CSS는 건물의 색상과 마감재, 공간의 배치를 담당하며, JavaScript는 자동문이나 조명 제어 장치처럼 사용자의 행동에 따라 작동하는 기능을 담당한다.

가령 온라인 쇼핑몰에서 HTML은 상품명, 가격, 상품 설명, 구매 버튼을 정의한다. CSS는 상품 이미지의 크기와 버튼 색상을 결정한다. JavaScript는 고객이 버튼을 눌렀을 때 옵션을 선택하거나 장바구니에 상품을 추가하는 동작을 처리한다.

세 기술의 기능을 구분하는 것은 웹 개발의 출발점이다. 특히 웹 개발을 처음 배우는 사람은 디자인과 기능을 구현하기 전에 HTML로 정보의 구조를 정확하게 작성하는 능력을 갖추어야 한다.

2. HTML의 기본 문법

2.1 요소와 태그

HTML 문서는 요소(Element)들의 조합으로 작성된다. 하나의 요소는 일반적으로 시작 태그, 콘텐츠, 종료 태그로 구성된다.

<p>HTML은 웹페이지의 구조를 정의합니다.</p>

위 코드에서 <p>는 시작 태그이고, </p>는 종료 태그이다. 두 태그 사이의 문장은 실제 콘텐츠에 해당한다. p는 Paragraph, 즉 문단의 약자다.

HTML 요소에는 문단을 나타내는 <p>, 제목을 나타내는 <h1>, 링크를 나타내는 <a> 등 여러 종류가 있다.

일부 요소는 종료 태그를 사용하지 않는다. 대표적으로 이미지를 삽입하는 <img>, 줄바꿈을 나타내는 <br>, 구분선을 나타내는 <hr> 등이 있다. 이러한 요소를 빈 요소(Void Element)라고 한다.

2.2 속성의 사용

HTML 요소는 속성(Attribute)을 사용하여 추가 정보를 지정할 수 있다.

<a href="https://example.com">
  웹사이트 방문하기
</a>

이 코드에서 href는 링크가 이동할 주소를 지정하는 속성이다. 사용자가 ‘웹사이트 방문하기’라는 글자를 클릭하면 지정된 주소로 이동한다.

속성은 일반적으로 시작 태그 안에 작성하며, 이름과 값을 = 기호로 연결한다. 속성값에는 큰따옴표를 사용하는 것이 일반적이다.

이미지 요소에서는 파일의 위치를 나타내는 src 속성과 이미지의 내용을 설명하는 alt 속성을 사용한다.

<img src="school.jpg"
     alt="학교 운동장에서 학생들이 뛰고 있는 모습">

src는 이미지 파일의 경로를 지정하고, alt는 이미지가 표시되지 않거나 스크린 리더를 이용하는 경우에 이미지의 의미를 전달한다.

2.3 HTML 요소의 중첩

HTML 요소는 다른 요소의 내부에 배치할 수 있다. 이를 중첩(Nesting)이라고 한다.

<p>
  HTML을 배우는 것은
  <strong>웹 개발의 첫걸음</strong>입니다.
</p>

이 예제에서는 <strong> 요소가 <p> 요소 안에 포함된다. 문단 전체는 일반적인 텍스트이지만, ‘웹 개발의 첫걸음’이라는 부분에는 중요하다는 의미가 부여된다.

중첩할 때는 태그의 시작과 종료 순서를 올바르게 유지해야 한다. 먼저 시작한 바깥쪽 요소는 내부 요소가 종료된 다음에 닫아야 한다.

3. HTML 문서의 기본 구조

웹페이지는 단순히 여러 태그를 나열한 문서가 아니다. 브라우저가 문서를 올바르게 해석할 수 있도록 기본적인 구조를 갖추어야 한다.

다음은 가장 기본적인 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>HTML로 만든 첫 번째 웹페이지입니다.</p>
</body>
</html>

첫 줄의 <!DOCTYPE html>은 브라우저가 문서를 현대적인 HTML 표준에 맞추어 처리하도록 선언한다. <html>은 문서 전체를 감싸는 최상위 요소이며, lang="ko"는 문서의 기본 언어가 한국어임을 나타낸다.

<head>는 문서에 관한 정보를 담는 영역이다. 문자 인코딩, 브라우저 탭에 표시할 제목, CSS 연결 정보 등이 이곳에 위치한다. 일반적으로 이 영역의 정보는 웹페이지 본문에 직접 표시되지 않는다.

<meta charset="UTF-8">은 문서의 문자 인코딩을 지정한다. 한국어를 비롯한 다양한 언어를 올바르게 표시하기 위해 UTF-8을 사용하는 것이 일반적이다.

viewport 메타 요소는 모바일 기기에서 화면 크기에 맞추어 웹페이지가 표시되도록 하는 데 중요한 역할을 한다.

<title>에 작성한 문장은 브라우저 탭의 제목으로 사용되며, 검색엔진이 페이지를 이해할 때에도 중요한 정보가 된다.

마지막으로 <body>는 사용자가 실제 웹페이지에서 접하게 되는 주요 콘텐츠를 담는 영역이다.

웹 브라우저는 HTML 문서를 읽고 이를 문서 객체 모델(Document Object Model, DOM)이라는 트리 구조로 구성한다. JavaScript는 이 DOM을 이용해 페이지의 내용을 읽거나 수정할 수 있다.

4. 텍스트 콘텐츠의 구조화

4.1 제목과 문단

웹페이지의 텍스트는 단순한 문자열의 집합이 아니다. 일반적으로 문서에는 전체 제목, 장과 절의 제목, 본문 문단 등 정보의 위계가 존재한다.

HTML은 이러한 위계를 제목 요소인 <h1>부터 <h6>까지로 표현한다.

<h1>웹 개발의 이해</h1>
<h2>HTML의 개념</h2>
<h3>HTML의 기본 문법</h3>

<p>
  HTML은 웹 콘텐츠의 구조와 의미를
  정의하는 마크업 언어이다.
</p>

<h1>은 가장 높은 수준의 제목을 나타내며, <h6>으로 갈수록 제목의 위계가 낮아진다. 제목 요소는 단순히 글자의 크기를 조절하기 위한 수단이 아니라 문서의 논리적 구조를 나타내기 위해 사용해야 한다.

예를 들어 주요 절의 제목을 <h2>로 작성했다면 그 하위 항목은 <h3>로 구성하는 방식이 적절하다. 다만 제목의 수준을 반드시 연속해서 사용해야 하는 것은 아니지만, 문서의 논리적 계층을 일관되게 유지하는 것이 바람직하다.

문단은 <p> 요소를 사용한다. 글자 사이에 여러 개의 공백이나 줄바꿈을 넣더라도 HTML에서는 일반적으로 연속된 공백을 하나로 처리한다. 따라서 문단을 나눌 때는 단순한 줄바꿈보다 별도의 <p> 요소를 사용하는 것이 적절하다.

4.2 강조와 중요성

HTML은 텍스트의 의미를 강조하는 요소도 제공한다.

<em>은 문맥에서 특정 부분을 강조할 때 사용하며, <strong>은 내용의 중요성이나 긴급성 등을 나타낼 때 사용한다.

<p>
  이 과제는 <em>직접</em> 작성해야 합니다.
</p>

<p>
  <strong>제출 기한을 반드시 지켜야 합니다.</strong>
</p>

웹 브라우저는 일반적으로 <em>을 기울임꼴로, <strong>을 굵은 글씨로 표시한다. 그러나 이러한 시각적 표현은 부수적인 결과다. 핵심은 강조의 의미를 문서에 부여한다는 점이다.

단순히 디자인을 위해 글자를 기울이거나 굵게 표시하려는 경우에는 CSS를 사용할 수 있다.

4.3 목록의 작성

HTML에서는 세 가지 기본적인 목록을 제공한다.

• 순서가 없는 목록: <ul>과 <li>를 사용하며, 항목의 순서가 중요하지 않을 때 사용한다.
• 순서가 있는 목록: <ol>과 <li>를 사용하며, 단계나 순위처럼 순서가 중요할 때 사용한다.
• 설명 목록: <dl>, <dt>, <dd>를 사용하며, 용어와 설명을 연결할 때 사용한다.

예를 들어 웹페이지 제작 과정을 순서대로 설명하려면 다음과 같이 작성할 수 있다.

<ol>
  <li>콘텐츠를 기획한다.</li>
  <li>HTML로 구조를 작성한다.</li>
  <li>CSS로 디자인한다.</li>
  <li>JavaScript로 기능을 구현한다.</li>
</ol>

목록 요소를 적절하게 사용하면 사용자는 정보를 쉽게 파악할 수 있고, 보조 기술도 항목의 개수와 구조를 이해할 수 있다.

4.4 고급 텍스트 요소

HTML은 일반적인 문단 외에도 인용문, 약어, 날짜, 코드, 첨자 등을 표현하는 요소를 제공한다.

인용문에는 <blockquote>나 <q>를 사용하고, 프로그램 코드는 <code>로 나타낸다. 약어는 <abbr>, 날짜와 시간은 <time>, 위첨자와 아래첨자는 각각 <sup>, <sub>를 활용할 수 있다.

예를 들어 다음과 같이 작성할 수 있다.

<p>
  <abbr title="HyperText Markup Language">
    HTML
  </abbr>은 마크업 언어이다.
</p>

<p>
  행사 날짜:
  <time datetime="2026-10-20">2026년 10월 20일</time>
</p>

이러한 요소는 내용을 더욱 정확하게 표현하고 기계가 해석할 수 있는 의미 정보를 제공한다.

5. 시맨틱 HTML과 웹페이지의 구조

5.1 시맨틱 HTML의 개념

시맨틱(Semantic)은 ‘의미에 관한’이라는 뜻이다. 시맨틱 HTML은 콘텐츠의 역할과 의미를 적절한 HTML 요소로 표현하는 작성 방식을 말한다.

웹페이지를 제작할 때 모든 콘텐츠를 <div> 요소로 묶어도 시각적인 디자인은 구현할 수 있다. 그러나 이러한 방식만으로는 각각의 영역이 어떤 역할을 하는지 명확하게 전달하기 어렵다.

HTML은 이러한 문제를 해결하기 위해 문서의 주요 영역을 의미에 따라 구분하는 요소를 제공한다.

대표적으로 <header>는 머리말, <nav>는 주요 탐색 영역, <main>은 문서의 중심 콘텐츠, <article>은 독립적인 콘텐츠, <section>은 주제별 구획, <aside>는 부가적인 콘텐츠, <footer>는 바닥글을 나타낸다.

<header>

사이트 로고 및 머리말

<nav>

주요 메뉴 및 탐색 링크

<main>

주요 콘텐츠 영역

<article>

독립적인 기사나 게시물

<section>

주제별 콘텐츠 구획

<aside>

관련 정보, 부가 콘텐츠

<footer>

저작권 및 연락처

그림 1. 시맨틱 HTML 요소를 활용한 웹페이지 구조의 예시

위 그림은 시맨틱 요소들의 활용 예시다. 실제로는 <aside>가 <main> 내부나 외부에 위치할 수 있으며, <header>와 <footer>도 문서 전체뿐 아니라 개별 <article>이나 <section> 안에서 사용될 수 있다.

5.2 시맨틱 HTML이 중요한 이유

시맨틱 HTML의 중요성은 크게 세 가지 측면에서 살펴볼 수 있다.

첫째, 웹 접근성(Accessibility) 이 향상된다. 시각장애인이 사용하는 스크린 리더는 HTML 구조를 활용하여 문서의 제목이나 탐색 영역 등을 안내한다. 따라서 올바른 요소를 사용하면 사용자가 콘텐츠를 더 효율적으로 탐색할 수 있다.

둘째, 검색엔진 최적화(SEO) 에 도움이 된다. 검색엔진은 페이지의 텍스트뿐 아니라 제목, 링크, 문서 구조 등을 함께 분석한다. 의미에 맞는 HTML을 사용하면 검색엔진이 문서의 구조와 콘텐츠를 해석하는 데 도움이 된다. 다만 시맨틱 요소를 사용한다는 사실만으로 검색 순위가 보장되는 것은 아니다.

셋째, 웹사이트의 유지보수가 쉬워진다. 개발자는 콘텐츠의 영역과 역할을 명확하게 구분할 수 있으며, CSS와 JavaScript에서도 이러한 구조를 활용할 수 있다.

예를 들어 온라인 신문 웹사이트에서 기사 본문을 <article>로 정의하면 기사라는 콘텐츠의 독립성이 명확해진다. 기사 제목은 <h1> 등 적절한 제목 요소로 나타내고, 게시 날짜에는 <time>을 사용할 수 있다.

이처럼 시맨틱 HTML은 화면을 구성하는 기술인 동시에 정보에 의미를 부여하는 기술이다.

6. 하이퍼링크와 웹의 연결 구조

웹(Web)의 중요한 특징 가운데 하나는 서로 다른 문서가 링크로 연결된다는 점이다. 사용자는 링크를 통해 하나의 페이지에서 다른 페이지로 이동하고, 관련 정보를 탐색할 수 있다.

HTML에서 하이퍼링크는 <a> 요소로 작성한다. 여기서 a는 Anchor의 약자이며, href 속성은 연결 대상의 주소를 지정한다.

<a href="https://developer.mozilla.org/">
  MDN 웹 개발 문서 방문하기
</a>

링크는 외부 사이트뿐 아니라 동일한 웹사이트의 다른 페이지나 현재 문서의 특정 위치로도 연결할 수 있다.

<a href="about.html">회사 소개</a>

<a href="#contact">연락처로 이동</a>

<section id="contact">
  <h2>연락처</h2>
  <p>문의 사항을 남겨주세요.</p>
</section>

첫 번째 링크는 현재 문서의 위치를 기준으로 about.html 파일에 연결된다. 두 번째 링크는 같은 문서 안에서 id="contact"가 지정된 요소로 이동한다.

이때 링크 텍스트도 중요하다. ‘여기를 클릭하세요’라는 표현보다 ‘회사 소개 페이지 보기’처럼 이동할 목적지를 설명하는 표현이 정보 전달과 접근성에 유리하다.

또한 링크를 새 탭에서 열려면 target="_blank" 속성을 사용할 수 있다. 다만 새 탭이 열리는 동작은 사용자에게 예기치 않은 경험을 줄 수 있으므로 필요한 경우에 선택적으로 사용하는 것이 좋다.

7. 이미지와 멀티미디어 콘텐츠

7.1 이미지 삽입

이미지는 웹페이지의 이해도와 시각적 전달력을 높이는 중요한 구성 요소다. HTML에서는 <img> 요소를 사용하여 이미지를 삽입한다.

<img
  src="images/campus.jpg"
  alt="가을 단풍으로 둘러싸인 대학교 캠퍼스"
  width="600"
  height="400"
>

src는 이미지의 파일 경로를 지정한다. alt는 이미지의 대체 텍스트를 의미하며, 이미지가 전달하는 정보나 목적을 설명하는 데 사용된다.

대체 텍스트는 웹 접근성 측면에서 특히 중요하다. 예를 들어 이미지가 특정 행사 현장을 보여주는 경우, 단순히 ‘사진’이라고 작성하는 것보다 ‘학생들이 강당에서 졸업식을 진행하는 모습’이라고 설명하는 편이 유용하다.

다만 장식만을 목적으로 사용한 이미지에는 상황에 따라 alt=""처럼 빈 대체 텍스트를 지정할 수 있다.

이미지에 설명문을 함께 표시하려면 <figure>와 <figcaption> 요소를 사용할 수 있다.

<figure>
  <img src="campus.jpg"
       alt="대학교 중앙도서관 전경">

  <figcaption>
    그림 1. 대학교 중앙도서관 전경
  </figcaption>
</figure>

<figure>는 이미지와 설명을 하나의 독립적인 묶음으로 표현하며, <figcaption>은 해당 콘텐츠의 설명이나 캡션을 나타낸다.

7.2 동영상 삽입

HTML은 별도의 외부 재생 프로그램 없이 브라우저에서 동영상을 재생할 수 있도록 <video> 요소를 제공한다.

<video controls width="640">
  <source src="lecture.mp4" type="video/mp4">

  <track
    src="captions-ko.vtt"
    kind="captions"
    srclang="ko"
    label="한국어 자막"
  >

  브라우저가 동영상 재생을 지원하지 않습니다.
</video>

controls 속성을 사용하면 재생, 일시정지, 음량 조절 등의 기본 제어 기능이 표시된다.

<source>는 미디어 파일의 경로와 형식을 지정한다. 필요한 경우 여러 개의 <source> 요소를 작성하여 브라우저가 지원하는 형식을 선택하도록 할 수 있다.

<track>은 자막이나 캡션을 연결하는 데 사용된다. 특히 청각장애인이나 소리를 들을 수 없는 환경에서 동영상을 시청하는 사용자에게 중요한 기능이다.

7.3 오디오 삽입

오디오 콘텐츠는 <audio> 요소로 삽입한다.

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  브라우저가 오디오를 지원하지 않습니다.
</audio>

오디오 역시 기본 재생 컨트롤을 사용할 수 있다. 다만 모든 사용자가 오디오를 들을 수 있는 것은 아니므로, 강의나 인터뷰처럼 정보 전달을 목적으로 하는 콘텐츠에는 텍스트 전사본을 함께 제공하는 것이 바람직하다.

8. HTML 표의 작성

표(Table)는 여러 데이터를 행과 열로 정리하여 비교하거나 관계를 파악할 수 있도록 표현하는 요소다.

HTML에서는 <table>을 사용하여 표를 정의하고, <tr>로 행을, <th>로 제목 셀을, <td>로 일반 데이터 셀을 작성한다.

<table>
  <caption>웹 기술의 역할</caption>
  <thead>
    <tr>
      <th scope="col">기술</th>
      <th scope="col">주요 역할</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>구조와 의미</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>디자인과 배치</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>동작과 상호작용</td>
    </tr>
  </tbody>
</table>

실제 표의 구성은 다음과 같다.

기술	주요 역할
HTML	구조와 의미
CSS	디자인과 배치
JavaScript	동작과 상호작용

<caption>은 표의 제목이나 설명을 제공한다. <thead>와 <tbody>는 표의 머리글과 본문을 구분한다.

또한 scope="col"이나 scope="row"를 활용하면 제목 셀이 어떤 열 또는 행에 대응하는지 명확하게 표현할 수 있다.

여기서 주의할 점은 표를 웹페이지의 전체 레이아웃을 만드는 용도로 남용하지 않는 것이다. 과거에는 표를 이용해 페이지의 메뉴나 콘텐츠를 배치하는 방식이 사용되기도 했다. 그러나 현대적인 웹 개발에서는 표를 주로 데이터의 관계를 나타내는 데 사용하고, 화면 배치는 CSS의 Flexbox나 Grid 등의 기능으로 구현하는 것이 적절하다.

9. 사용자 입력 양식과 버튼

웹사이트는 콘텐츠를 보여주는 것뿐 아니라 사용자가 정보를 입력하고 서비스를 이용할 수 있도록 구성된다.

회원가입, 로그인, 검색, 상품 주문, 문의 접수 등이 대표적인 예다.

HTML에서는 이러한 사용자 입력 영역을 폼(Form)이라고 하며, <form> 요소로 정의한다.

<form action="/contact" method="post">
  <label for="username">이름</label>
  <input
    type="text"
    id="username"
    name="username"
    required
  >

  <label for="message">문의 내용</label>
  <textarea
    id="message"
    name="message"
    required
  ></textarea>

  <button type="submit">문의하기</button>
</form>

위 코드에서 <form>은 입력 양식 전체를 정의한다. action은 데이터가 전송될 서버 주소를 지정하며, method는 HTTP 요청 방식을 지정한다.

<label>은 입력 요소의 이름을 표시한다. for 속성은 대응하는 입력 요소의 id와 연결된다. 이러한 연결은 사용자가 입력 항목의 의미를 이해하는 데 도움이 되고 접근성도 향상한다.

<input>은 한 줄의 텍스트를 비롯한 다양한 종류의 데이터를 입력받는 데 사용된다. type 속성에 따라 입력 방식이 달라질 수 있다.

예를 들어 type="email"은 이메일 주소 입력에, type="password"는 비밀번호 입력에 사용된다. type="checkbox"는 체크박스, type="radio"는 라디오 버튼을 제공한다.

<textarea>는 여러 줄의 텍스트를 입력하는 데 사용되며, <button>은 사용자의 명령을 실행하는 버튼을 나타낸다.

실습 화면: 문의 양식의 구성이름문의 내용 입력 내용 복사하기

HTML 폼을 이해하기 위한 실습용 입력 화면이다. 실제 서버에 데이터를 전송하지는 않는다.

이와 같은 입력 양식을 이용하면 사용자와 웹사이트 사이의 상호작용을 구현할 수 있다. 다만 HTML만으로는 입력된 데이터를 서버에 저장하거나 복잡한 업무를 처리할 수 없다. 이러한 기능에는 서버 프로그램이나 JavaScript 등 추가적인 기술이 필요하다.

HTML의 기본 입력 검증 기능도 활용할 수 있지만, 실제 서비스를 개발할 때는 서버에서도 반드시 입력 데이터를 검증해야 한다.

10. HTML 오류 검사와 디버깅

HTML을 작성하다 보면 태그를 닫지 않거나, 속성명을 잘못 입력하거나, 요소를 부적절하게 중첩하는 오류가 발생할 수 있다.

브라우저는 이러한 오류를 어느 정도 자동으로 복구하여 페이지를 표시할 수 있다. 그러나 화면이 정상적으로 보인다고 해서 문서의 구조까지 올바르다고 단정할 수는 없다.

HTML 문서의 오류를 점검하려면 다음과 같은 방법을 활용할 수 있다.

첫째, 브라우저의 개발자 도구를 사용한다. Chrome, Firefox 등의 개발자 도구에서는 HTML 요소의 구조와 속성을 확인하고 수정 결과를 실시간으로 살펴볼 수 있다.

둘째, HTML 검사 도구를 사용한다. Nu HTML Checker와 같은 도구를 활용하면 HTML 문서에 나타나는 다양한 오류와 경고를 확인할 수 있다.

셋째, 코드 편집기의 기능을 활용한다. Visual Studio Code와 같은 편집기는 태그 자동 완성, 구문 강조 등을 지원하므로 단순한 작성 실수를 줄이는 데 도움이 된다.

디버깅은 단순히 오류 메시지를 없애는 작업이 아니다. 작성자가 의도한 구조가 브라우저에서 제대로 해석되고 있는지 확인하는 과정이다.

특히 접근성과 시맨틱 구조에 관한 문제는 시각적인 화면만으로 확인하기 어려우므로 문서 구조를 함께 점검해야 한다.

11. 종합 실습: 간단한 웹페이지 만들기

지금까지 학습한 HTML 요소를 활용하여 간단한 기업 소개 페이지를 작성해 보자.

이 실습에서는 문서의 제목, 탐색 메뉴, 주요 콘텐츠, 목록, 이미지, 문의 링크 및 바닥글을 하나의 HTML 문서로 구성한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>ABC 마케팅 | 기업 소개</title>
</head>

<body>
  <header>
    <h1>ABC 마케팅</h1>

    <nav aria-label="주요 메뉴">
      <a href="#about">회사 소개</a>
      <a href="#service">서비스</a>
      <a href="#contact">문의</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>회사 소개</h2>

      <p>
        ABC 마케팅은 데이터에 기반한
        마케팅 서비스를 제공합니다.
      </p>

      <figure>
        <img src="office.jpg"
             alt="ABC 마케팅 사무실 전경"
             width="600">
        <figcaption>
          ABC 마케팅 사무실
        </figcaption>
      </figure>
    </section>

    <section id="service">
      <h2>주요 서비스</h2>

      <ul>
        <li>디지털 광고 운영</li>
        <li>브랜드 전략 수립</li>
        <li>마케팅 데이터 분석</li>
      </ul>
    </section>

    <section id="contact">
      <h2>고객 문의</h2>

      <p>
        서비스 문의는 아래 이메일로
        연락해 주시기 바랍니다.
      </p>

      <a href="mailto:contact@example.com">
        이메일 문의하기
      </a>
    </section>
  </main>

  <footer>
    <p>
      &copy; 2026 ABC Marketing.
      All rights reserved.
    </p>
  </footer>
</body>
</html>

위 코드를 복사하여 Visual Studio Code와 같은 편집기에 입력하고 index.html이라는 파일명으로 저장한 다음 브라우저에서 열어보면 된다. office.jpg 파일을 별도로 준비하지 않으면 해당 이미지는 표시되지 않는다.

이 실습에서는 CSS를 적용하지 않았으므로 브라우저의 기본 스타일로 표시된다. 따라서 실제 기업 홈페이지처럼 세련된 디자인은 나타나지 않지만, 페이지의 기본적인 구조는 작동한다.

이는 HTML의 본래 역할을 이해하는 데 중요한 경험이다. 디자인을 적용하지 않아도 콘텐츠의 제목과 본문, 메뉴와 주요 영역이 논리적으로 구분되어 있다면 HTML 문서의 기본적인 구조는 완성된 것이다.

12. 확장 학습: HTML을 넘어 웹 표준으로

HTML을 이해한 다음에는 CSS와 JavaScript를 단계적으로 학습할 필요가 있다.

CSS는 HTML로 작성된 콘텐츠의 색상, 크기, 간격, 배치 등을 제어한다. 반응형 웹 디자인을 적용하면 PC와 스마트폰의 화면 크기에 따라 콘텐츠의 배치를 조정할 수 있다.

JavaScript는 사용자의 행동에 반응하여 웹페이지의 콘텐츠를 변경하거나 서버와 데이터를 주고받는 기능을 구현한다.

또한 HTML 문서 안에는 SVG와 같은 벡터 그래픽을 포함할 수 있으며, <iframe>을 사용하여 외부 웹 콘텐츠를 삽입할 수도 있다. 다만 외부 콘텐츠를 삽입할 때에는 보안, 접근성, 성능 등을 함께 고려해야 한다.

최근에는 인공지능을 활용해 HTML과 CSS, JavaScript 코드를 자동으로 생성하는 개발 방식도 확산하고 있다. 사용자가 자연어로 웹페이지의 구성을 설명하면 AI가 이에 맞는 코드를 작성하는 방식이다.

그러나 AI가 코드를 작성한다고 해서 HTML에 대한 이해가 불필요해지는 것은 아니다. 오히려 작성된 코드가 적절한 구조를 갖추고 있는지, 시맨틱 요소가 올바르게 사용되었는지, 접근성에 문제가 없는지를 판단하는 능력이 중요해진다.

따라서 HTML 학습의 목적은 단순히 태그를 암기하는 데 있지 않다. 웹 콘텐츠를 어떤 구조로 조직해야 하는지 이해하고, 해당 구조가 사용자의 정보 탐색에 적합한지를 판단하는 능력을 기르는 데 있다.

13. 학습 정리

이 장에서 살펴본 HTML의 핵심 내용을 정리하면 다음과 같다.

1. HTML은 웹페이지의 구조와 의미를 정의하는 마크업 언어이며, CSS 및 JavaScript와 함께 웹 구현의 기반을 이룬다.
2. HTML 문서는 요소와 속성으로 구성되며, 기본적으로 <html>, <head>, <body> 등의 구조를 갖는다.
3. 제목, 문단, 강조, 목록 등의 요소를 통해 텍스트 콘텐츠의 논리적 위계를 표현할 수 있다.
4. 시맨틱 HTML은 콘텐츠의 의미를 명확히 하여 웹 접근성과 검색엔진의 문서 이해, 유지보수에 도움이 된다.
5. 링크, 이미지, 영상, 오디오, 표, 폼 등의 요소를 활용하여 다양한 콘텐츠와 사용자 입력 기능을 구성할 수 있다.
6. HTML 문서는 브라우저 개발자 도구와 검사 도구 등을 활용하여 구조와 문법의 적절성을 점검해야 한다.

연습문제

1. HTML과 CSS, JavaScript의 역할을 각각 설명하고 세 기술이 상호 보완적으로 작동하는 사례를 제시하시오.
2. 시맨틱 HTML이 무엇인지 설명하고, 웹 접근성 측면에서 왜 중요한지 서술하시오.
3. <header>, <nav>, <main>, <article>, <section>의 역할을 각각 설명하시오.
4. 웹페이지에 이미지를 삽입할 때 alt 속성을 사용해야 하는 이유를 설명하시오.
5. HTML 표를 이용한 데이터 표현과 CSS를 이용한 화면 배치의 차이를 설명하시오.

실습 과제

개인 또는 기업을 소개하는 한 페이지짜리 웹사이트를 HTML로 작성하시오. 웹페이지에는 제목, 메뉴, 소개문, 사진, 서비스 목록, 문의 링크를 포함해야 한다. CSS를 사용한 디자인보다 HTML의 구조를 올바르게 작성하는 데 중점을 두며, 작성이 끝나면 HTML 검사 도구를 이용해 오류를 확인한다.