HTML 기본 태그 12가지, 이것만 알면 AI가 짠 코드가 읽혀요

Claude Code에 “간단한 소개 페이지 만들어줘”라고 입력하면 몇 초 만에 수십 줄짜리 코드가 화면을 가득 채워요. 꺾쇠괄호가 잔뜩 섞인 모습이 처음엔 외계어처럼 보이죠. 그런데 결론부터 말하면, HTML 기본 태그 10여 개만 읽을 줄 알아도 AI에게 수정을 요청하는 정확도가 완전히 달라져요. 코드를 짜는 건 AI가 하더라도, 읽는 눈은 내가 가져야 원하는 화면이 나오거든요. 기본 구조부터 자주 만나는 핵심 태그 12가지까지, AI가 짜준 코드를 직접 뜯어본다는 관점으로 하나씩 정리해 볼게요.

• HTML 태그, 왜 읽을 줄만 알면 될까요?
• HTML 기본 구조는 어떻게 생겼을까요?
• 태그를 쓰는 규칙은 따로 있을까요?
• 꼭 알아야 할 기본 태그 12가지는 뭘까요?
• 자주 쓰는 태그, 코드로는 어떻게 쓸까요?
• div·span과 시맨틱 태그는 뭐가 다를까요?
• 작성한 HTML은 어디서 확인할까요?
• 자주 묻는 질문

HTML 태그, 왜 읽을 줄만 알면 될까요?

HTML은 HyperText Markup Language의 줄임말로, 웹 페이지의 뼈대를 만드는 마크업 언어예요. 프로그래밍 언어처럼 계산을 하는 게 아니라, “여기는 제목이야”, “여기는 문단이야” 하고 내용에 이름표를 붙이는 역할이죠. 그 이름표가 바로 태그이고, 꺾쇠괄호 안에 태그 이름을 적는 방식으로 써요.

용어를 세 개만 구분하면 코드 읽기가 훨씬 쉬워져요. 태그는 <p>처럼 꺾쇠로 감싼 이름표, 요소는 시작 태그부터 종료 태그까지 내용물을 포함한 한 덩어리, 속성은 시작 태그 안에 붙는 추가 정보예요. 예를 들어 <a href=”주소”>클릭</a>에서 a는 태그, href는 속성, 전체 한 줄이 요소인 거죠.

바이브코딩을 할 때 이게 왜 중요할까요? 수정 요청의 정확도가 달라지기 때문이에요. “위에 있는 큰 글씨 바꿔줘”라고 하면 AI가 엉뚱한 곳을 고치는 경우가 생기지만, “h1 태그 안의 텍스트를 바꿔줘”라고 하면 한 번에 원하는 결과가 나와요. 코드를 짤 줄은 몰라도 읽을 줄만 알면, 프롬프트가 좌표를 정확히 찍는 명령으로 바뀌는 셈이에요.

HTML 기본 구조는 어떻게 생겼을까요?

Claude Code가 만들어준 HTML 파일을 열어보면 어떤 페이지든 똑같은 골격이 먼저 보여요. 이 기본 틀부터 눈에 익히면 나머지는 그 안을 채우는 내용일 뿐이에요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>내 첫 페이지</title>
</head>
<body>
  <h1>안녕하세요</h1>
</body>
</html>

맨 위의 <!DOCTYPE html>은 “이 문서는 HTML5 규격으로 작성했어요”라고 브라우저에 알리는 선언이에요. 태그라기보다 문서의 신분증 같은 한 줄이라, 항상 첫 줄에 그대로 두면 돼요. 그다음 <html>이 문서 전체를 감싸고, lang=”ko” 속성으로 한국어 문서임을 알려줘요.

<head>는 화면에 보이지 않는 정보 영역이에요. 브라우저 탭에 표시되는 <title>, 한글 깨짐을 막아주는 meta charset, 검색엔진에 페이지 설명을 전달하는 meta 태그가 여기에 들어가요. 반면 <body>는 화면에 실제로 보이는 모든 내용이 들어가는 곳이에요. 그래서 AI에게 수정을 요청할 때도 대부분 body 안의 이야기를 하게 돼요.

태그를 쓰는 규칙은 따로 있을까요?

규칙은 딱 네 가지만 기억하면 돼요. 첫째, 태그는 대부분 <p>내용</p>처럼 시작 태그와 종료 태그가 짝을 이뤄요. 종료 태그에는 슬래시(/)가 붙는다는 것만 구분하면 돼요. 둘째, 예외도 있어요. 줄바꿈 <br>과 이미지 <img>는 내용물을 감쌀 필요가 없어서 닫는 태그 없이 혼자 쓰여요.

셋째, 속성은 항상 시작 태그 안에 이름=”값” 형태로 적어요. <img src=”cat.jpg” alt=”고양이”>처럼 속성 여러 개를 띄어쓰기로 나열할 수 있어요. 넷째, 태그는 상자 안에 상자를 넣듯 중첩돼요. <ul> 안에 <li>가 들어가는 식이죠. AI가 짠 코드에서 들여쓰기가 계단처럼 보이는 게 바로 이 부모-자식 관계를 표현한 거예요. 참고로 <!– 메모 –> 형태의 주석은 화면에 표시되지 않는 개발용 메모인데, Claude Code가 “여기는 메뉴 영역” 같은 설명을 주석으로 달아주는 경우가 많아서 읽어두면 코드 지도를 얻는 효과가 있어요.

꼭 알아야 할 기본 태그 12가지는 뭘까요?

HTML 태그는 100개가 넘지만, 실제 웹 페이지 만들기에서 반복해서 마주치는 건 아래 12가지 정도예요. 전부 외우려 하지 말고, AI 코드에서 만났을 때 “아 이건 그 역할이지” 하고 알아볼 수준이면 충분해요.

실제 랜딩페이지 코드에 이 표를 대입해 보면 그림이 그려져요. 맨 위 로고와 메뉴는 header와 nav, 큰 소개 문구는 section 안의 h1과 p, 서비스 특징 3개는 ul과 li, 하단 저작권 표시는 footer가 담당하는 식이에요. Claude Code가 만든 코드를 위에서 아래로 훑으며 “이 태그는 화면의 어느 부분이지?” 하고 짝을 맞춰보는 게 가장 빠른 학습법이에요.

자주 쓰는 태그, 코드로는 어떻게 쓸까요?

표만 보면 감이 안 오니, 수정 요청이 특히 잦은 세 가지를 코드로 확인해 볼게요. 먼저 링크 태그예요. 아래처럼 쓰면 브라우저에는 파란 밑줄이 있는 “공식 문서 보기” 글자가 나타나고, 클릭하면 href에 적힌 주소로 이동해요.

<a href="https://developer.mozilla.org/ko/">공식 문서 보기</a>
<img src="images/cat.jpg" alt="창가에 앉은 고양이">
<ul>   <li>홈</li>   <li>블로그</li>   <li>소개</li> </ul>

이미지 태그에서 src는 이미지 파일의 경로, alt는 이미지가 안 뜰 때 대신 보여줄 설명이에요. 화면에 이미지가 안 나오고 깨진 아이콘만 보인다면 십중팔구 src 경로 문제라서, “img 태그의 src 경로를 확인해줘”라고 요청하면 돼요. 목록 태그는 ul이 바깥 상자, li가 각 항목이라는 중첩 구조만 기억하면 메뉴·특징 나열·체크리스트 어디든 알아볼 수 있어요.

div·span과 시맨틱 태그는 뭐가 다를까요?

AI 코드에서 가장 많이 보이는 태그가 div라서 처음엔 헷갈리기 쉬워요. div는 아무 의미 없는 만능 상자예요. 여러 요소를 한 덩어리로 묶어 배치나 스타일을 입힐 때 쓰죠. span은 같은 포장지인데 크기가 달라서, 문장 전체가 아니라 그 안의 몇 글자만 묶을 때 써요. “이 단어만 초록색으로” 같은 요청이 들어오면 AI가 span으로 감싸는 이유예요.

여기서 블록 요소와 인라인 요소 구분이 나와요. div·p·h1·ul 같은 블록 요소는 한 줄 전체를 차지해서 다음 요소가 자동으로 아랫줄로 내려가요. 반면 span·a 같은 인라인 요소는 자기 내용만큼만 자리를 차지해서 글자처럼 옆으로 이어져요. “버튼 두 개가 왜 세로로 쌓이지?” 같은 배치 의문의 절반은 이 구분에서 풀려요.

속성 중에서는 class와 id 두 개만 알면 CSS 연결이 보여요. class는 같은 스타일을 여러 요소에 반복해서 붙이는 이름표이고, id는 한 페이지에 딱 하나만 존재하는 고유 이름표예요. 예를 들어 <p class=”intro”>라고 쓰고 CSS에서 .intro에 색을 지정하면 그 문단의 스타일이 바뀌는 구조죠. AI에게 “intro 클래스가 붙은 문단의 글자 크기를 키워줘”처럼 class 이름으로 요청하면 정확도가 확 올라가요.

그리고 header·nav·section·article·footer 같은 시맨틱 태그는 기능상 div와 똑같지만, 이름 자체가 역할을 설명해요. 전부 div로만 짠 페이지는 검색엔진이 어디가 메뉴이고 어디가 본문인지 구분하기 어렵지만, 시맨틱 태그로 나눈 페이지는 구조가 그대로 전달돼요. 검색 노출과 애드센스 승인을 준비하는 블로그라면 시맨틱 구조가 기본기인 이유예요.

작성한 HTML은 어디서 확인할까요?

코드는 눈으로만 읽으면 금방 잊어버려요. 직접 저장하고 브라우저에서 열어보는 순간부터 태그가 진짜 내 지식이 되는데, 방법은 생각보다 간단해요.

Claude Code로 작업 중이라면 “이 파일을 브라우저로 열어줘”라고 요청해도 되고, 설치가 부담스러우면 CodePen 같은 온라인 에디터에 코드를 붙여넣어 바로 결과를 볼 수도 있어요. 어떤 방법이든 화면이 이상하게 나올 때는 아래 네 가지부터 점검하면 대부분 해결돼요.

자주 묻는 질문

HTML 기본 틀은 어떻게 생겼나요?

DOCTYPE 선언 아래 html 태그가 전체를 감싸고, 그 안에 head와 body가 들어가는 4단 골격이에요. head에는 title·meta 같은 문서 정보가, body에는 화면에 보이는 모든 내용이 들어가요. VSCode에서 느낌표(!)와 Tab 키로 이 틀을 자동 생성할 수 있어요.

HTML 태그는 전부 외워야 하나요?

아니요, 자주 쓰는 12가지 정도만 알아보면 충분해요. 태그는 100개가 넘지만 실제 페이지의 대부분은 제목·문단·링크·이미지·목록·구역 태그로 이뤄져요. 나머지는 AI 코드에서 만났을 때 검색하거나 AI에게 물어보며 익히는 편이 효율적이에요.

블록 요소와 인라인 요소는 뭐가 다른가요?

블록 요소는 한 줄 전체를 차지하고, 인라인 요소는 자기 내용만큼만 차지해요. div·p·h1은 블록이라 다음 요소가 아랫줄로 내려가고, span·a는 인라인이라 글자처럼 옆으로 이어져요. 요소 배치가 뜻대로 안 될 때 가장 먼저 확인할 개념이에요.

작성한 HTML은 어디서 확인하나요?

.html로 저장한 파일을 더블클릭해 브라우저로 열면 바로 확인돼요. 반복해서 수정하며 볼 거라면 VSCode의 Live Server 확장을 쓰면 저장할 때마다 화면이 자동 새로고침돼서 편해요. 설치 없이 확인하려면 CodePen 같은 온라인 에디터도 좋은 선택이에요.

참고자료

• MDN Web Docs — HTML(한국어): 태그별 문법과 예제를 한국어로 볼 수 있는 표준 레퍼런스
• WHATWG HTML Living Standard: 브라우저들이 따르는 HTML 공식 표준 명세
• W3C 공식 홈페이지: 웹 표준을 관리하는 국제 표준화 기구
• web.dev — Learn HTML: 구글이 운영하는 무료 HTML 학습 코스

꺾쇠괄호투성이라 막막했던 코드도, 기본 구조와 태그 12가지의 역할만 알면 지도가 있는 도시처럼 읽혀요. 이제 AI가 짠 코드를 만나면 head와 body부터 나누고, 시맨틱 태그로 큰 구역을 잡은 뒤, 안쪽의 제목·문단·링크·이미지 태그를 화면과 짝지어 보는 순서를 권해요. 그렇게 태그 이름으로 수정을 요청하기 시작하면 바이브코딩의 왕복 횟수가 눈에 띄게 줄어들 거예요. 뼈대가 눈에 들어왔다면 다음 단계는 살을 붙이는 CSS 기초예요. 색·크기·배치를 다루는 법까지 이어서 익히면 원하는 화면을 훨씬 자유롭게 만들 수 있어요.

함께 보면 좋은 글

• AEO FAQ 구조, 정말 AI가 인용할까? 30일 직접 붙여본 기록
• GEO 콘텐츠 구조, 문단만 바꿨더니 AI가 내 글을 읽기 시작했다
• 구글 서치콘솔 등록과 사용법, 초보자도 따라 하는 실전 순서