HTML 강좌 / HTML의 개념과 웹페이지에서 하는 역할

HTML(HyperText Markup Language)은 웹페이지의 내용과 구조를 나타내는 마크업 언어입니다. 제목, 문단, 목록, 링크 같은 콘텐츠의 역할을 HTML 요소로 표시하면 브라우저가 이를 해석해 페이지를 구성합니다. 모양과 배치는 주로 CSS가, 사용자 동작에 대한 반응은 주로 JavaScript가 담당합니다.

HTML이란 무엇인가요?

HTML은 문서의 각 부분이 무엇을 뜻하는지 표시하는 언어입니다. 예를 들어 같은 문장이라도 페이지의 제목인지, 일반 문단인지, 다른 페이지로 이동하는 링크인지 HTML 요소로 구분합니다. HTML은 웹에서 문서를 서로 연결하는 링크도 만들 수 있습니다.

HTML은 계산이나 조건 처리 자체를 중심으로 하는 프로그래밍 언어와는 역할이 다릅니다. 웹페이지를 구성하는 콘텐츠에 구조와 의미를 부여하는 것이 핵심입니다. HTML의 정의와 요소별 의미는 WHATWG HTML 표준의 소개에서 확인할 수 있습니다.

HTML은 웹페이지에서 어떤 역할을 하나요?

웹페이지에는 제목, 본문, 탐색 링크, 이미지, 입력 양식처럼 역할이 다른 콘텐츠가 있습니다. HTML은 각각에 알맞은 요소를 사용해 콘텐츠의 종류와 관계를 나타냅니다.

• 콘텐츠 구분: 제목은 h1~h6, 문단은 p, 목록은 ul 또는 ol처럼 표시합니다.
• 문서 구조: 머리말, 탐색 영역, 주요 내용 등 페이지의 영역을 구분할 수 있습니다.
• 연결과 입력: a로 다른 문서에 연결하고, form과 입력 요소로 사용자에게 정보를 받을 수 있습니다.

이처럼 HTML이 나타내는 구조와 의미는 화면 디자인뿐 아니라 브라우저와 보조 기술이 콘텐츠를 이해하는 데에도 쓰입니다. 요소를 고를 때는 기본 모양보다 콘텐츠의 역할을 먼저 생각하는 것이 좋습니다.

HTML, CSS, JavaScript는 어떻게 다른가요?

세 기술은 웹페이지에서 주로 맡는 역할이 다릅니다. HTML은 콘텐츠의 구조와 의미를 정하고, CSS는 색·글꼴·간격·배치 같은 표현을 조정합니다. JavaScript는 클릭이나 입력에 반응해 콘텐츠를 바꾸는 등의 동작을 구현할 수 있습니다.

이 구분은 입문자를 위한 큰 그림입니다. 예를 들어 HTML에도 기본적인 상호작용을 제공하는 요소가 있고, CSS에도 상태에 따른 표현과 애니메이션 기능이 있습니다. 처음에는 HTML로 내용을 제대로 구성하는 데 집중하면 됩니다.

HTML 코드는 브라우저에서 어떻게 보이나요?

다음 HTML 조각은 h1로 제목을, p로 문단을, ul과 li로 목록을 표시합니다.

<h1>오늘의 메모</h1>
<p>HTML은 내용을 구조화합니다.</p>
<ul>
  <li>제목</li>
  <li>문단</li>
</ul>

브라우저는 이 요소들을 해석해 제목, 문단, 글머리표가 있는 목록으로 보여줍니다. 아래 도해는 위 코드와 기본 표시 결과를 나란히 놓은 것입니다. 실제 글꼴과 간격은 브라우저와 적용된 CSS에 따라 달라질 수 있습니다.

간단한 HTML 파일을 만들어 보세요

앞의 조각에 문서의 기본 구조를 더하면 브라우저에서 바로 열 수 있는 파일이 됩니다. 다음 내용을 텍스트 편집기에 붙여 넣고 index.html이라는 이름으로 UTF-8 인코딩으로 저장한 뒤, 파일을 브라우저에서 열어 보세요.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>오늘의 메모</title>
  </head>
  <body>
    <h1>오늘의 메모</h1>
    <p>HTML은 내용을 구조화합니다.</p>
    <ul>
      <li>제목</li>
      <li>문단</li>
    </ul>
  </body>
</html>

head에는 문서 제목이나 문자 인코딩 같은 정보가, body에는 페이지의 주요 콘텐츠가 들어갑니다. 코드에 CSS를 추가하지 않아도 브라우저는 기본 스타일로 내용을 표시합니다. 문서 구조와 각 태그의 쓰임은 다음 장에서 자세히 살펴봅니다.