HTML

HTML은 웹 페이지의 구조와 내용을 표현하는 마크업 언어입니다.developer.mozilla+1

HTML이란 무엇인가

HTML은 HyperText Markup Language의 약자로, 웹 문서의 구조(뼈대)를 정의하는 언어입니다.web+1
모든 웹사이트는 기본적으로 HTML 위에 CSS(디자인), JavaScript(동작)가 얹혀 있는 형태입니다.naver+1
“마크업 언어”란 태그(tag)를 사용해 텍스트에 의미(제목, 문단, 목록, 링크 등)를 부여하는 언어를 뜻합니다.developer.mozilla+1

예: “이 문장은 제목이다”, “이 부분은 본문 단락이다” 같은 의미를 태그로 표시합니다.[developer.mozilla]

HTML 문서의 기본 구조

가장 단순한 HTML 문서는 다음과 같은 구조를 가집니다.developer.mozilla+1

xml<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>나의 첫 페이지</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>이것은 첫 번째 문단입니다.</p>
  </body>
</html>

<!DOCTYPE html>: 이 문서가 HTML5 문서임을 브라우저에 알림.[ittrue.tistory]
<html>: HTML 문서의 루트(최상위) 요소, 전체 내용을 감쌉니다.freecodecamp+1
<head>: 제목, 문자 인코딩, CSS/JS 링크, SEO용 메타 정보 등 “문서 정보”를 담는 영역입니다.freecodecamp+1
<body>: 실제 화면에 보이는 콘텐츠(텍스트, 이미지, 링크 등)가 들어가는 영역입니다.ittrue.tistory+1

요소(Element), 태그(Tag), 속성(Attribute)

요소와 태그

HTML의 기본 단위는 **요소(element)**이며, 대부분 시작 태그와 종료 태그로 구성됩니다.wikipedia+1

xml<p>이것은 단락입니다.</p>

<p>: 시작 태그
</p>: 종료 태그
이것은 단락입니다.: 콘텐츠
전체 <p>…</p>가 하나의 p 요소입니다.developer.mozilla+1

일부 요소는 내용 없이 시작 태그만 쓰는 “빈 요소” 형태를 갖습니다. 예: 이미지, 줄바꿈 등.web+1

xml<br>
<img src="cat.jpg" alt="고양이">

속성(Attribute)

속성은 요소에 추가 정보를 부여합니다.naver+1

xml<a href="https://example.com" target="_blank">링크</a>

a: 링크 요소
href="https://example.com": 클릭 시 이동할 주소를 지정하는 속성
target="_blank": 새 창(탭)에서 열도록 하는 속성
class, id, style, title 등 다양한 전역 속성이 있습니다.web+1

자주 쓰는 주요 태그들

대표적인 태그 몇 가지를 유형별로 정리하면 다음과 같습니다.developer.mozilla+2

용도	태그	설명
문서 구조	`<html>`, `<head>`, `<body>`	HTML 문서의 뼈대를 구성.freecodecamp+1
제목	`<h1>` ~ `<h6>`	숫자가 작을수록 더 중요한 제목.[developer.mozilla]
문단	`<p>`	일반적인 텍스트 단락.[developer.mozilla]
줄바꿈	`<br>`	강제 줄바꿈, 빈 요소.[developer.mozilla]
구분선	`<hr>`	수평선, 내용 구분.[developer.mozilla]
링크	`<a>`	다른 페이지나 위치로 이동하는 하이퍼링크.developer.mozilla+1
이미지	`<img>`	이미지를 삽입, `src`, `alt` 속성이 중요.[blog.naver]
목록	`<ul>`, `<ol>`, `<li>`	순서 없는 목록, 순서 있는 목록, 각 항목.[developer.mozilla]
구획	`<div>`, `<span>`	의미 없는(비시맨틱) 컨테이너, 레이아웃/스타일링에 사용.[web]
시맨틱 영역	`<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<footer>`	페이지 구조와 의미를 명확히 표현하는 시맨틱 태그.freecodecamp+1
표	`<table>`, `<tr>`, `<th>`, `<td>`	표 구조 정의.[web]
폼	`<form>`, `<input>`, `<textarea>`, `<button>`, `<select>`	사용자 입력 폼 구성.[web]

시맨틱 HTML의 개념

시맨틱(semantic) HTML은 요소 이름만 보고도 그 역할과 의미가 드러나도록 작성하는 방식을 말합니다.freecodecamp+1
예를 들어, 단순히 <div>로만 나누는 대신, 상단 영역은 <header>, 내비게이션은 <nav>, 본문은 <main>, 글 하나는 <article>, 하단은 <footer>처럼 의미 있는 요소를 사용합니다.freecodecamp+1
이렇게 하면 검색 엔진, 스크린 리더(접근성 도구), 다른 개발자들이 구조를 더 잘 이해할 수 있습니다.web+1

간단한 예:

xml<body>
  <header>
    <h1>나의 블로그</h1>
  </header>
  <nav>
    <a href="#post1">글 1</a>
    <a href="#post2">글 2</a>
  </nav>
  <main>
    <article id="post1">
      <h2>첫 번째 글</h2>
      <p>내용...</p>
    </article>
  </main>
  <footer>
    <p>ⓒ 2026 나</p>
  </footer>
</body>

HTML, CSS, JavaScript 관계

HTML: 구조와 의미(“무엇이 있는가”)를 담당.naver+1
CSS: 색, 폰트, 레이아웃 등 표현과 디자인(“어떻게 보이는가”)를 담당.[blog.naver]
JavaScript: 버튼 클릭, 폼 검증, 동적 데이터 로딩 등 동작과 상호작용(“어떻게 움직이는가”)을 담당.web+1

예를 들어, 로그인 화면을 만들 때

HTML로 아이디/비밀번호 입력 칸과 버튼 구조를 만들고,
CSS로 배경색, 정렬, 크기 등을 꾸미고,
JavaScript로 “로그인” 버튼 클릭 시 입력값을 확인하고 서버로 전송하는 로직을 구현합니다.naver+1