HTML은 웹 페이지의 뼈대를 만드는 가장 기본이 되는 언어다. 우리가 브라우저에서 보는 제목, 문단, 이미지, 링크는 모두 HTML로 그 구조가 정의된다. 이 글에서는 HTML이 무엇인지, 문서가 어떤 구조로 이루어지는지, 자주 쓰는 주요 태그와 속성은 무엇인지 입문자 눈높이에서 정리하고 간단한 실습 예시까지 살펴본다.
HTML이란 무엇인가
HTML은 HyperText Markup Language의 약자로, 웹 문서의 구조와 의미를 표시하는 마크업 언어다. 프로그래밍 언어처럼 연산이나 논리를 다루는 것이 아니라, 태그(tag)를 사용해 “이것은 제목이다”, “이것은 문단이다”, “이것은 이미지다”처럼 콘텐츠의 의미와 역할을 표시한다.
HTML이 문서의 구조를 담당한다면, 디자인(색·여백·글꼴)은 CSS가, 동적인 동작은 자바스크립트가 맡는다. 이 셋이 함께 웹 페이지를 완성하며, 그중 HTML이 가장 먼저 익혀야 할 기초가 된다.
태그와 요소의 기본 형태
HTML은 여는 태그와 닫는 태그로 콘텐츠를 감싸는 형태로 작성한다. 여는 태그, 콘텐츠, 닫는 태그를 합쳐 하나의 요소(element)라고 부른다.
<p>안녕하세요, HTML입니다.</p>위에서 <p>는 여는 태그, </p>는 닫는 태그이며 그 사이의 텍스트가 콘텐츠다. <img>처럼 닫는 태그가 없는 빈 요소도 있다.
HTML 문서의 기본 구조
모든 HTML 문서는 정해진 뼈대를 갖는다. 문서 종류를 알리는 <!DOCTYPE html> 선언으로 시작해, <html> 안에 <head>와 <body>가 들어간다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 페이지</title>
</head>
<body>
<h1>환영합니다</h1>
<p>첫 번째 HTML 문서입니다.</p>
</body>
</html><head>: 문자 인코딩, 문서 제목, CSS 연결 등 화면에 직접 보이지 않는 정보를 담는다.<body>: 제목, 문단, 이미지처럼 실제 화면에 보이는 콘텐츠를 담는다.
자주 쓰는 주요 태그
| 태그 | 용도 |
|---|---|
| <h1> ~ <h6> | 제목. 숫자가 작을수록 큰 제목이다. |
| <p> | 하나의 문단을 나타낸다. |
| <a> | 다른 페이지로 이동하는 링크. |
| <img> | 이미지를 삽입한다. |
| <ul>, <ol>, <li> | 순서 없는/있는 목록과 그 항목. |
| <div>, <span> | 콘텐츠를 묶는 구역(블록/인라인). |
속성(attribute)으로 정보 추가하기
태그에는 속성을 붙여 추가 정보를 줄 수 있다. 속성은 여는 태그 안에 이름="값" 형태로 작성한다. 예를 들어 링크의 주소는 href 속성에, 이미지의 경로는 src 속성에 적는다.
<a href="https://nuschool.cc">누스쿨 바로가기</a>
<img src="logo.png" alt="누스쿨 로고">이미지의 alt 속성은 이미지를 불러오지 못하거나 화면 낭독기를 사용할 때 대신 표시되는 대체 텍스트로, 접근성과 검색 노출에 중요하므로 항상 작성하는 것이 좋다.
직접 따라 해 보는 실습
특별한 프로그램 없이도 HTML을 바로 만들어 볼 수 있다. 메모장이나 코드 편집기를 열고 아래 내용을 입력한 뒤 index.html이라는 이름으로 저장한다. 그 파일을 브라우저로 열면 결과를 바로 확인할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 실습</title>
</head>
<body>
<h1>HTML 기초</h1>
<p>오늘 배운 태그를 직접 써 봅니다.</p>
<ul>
<li>제목 태그</li>
<li>문단 태그</li>
<li>목록 태그</li>
</ul>
</body>
</html>정리
- HTML은 태그로 웹 문서의 구조와 의미를 표시하는 마크업 언어다.
- 모든 문서는
<!DOCTYPE>선언과<html>·<head>·<body>구조를 갖는다. - 제목·문단·링크·이미지·목록 같은 주요 태그와
href·src·alt같은 속성을 익히면 기본 페이지를 만들 수 있다.
HTML로 구조를 잡았다면, 다음 단계는 CSS로 디자인을 입히는 것이다. 먼저 위 실습 예시를 직접 수정해 보며 각 태그가 화면에 어떻게 나타나는지 눈으로 확인해 보자.
💬 댓글 0