지원 정책 알아보기

HTML 기초, 10분 만에 웹사이트 만드는 법!

2026-07-13 · 교육 · 읽는데 7분

HTML 기초, 10분 만에 웹사이트 만드는 법!

웹사이트를 만드는 일이 어렵게 느껴진다면, 오늘 이 글 하나면 충분합니다. HTML은 웹페이지의 뼈대를 만드는 언어로, 프로그래밍처럼 복잡한 논리가 아닌 '문서에 이름표를 붙이는' 작업에 가깝습니다. 메모장만 있으면 누구나 5분 안에 첫 번째 웹페이지를 만들 수 있고, 기본 태그 몇 개만 알면 10분 안에 구조를 갖춘 사이트를 완성할 수 있습니다. 지금부터 바로 시작해보겠습니다.

HTML, 정확히 어떤 언어일까

HTML은 HyperText Markup Language의 줄임말입니다. 하이퍼텍스트는 다른 페이지로 이동할 수 있는 링크 기능을 말하고, 마크업은 문서의 각 부분에 ‘이건 제목’, ‘이건 문단’이라고 표시하는 행위를 뜻합니다. 즉 HTML은 브라우저가 웹페이지의 구조를 이해할 수 있도록 도와주는 마크업 언어입니다.

프로그래밍 언어가 아니기 때문에 조건문이나 반복문 같은 복잡한 개념은 없습니다. 그저 태그로 내용을 감싸서 ‘무엇인지’를 알려주면 됩니다. 예를 들어 <h1>안녕하세요</h1>라고 쓰면 브라우저는 ‘안녕하세요’를 가장 큰 제목으로 표시합니다. 이렇게 단순한 원리 덕분에 비개발자도 금방 배울 수 있습니다.

메모장 하나면 끝, 5분 실습으로 첫 페이지 만들기

HTML을 배우는 가장 빠른 길은 직접 만들어보는 것입니다. 특별한 프로그램 없이 컴퓨터에 기본으로 있는 메모장(윈도우)이나 텍스트 편집기만 있으면 됩니다.

  1. 바탕화면에 새 텍스트 문서를 만듭니다.
  2. 파일 이름을 index.html로 바꿉니다. (확장자가 .txt가 아닌 .html이어야 합니다.)
  3. 파일을 마우스 오른쪽 버튼으로 클릭하고 '연결 프로그램'에서 메모장을 선택합니다.
  4. 아래 내용을 그대로 입력합니다.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>나의 첫 웹페이지</title>
</head>
<body>
  <h1>환영합니다!</h1>
  <p>이것은 제가 만든 첫 번째 웹페이지입니다.</p>
</body>
</html>
  1. 저장한 후 파일을 더블클릭하면 브라우저가 열리면서 입력한 내용이 화면에 표시됩니다.

이제 당신은 웹페이지를 만든 것입니다. 글자를 바꾸거나 태그를 추가하면서 어떤 변화가 생기는지 직접 확인해보세요.

자주 쓰는 태그, 이 정도면 웬만한 사이트는 다 만든다

HTML 태그는 종류가 많지만 실제 자주 쓰는 것은 몇 개 안 됩니다. 아래 태그들만 알아도 기본적인 웹페이지 구조를 만들 수 있습니다.

문서 구조를 만드는 태그

  • <!DOCTYPE html>: HTML5 문서임을 선언합니다.
  • <html>: 모든 HTML 내용을 감싸는 최상위 태그입니다.
  • <head>: 웹페이지의 설정 정보(제목, 문자 인코딩 등)를 담습니다.
  • <title>: 브라우저 탭에 표시될 제목을 지정합니다.
  • <body>: 실제로 화면에 보이는 내용을 담습니다.

콘텐츠를 표시하는 태그

  • <h1> - <h6>: 제목을 표시합니다. 숫자가 작을수록 크기가 큽니다.
  • <p>: 문단을 만들 때 사용합니다.
  • <a href="링크주소">: 클릭하면 다른 페이지로 이동하는 링크를 만듭니다.
  • <img src="이미지경로" alt="설명">: 이미지를 삽입합니다. 닫는 태그가 없는 빈 태그입니다.
  • <ul> / <ol>: 순서 없는 목록 / 순서 있는 목록을 만듭니다. 각 항목은 <li>로 감쌉니다.

예를 들어 자기소개 페이지를 만든다면 아래처럼 작성할 수 있습니다.

<h1>안녕하세요, 저는 OOO입니다</h1>
<p>웹 개발을 시작한 지 얼마 안 된 초보입니다.</p>
<h2>좋아하는 것</h2>
<ul>
  <li>커피 마시기</li>
  <li>산책하기</li>
  <li>새로운 기술 배우기</li>
</ul>

태그는 중첩이 중요하다. 열린 순서의 역순으로 닫아야 한다

태그 안에 다른 태그를 넣는 것을 중첩이라고 합니다. 이때 반드시 지켜야 할 규칙이 있습니다. 먼저 연 태그를 나중에 닫아야 한다는 점입니다.

올바른 예:

<p>고양이가 <strong>매우</strong> 사납다</p>

잘못된 예:

<p>고양이가 <strong>매우</p> 사납다</strong>

잘못된 중첩을 해도 브라우저가 자동으로 수정해서 보여주는 경우가 많지만, 원하지 않는 결과가 나오거나 다른 브라우저에서는 깨질 수 있습니다. 항상 올바르게 닫는 습관을 들이는 것이 좋습니다.

블록 요소와 인라인 요소, 배치 차이를 알아야 디자인이 보인다

HTML 요소는 크게 두 가지 종류로 나뉩니다.

  • 블록 레벨 요소: 한 줄 전체를 차지합니다. 앞뒤로 자동 줄바꿈이 들어가며, 대표적으로 <p>, <h1>, <ul>, <div>가 있습니다.
  • 인라인 요소: 내용이 있는 부분만 차지합니다. 줄바꿈 없이 옆으로 배치되며, <strong>, <em>, <a>, <img>, <span>이 대표적입니다.

이 차이를 알면 나중에 CSS로 디자인을 입힐 때 훨씬 수월합니다. 예를 들어 여러 이미지를 가로로 나열하고 싶다면 인라인 요소인 <img>를 연달아 쓰거나, 블록 요소에 CSS로 display 속성을 변경하면 됩니다.

HTML만 알아도 충분한 상황이 있다

많은 사람이 HTML을 배우면 곧바로 CSS와 자바스크립트까지 익혀야 한다고 생각합니다. 하지만 실제로는 HTML만으로도 유용한 결과물을 만들 수 있습니다.

  • 모바일 초대장
  • 부고장
  • 간단한 정보 페이지
  • 개인 이력서(서식이 복잡하지 않은 경우)

이런 것들은 HTML 한 장에 약간의 CSS만 추가해도 충분히 완성도 높게 만들 수 있습니다. 처음부터 모든 것을 다 배우려고 하기보다, 일단 HTML로 무엇인가를 만들어보는 경험이 더 중요합니다.

더 배우고 싶다면 이 순서로 공부하세요

HTML을 조금 익힌 후에는 공식 문서나 튜토리얼 사이트를 활용하는 것이 좋습니다. 추천 순서는 다음과 같습니다.

  • 생활코딩: 우리나라 말로 된 강의로 가장 진입 장벽이 낮습니다.
  • W3Schools: 실제 예제를 바로 실행해볼 수 있어 초보자에게 적합합니다.
  • MDN Web Docs: 가장 정확하고 공신력 있는 HTML 레퍼런스입니다. 모르는 태그가 있을 때 검색하면 가장 신뢰할 수 있습니다.

공부할 때 중요한 것은 이론보다 실습입니다. 태그 하나를 배우면 즉시 메모장에 쳐보고, 브라우저에서 결과를 확인하는 과정을 반복해야 진짜 내 것이 됩니다.