HTML 기초, 웹페이지 구조와 자주 쓰는 태그·첫 페이지 만들기까지

똑똑해지고 싶은 똑이 2026.10.15 조회 22

다 읽는 데 약 7분 걸려요필요한 순간에 바로 꺼내 쓸 수 있게 정리했어요.

💡 핵심 킬러 메시지

HTML은 꾸미기가 아니라 '웹페이지의 뼈대와 의미를 만드는 것'이라는 점을 먼저 이해하는 것이 핵심이에요.

HTML을 배우겠다고 메모장을 열었는데 꺾쇠 기호만 가득해서 이게 맞나 싶었던 적 있죠.

웹 개발이나 블로그 꾸미기를 배우다 보면 가장 먼저 만나는 것이 HTML이에요. HTML은 HyperText Markup Language의 약자로, 웹페이지에 들어갈 내용과 그 구조를 표시하는 언어예요. 프로그래밍 언어처럼 계산이나 조건 처리를 하지는 않지만, 모든 웹페이지의 출발점이라 웹과 관련된 일을 한다면 꼭 알아야 해요. 다행히 문법이 단순해서 하루 이틀이면 기본 페이지를 만들 수 있어요. 이 글은 HTML을 처음 배우는 사람을 위해 HTML의 역할, 기본 문서 구조, 자주 쓰는 태그, 시맨틱 태그와 접근성, 첫 페이지를 만드는 순서를 정리했어요. 세부 문법은 MDN 같은 공식 성격의 문서에서 함께 확인하세요.

📷 사진 1 코드 에디터에 작성된 HTML 문서
Alt: HTML 코드 에디터
(이 상자를 내 사진으로 바꿔 주세요)

HTML, CSS, 자바스크립트의 관계

태그를 하나 빠뜨려 화면이 엉망이 되고 한참 찾았던 분도 있을 거예요. 기본 구조만 익히면 실수가 금방 줄어요.

웹페이지를 집에 비유하면 HTML은 기둥과 방을 나누는 뼈대, CSS는 벽지와 가구 배치 같은 꾸밈, 자바스크립트는 전등 스위치나 자동문처럼 움직임을 담당해요. HTML로 제목, 문단, 이미지, 링크 같은 내용을 배치하고, CSS로 색과 크기, 배치를 꾸미고, 자바스크립트로 버튼을 눌렀을 때의 동작을 만들어요. 세 가지가 함께 쓰이지만 출발점은 언제나 HTML이에요. 자바스크립트는 자바스크립트 글에서 따로 다뤘어요.

📷 사진 2 HTML 코드를 작성하는 편집기 화면
Alt: HTML 기초 코드
(이 상자를 내 사진으로 바꿔 주세요)

기본 문서 구조

HTML 문서는 보통 다음 요소로 이뤄져요. 맨 위의 문서 형식 선언(<!DOCTYPE html>)은 이 문서가 HTML5 문서임을 알려 줘요. 그 아래 html 태그 안에 head와 body가 있어요. head에는 문자 인코딩, 페이지 제목, 검색엔진과 브라우저를 위한 정보처럼 화면에 직접 보이지 않는 정보가 들어가고, body에는 실제로 화면에 보이는 내용이 들어가요. 한글이 깨지지 않도록 head 안에 문자 인코딩을 UTF-8로 지정하는 습관을 들이세요. 모바일 화면에 맞추려면 viewport 설정도 넣어 두는 것이 일반적이에요.

📷 사진 3 head와 body 구조를 표시한 도식
Alt: HTML 문서 구조
(이 상자를 내 사진으로 바꿔 주세요)

📷 사진 4 브라우저에서 연 첫 페이지
Alt: HTML 첫 페이지
(이 상자를 내 사진으로 바꿔 주세요)

자주 쓰는 태그

태그	역할	사용 예
h1~h6	제목 단계	페이지 제목, 소제목
p	문단	본문 글
a	링크	다른 페이지로 이동
img	이미지	사진 넣기(alt 속성 필수)
ul, ol, li	목록	순서 없는·있는 목록
table	표	비교표
div, span	묶음	영역 나누기
form, input, button	입력 양식	검색창, 로그인

대부분의 태그는 여는 태그와 닫는 태그가 짝을 이루고, img처럼 내용 없이 홀로 쓰는 태그도 있어요. 태그 안에는 href, src, alt 같은 속성을 넣어 추가 정보를 줄 수 있어요.

📷 사진 5 시맨틱 태그 구조 메모
Alt: HTML 시맨틱 태그
(이 상자를 내 사진으로 바꿔 주세요)

시맨틱 태그와 접근성

header, nav, main, article, section, footer 같은 태그를 시맨틱 태그라고 해요. 모두 div로 만들어도 화면은 비슷하게 보이지만, 시맨틱 태그를 쓰면 검색엔진과 화면 낭독기가 페이지 구조를 더 잘 이해해요. 이미지에는 내용을 설명하는 alt 속성을 넣고, 제목 태그는 h1부터 순서대로 쓰는 것이 좋아요. 버튼 역할을 하는 요소는 실제 button 태그를 쓰면 키보드로도 조작할 수 있어 접근성이 좋아져요. 이런 습관은 검색 노출에도 긍정적인 영향을 줄 수 있어요.

📷 사진 6 화면 낭독기로 웹페이지를 탐색하는 모습
Alt: HTML 웹 접근성
(이 상자를 내 사진으로 바꿔 주세요)

첫 페이지 만들기 순서

편집기 설치: 무료 코드 편집기를 설치해요. 메모장으로도 가능하지만 자동 완성과 색 표시가 있으면 편해요.
파일 만들기: index.html 파일을 만들고 기본 구조를 입력해요.
내용 채우기: 자기소개 페이지처럼 제목, 문단, 사진, 링크, 목록을 넣어 봐요.
브라우저로 열기: 파일을 더블클릭해 브라우저에서 결과를 확인해요.
개발자 도구 살펴보기: 브라우저 개발자 도구로 요소 구조를 확인하고 직접 수정해 봐요.
CSS 연결: 간단한 스타일 파일을 연결해 글꼴과 색을 바꿔 봐요.
인터넷에 올리기: 무료 정적 사이트 호스팅이나 웹호스팅에 올리면 다른 사람도 볼 수 있어요.

자주 하는 실수

닫는 태그를 빠뜨려 레이아웃이 깨지는 경우
이미지 경로를 잘못 적어 사진이 안 보이는 경우
꾸밈을 위해 제목 태그를 남용하는 경우
문자 인코딩을 지정하지 않아 한글이 깨지는 경우

HTML, 첫 페이지를 만들어 볼 때

기본 문서 구조를 적고 제목과 문단, 링크와 이미지를 하나씩 넣어 브라우저에서 열어 보세요. 바꿀 때마다 새로 고침해서 확인하면 태그의 역할이 눈에 들어와요.

HTML 체크리스트

항목	확인할 것	체크
역할	뼈대·의미	☐
관계	CSS·자바스크립트	☐
구조	기본 문서 구조	☐
태그	제목·문단·링크·이미지	☐
접근성	시맨틱 태그	☐

다음에 배울 것

HTML 기본이 익숙해지면 CSS로 레이아웃(플렉스박스, 그리드)을 배우고, 이어서 자바스크립트로 동작을 추가하세요. 웹 화면 개발 직무 전반은 프론트엔드 글에서 로드맵을 정리했어요. 블로그 스킨을 수정하거나 업무용 이메일 서식을 다듬을 때도 HTML 지식이 바로 쓰여요.

HTML 감정 카드: HTML 앞에서 이런 마음이라면

읽다가 마음이 머문 대목이 있었다면, 지금 내 상태와 가장 가까운 카드를 골라 보세요.

📷 사진 7 개발자 도구로 구조를 보는 화면
Alt: HTML 구조 확인
(이 상자를 내 사진으로 바꿔 주세요)

자주 묻는 질문

HTML의 시맨틱 태그는 왜 쓰나요?

내용의 의미를 분명히 알려 줘서 화면 읽기 프로그램을 쓰는 사람과 검색엔진이 구조를 이해하기 쉬워져요.

HTML은 프로그래밍 언어인가요?

구조를 표시하는 마크업 언어로 분류돼요. 계산이나 조건 처리는 자바스크립트가 담당해요.

HTML만 배워도 홈페이지를 만들 수 있나요?

간단한 페이지는 가능하지만 보기 좋게 꾸미려면 CSS가 필요해요.

무엇으로 연습하나요?

코드 편집기와 브라우저만 있으면 충분해요. 온라인 실습 사이트도 도움이 돼요.

HTML5는 무엇이 다른가요?

시맨틱 태그, 오디오·비디오 태그 등이 표준화된 현재 HTML 규격이에요.

마무리

HTML은 웹페이지의 뼈대이자 모든 웹 기술의 출발점이에요. 오늘은 index.html 파일 하나를 만들어 자기소개 페이지를 직접 완성해 보세요.

함께 읽으면 좋은 글

AI insight 목록

이 글, 어땠어요?

별을 눌러 평가해 주세요. 한 사람당 한 번만 세요.

아직 평가가 없어요. 첫 평가를 남겨 주세요.

💬 댓글

첫 댓글을 남겨 주세요.