HTML이란 무엇인가

이 토픽을 마치면

HTML이 무엇인지 설명할 수 있고, 태그를 사용해서 간단한 웹페이지를 직접 만들 수 있습니다.

웹페이지는 문서입니다

브라우저에서 보이는 모든 웹페이지는 사실 하나의 문서입니다. 이 문서를 작성하는 언어가 HTML(HyperText Markup Language)입니다.

"프로그래밍 언어"가 아닙니다. HTML은 마크업 언어 — 내용의 구조와 의미를 표시하는 언어입니다. "이건 제목이야", "이건 문단이야", "이건 링크야"라고 브라우저에게 알려주는 역할을 합니다.

html

<!DOCTYPE html>
<html>
<head>
  <title>내 첫 페이지</title>
</head>
<body>
  <h1>안녕하세요</h1>
  <p>이것이 HTML로 만든 웹페이지입니다.</p>
</body>
</html>

이 파일을 index.html로 저장하고 브라우저에서 열면, 제목과 문단이 보입니다. 서버가 필요 없습니다.

태그의 원리

HTML의 핵심은 태그(tag) 입니다. 꺾쇠괄호(< >)로 감싸서 내용의 의미를 지정합니다.

html

<!-- 제목 태그: h1(가장 큰) ~ h6(가장 작은) -->
<h1>큰 제목</h1>
<h2>중간 제목</h2>

<!-- 문단 태그 -->
<p>여기는 하나의 문단입니다.</p>

<!-- 링크 태그: href 속성에 URL -->
<a href="https://google.com">구글로 이동</a>

<!-- 이미지 태그: 닫는 태그 없음 (셀프 클로징) -->
<img src="photo.jpg" alt="사진 설명">

<!-- 목록 태그 -->
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
</ul>

대부분의 태그는 여는 태그 + 내용 + 닫는 태그로 구성됩니다. <p>내용</p> 처럼요. <img>처럼 닫는 태그가 없는 것도 있습니다.

구조를 기억하세요

모든 HTML 문서는 같은 뼈대를 가집니다:

html

<!DOCTYPE html>       <!-- "이건 HTML5 문서야" 선언 -->
<html>                <!-- 문서 전체를 감싸는 루트 -->
  <head>              <!-- 보이지 않는 정보 (제목, 설정) -->
    <title>탭 제목</title>
  </head>
  <body>              <!-- 화면에 보이는 모든 내용 -->
    <h1>본문 시작</h1>
  </body>
</html>

<head>는 브라우저 탭 제목, 문자 인코딩, CSS 연결 같은 메타 정보가 들어가고, <body>에 사용자가 실제로 보는 내용이 들어갑니다. 이 구조는 어떤 웹사이트든 동일합니다.

→ 바이오에 적용: DevBench — 웹 기초