시스매

웹의 설계도 HTML 완벽 가이드 탄생부터 사용법까지

17 min read

2025-09-04 23:57

  • HTML은 웹페이지의 구조를 만드는 뼈대 역할을 하는 언어입니다.

  • 태그(Tag)를 사용해 제목, 문단, 이미지 등 콘텐츠의 의미와 구조를 정의합니다.

  • HTML은 CSS(디자인)와 JavaScript(동작)와 함께 웹을 구성하는 핵심 기술입니다.

웹의 설계도 HTML 완벽 가이드 탄생부터 사용법까지

우리가 매일같이 접속하는 화려한 웹사이트와 웹 애플리케이션. 그 모든 것의 시작에는 아주 단순하지만 가장 중요한 설계도가 존재합니다. 바로 HTML입니다. 만약 웹 개발이라는 멋진 세계에 첫발을 내딛으려는 분이라면, HTML은 가장 먼저, 그리고 가장 확실하게 알아야 할 이름입니다. 이 글은 HTML이 왜 만들어졌는지 그 탄생 배경부터 시작해, 그 구조와 핵심 사용법, 그리고 더 나은 웹을 만들기 위한 심화 내용까지 모든 것을 담은 완벽한 핸드북이 될 것입니다.

1. 모든 것의 시작 HTML은 왜 만들어졌을까?

1980년대 후반, 인터넷의 전신인 ARPANET이 있었지만 지금처럼 누구나 쉽게 정보를 탐색하는 월드 와이드 웹(World Wide Web)은 존재하지 않았습니다. 당시 유럽입자물리연구소(CERN)에 근무하던 팀 버너스리(Tim Berners-Lee)는 한 가지 큰 문제에 직면했습니다. 전 세계에 흩어져 있는 수많은 연구자들이 각자 다른 컴퓨터와 운영체제를 사용하다 보니, 연구 데이터와 논문을 공유하고 업데이트하는 과정이 너무나도 복잡하고 비효율적이었던 것입니다.

A 연구원이 작성한 문서를 B 연구원의 컴퓨터에서 열면 형식이 깨지거나 아예 읽을 수 없는 일이 비일비재했습니다. 그는 이 문제를 해결하기 위해 **“전 세계의 모든 컴퓨터에서 어떤 문서든 쉽게 열어보고, 서로 다른 문서들을 하이퍼링크로 연결하여 자유롭게 넘나들 수 있는 시스템”**을 구상했습니다.

이 원대한 비전을 실현하기 위한 핵심 기술이 바로 HTML(HyperText Markup Language)이었습니다.

  • HyperText (하이퍼텍스트): 단순히 순서대로 읽는 ‘텍스트’를 넘어, 문서 내의 특정 단어나 이미지에 ‘링크’를 걸어 다른 문서로 즉시 이동할 수 있는 개념입니다. 이는 정보의 바다를 항해하는 가장 기본적인 방법이 되었습니다.

  • Markup (마크업): “이 부분은 제목이야”, “이 부분은 중요한 문단이야” 와 같이, 문서의 각 부분이 어떤 ‘의미’와 ‘구조’를 갖는지 꼬리표(Tag)를 붙여 표시(Mark up)하는 것을 의미합니다.

  • Language (언어): 이런 마크업을 하는 데 사용되는 규칙과 약속의 집합체입니다. 웹 브라우저(크롬, 사파리 등)는 이 규칙에 따라 작성된 HTML 문서를 해석해서 우리 눈에 보이는 웹페이지로 보여줍니다.

결국 HTML은 복잡한 논문과 데이터를 체계적으로 정리하고, 서로 연결하여 거대한 정보 시스템, 즉 월드 와이드 웹을 탄생시킨 최초의 벽돌이었던 셈입니다.

2. HTML의 구조 뼈대는 어떻게 생겼을까?

HTML 문서는 집을 짓는 것과 비슷합니다. 모든 집이 기초 공사, 골조, 내부 인테리어 순서로 지어지듯, 모든 HTML 문서도 정해진 기본 구조를 따릅니다.

가장 기본적인 HTML 문서는 아래와 같습니다.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>웹페이지 제목</title>
  </head>
  <body>
    <h1>가장 큰 제목</h1>
    <p>이것은 문단입니다.</p>
    <a href="https://www.google.com">여기를 누르면 구글로 이동합니다.</a>
  </body>
</html>

이 코드를 하나씩 분해해 봅시다.

  • <!DOCTYPE html>: 이 문서는 HTML5 표준에 따라 작성되었다는 선언문입니다. 웹 브라우저에게 “지금부터 HTML5 문법으로 해석해 줘!”라고 알려주는 역할을 합니다. 항상 문서의 가장 최상단에 위치해야 합니다.

  • <html>: <!DOCTYPE> 선언을 제외한 모든 HTML 코드를 감싸는 최상위 태그입니다. 웹 문서의 시작과 끝을 나타냅니다. 마치 집을 지을 땅과 같습니다.

  • <head>: 웹페이지 자체의 정보를 담는 영역입니다. 이 안에 있는 내용들은 사용자에게 직접 보이지 않습니다.

    • <meta charset="UTF-8">: 문자 인코딩을 지정합니다. UTF-8을 사용함으로써 전 세계의 거의 모든 언어(한글 포함)가 깨지지 않고 정상적으로 표시되도록 합니다.

    • <title>: 브라우저 탭에 표시되는 웹페이지의 제목입니다. 검색 엔진 최적화(SEO)에서도 매우 중요한 역할을 합니다.

    • 이 외에도 CSS 스타일 시트 연결, JavaScript 파일 연결, 검색 엔진을 위한 정보(메타 데이터) 등이 여기에 포함됩니다. 집의 설계도나 등기부등본처럼 보이지는 않지만 중요한 정보들을 담고 있는 셈이죠.

  • <body>: 사용자의 화면에 직접 보이는 모든 콘텐츠가 들어가는 영역입니다. 텍스트, 이미지, 영상, 링크 등 우리가 웹서핑을 하며 보는 모든 것은 <body> 태그 안에 작성됩니다. 집의 거실, 방, 가구 등 실제 생활하는 공간에 해당합니다.

3. HTML 사용법 핵심 태그 익히기

HTML의 핵심은 바로 ‘태그(Tag)‘입니다. 태그는 보통 <열리는 태그>와 </닫히는 태그>가 한 쌍을 이루며, 그 사이에 내용이 들어갑니다. 몇몇 태그는 닫히는 태그 없이 단독으로 사용되기도 합니다. 이제 가장 필수적인 태그들을 알아보겠습니다.

3.1. 기본 텍스트 태그

  • <h1> ~ <h6>: 제목(Heading)을 나타내는 태그입니다. <h1>이 가장 중요한 최상위 제목이며, 숫자가 커질수록 중요도가 낮아집니다. 이 태그들은 단순히 글자를 크게 만드는 것이 아니라, 문서의 구조를 만드는 중요한 역할을 합니다.

  • <p>: 문단(Paragraph)을 의미합니다. 텍스트의 긴 단락을 감쌀 때 사용합니다.

  • <a>: 하이퍼링크(Anchor)를 만드는 태그입니다. href라는 속성(Attribute)에 이동할 주소를 적어줍니다. 예: <a href="https://naver.com">네이버</a>

  • <b> 또는 <strong>: 글자를 굵게 만듭니다. <strong>은 시각적으로 굵게 할 뿐만 아니라, 내용이 중요함을 의미적으로 강조하는 태그입니다.

  • <i> 또는 <em>: 글자를 기울입니다. <em>은 내용의 특정 부분을 강조하는 의미를 가집니다.

3.2. 목록 태그

  • <ul>: 순서가 없는 목록(Unordered List)을 만듭니다. 보통 글머리 기호(•)로 표현됩니다.

  • <ol>: 순서가 있는 목록(Ordered List)을 만듭니다. 1, 2, 3… 과 같이 숫자로 표현됩니다.

  • <li>: 각 목록의 항목(List Item)을 나타냅니다. <ul>과 <ol>의 자식 요소로 사용됩니다.

예시:

HTML

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>딸기</li>
</ul>

<ol>
  <li>라면 물 끓이기</li>
  <li>스프와 면 넣기</li>
  <li>3분 후 맛있게 먹기</li>
</ol>

3.3. 미디어 태그

  • <img>: 이미지를 삽입하는 태그입니다. 닫는 태그가 없습니다.

    • src: 이미지 파일의 경로를 지정하는 필수 속성입니다.

    • alt: 이미지를 표시할 수 없을 때 대신 표시될 텍스트입니다. 스크린 리더 사용자에게 이미지를 설명해주는 역할도 하므로 웹 접근성을 위해 반드시 작성해야 합니다.

    • 예: <img src="dog.jpg" alt="귀여운 강아지 사진">

  • <video>, <audio>: 비디오와 오디오 파일을 재생할 수 있는 태그입니다. 과거에는 플래시(Flash) 같은 별도 플러그인이 필요했지만, HTML5부터는 자체적으로 지원합니다.

3.4. 콘텐츠 구조화 (시맨틱 태그)

과거에는 모든 구역을 의미 없는 <div> 태그로 나누었습니다. 하지만 HTML5부터는 각 구역의 ‘의미’를 명확하게 나타내는 시맨틱 태그(Semantic Tag) 사용이 권장됩니다. 이는 코드의 가독성을 높이고, 검색 엔진과 스크린 리더가 페이지의 구조를 더 잘 이해하도록 돕습니다.

  • <header>: 페이지나 특정 섹션의 머리말을 나타냅니다. 보통 로고, 제목, 검색창 등이 들어갑니다.

  • <nav>: 다른 페이지로 이동하는 링크(내비게이션) 메뉴를 묶는 데 사용됩니다.

  • <main>: 해당 문서의 핵심적인 콘텐츠를 담는 영역입니다. 문서에서 단 한 번만 사용해야 합니다.

  • <section>: 문서의 독립적인 구획을 나타냅니다. 보통 제목(<h1> 등)을 포함합니다.

  • <article>: 블로그 포스트, 뉴스 기사처럼 그 자체로 독립적으로 배포하거나 재사용할 수 있는 콘텐츠를 의미합니다.

  • <aside>: 문서의 주요 내용과 간접적으로만 연관된 부분(광고, 사이드바 등)을 나타냅니다.

  • <footer>: 페이지나 특정 섹션의 꼬리말을 나타냅니다. 보통 저작권 정보, 연락처 등이 들어갑니다.

4. 심화 내용 더 나은 웹을 위하여

4.1. HTML, CSS, JavaScript의 관계

HTML이 웹의 ‘구조(뼈대)‘를 담당한다면, 나머지 두 핵심 기술은 각각 ‘디자인’과 ‘동작’을 담당합니다.

  • CSS (Cascading Style Sheets): 웹페이지의 디자인과 레이아웃을 담당합니다. 글자 색, 배경색, 요소의 크기와 위치 등을 지정합니다. HTML이 만든 뼈대에 살과 옷을 입히는 역할입니다.

  • JavaScript: 웹페이지를 동적으로 만들고 사용자와의 상호작용을 담당합니다. 버튼 클릭 시 팝업창 띄우기, 실시간으로 내용 변경하기 등 웹에 생명을 불어넣는 역할입니다.

이 세 가지는 각자의 역할에 집중할 때 가장 강력한 시너지를 냅니다. HTML 파일에는 구조만 명시하고, 디자인은 별도의 CSS 파일에서, 동작은 별도의 JavaScript 파일에서 관리하는 것이 현대 웹 개발의 표준 방식입니다.

4.2. 폼(Form) 태그와 사용자 입력

웹은 단순히 정보를 보여주는 것을 넘어 사용자의 입력을 받는 역할도 합니다. 회원가입, 로그인, 검색, 게시글 작성 등 모든 것은 <form> 태그를 통해 이루어집니다.

  • <form>: 사용자 입력을 받는 전체 영역을 감쌉니다.

  • <label>: 입력 칸의 이름표 역할을 합니다.

  • <input>: 가장 많이 쓰이는 입력 요소입니다. type 속성을 통해 텍스트, 비밀번호, 체크박스, 라디오 버튼, 파일 업로드 등 다양하게 변신할 수 있습니다.

  • <textarea>: 여러 줄의 텍스트를 입력받을 때 사용합니다.

  • <button>: 클릭 가능한 버튼을 만듭니다.

4.3. 웹 접근성(Web Accessibility)

웹 접근성은 장애를 가진 사람들이나 고령자 등 모든 사용자가 동등하게 웹사이트의 정보에 접근하고 이용할 수 있도록 보장하는 것을 말합니다. 시맨틱 태그를 올바르게 사용하고, 이미지에 alt 텍스트를 제공하며, 키보드만으로도 사이트 이용이 가능하도록 만드는 것 등이 웹 접근성을 높이는 중요한 실천입니다. 잘 만든 HTML은 그 자체로 접근성의 기초가 됩니다.

결론: 모든 웹 개발의 첫걸음

지금까지 우리는 HTML이 단순한 코드의 나열이 아니라, 웹이라는 거대한 정보 생태계를 지탱하는 근본적인 철학이자 약속임을 확인했습니다. 팀 버너스리가 꿈꿨던 정보 공유의 이상에서 출발해, 이제는 전 세계 수십억 인구의 일상을 책임지는 핵심 기술로 자리 잡았습니다.

HTML을 배운다는 것은 웹 개발이라는 건물의 가장 튼튼한 주춧돌을 놓는 것과 같습니다. 이 핸드북이 여러분의 여정에 든든한 첫 번째 가이드가 되었기를 바랍니다. 이제 이 뼈대 위에 CSS로 아름다운 디자인을 입히고, JavaScript로 역동적인 생명력을 불어넣을 준비가 되셨습니다. 웹의 세계에 오신 것을 환영합니다!

그래프 뷰

백링크