웹사이트를 구성하는 가장 기본적인 언어인 **HTML(HyperText Markup Language)**는 다양한 태그(tag)를 통해 콘텐츠의 구조를 정의합니다.
웹 페이지에서 글을 작성하거나 이미지를 삽입하고, 버튼을 만들거나 링크를 연결하는 모든 작업은 HTML 태그를 기반으로 이루어집니다.
이번 글에서는 HTML에서 자주 사용되는 기본 태그 10가지를 소개하며, 각 태그의 용도와 사용 예제를 함께 정리해드리겠습니다.
비전공자와 초보자도 쉽게 이해할 수 있도록 실습 중심으로 설명하니, 웹 코딩의 기초를 다지는 데 큰 도움이 될 것입니다.
1. <html> – HTML 문서의 시작과 끝을 감싸는 태그
<html> <!-- HTML 문서 내용 --> </html>
- HTML 문서 전체를 감싸는 최상위 태그입니다.
- 웹 브라우저는 이 태그 안의 내용을 기반으로 페이지를 렌더링합니다.
2. <head> – 문서의 정보를 담는 영역
<head> <meta charset="UTF-8"> <title>나의 웹페이지</title> </head>
- 문서의 제목, 문자 인코딩, 외부 파일 링크 등 보이지 않는 정보를 포함합니다.
- SEO(검색 최적화)에도 영향을 주는 중요한 영역입니다.
3. <body> – 실제 화면에 표시되는 콘텐츠 영역
<body> <h1>환영합니다!</h1> <p>이 페이지는 HTML 연습용입니다.</p> </body>
- 사용자가 브라우저에서 직접 볼 수 있는 본문 콘텐츠를 담습니다.
- 텍스트, 이미지, 버튼 등 모든 요소가 이 안에 들어갑니다.
4. <h1>~<h6> – 제목(Heading) 태그
<h1>가장 큰 제목</h1> <h2>부제목</h2> <h3>소제목</h3>
- 숫자가 작을수록 더 중요하고 큰 제목을 의미합니다.
- 콘텐츠의 계층 구조를 나타낼 때 사용하며, 검색엔진 최적화(SEO)에도 중요합니다.
5. <p> – 문단(Paragraph)을 나타내는 태그
<p>이것은 문단입니다. 텍스트 블록을 구분할 때 사용합니다.</p>
- 일반적인 텍스트를 문단 단위로 구분할 때 사용합니다.
- 가독성과 콘텐츠 구조화를 위한 기본 태그입니다.
6. <a> – 하이퍼링크(Anchor) 태그
<a href="https://www.example.com">이동하기</a>
- 다른 페이지나 웹사이트로 이동할 수 있는 링크를 생성합니다.
- href 속성으로 이동할 URL을 지정합니다.
7. <img> – 이미지 삽입 태그
<img src="logo.png" alt="회사 로고">
- 웹페이지에 이미지를 삽입할 때 사용합니다.
- src는 이미지 파일 경로, alt는 이미지가 보이지 않을 때 대체 텍스트입니다.
8. <ul>, <ol>, <li> – 목록(List) 태그
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
- <ul>: 순서 없는 리스트 (점 ●)
- <ol>: 순서 있는 리스트 (숫자 1. 2. 3.)
- <li>: 리스트 항목
목록 정리 시 매우 자주 사용됩니다.
9. <div> – 구획을 나누는 태그
<div> <h2>소개</h2> <p>이 영역은 프로필 소개입니다.</p> </div>
- 웹페이지를 영역별로 구분하는 데 사용됩니다.
- 디자인, 레이아웃 구성, 스타일 적용 시 필수적인 태그입니다.
10. <br> – 줄바꿈(Break) 태그
<p>줄바꿈이 필요할 때<br>이 태그를 사용합니다.</p>
- 문장 중간에 강제로 줄을 바꿀 때 사용합니다.
- 닫는 태그 없이 단독으로 사용됩니다.
💡 추가 팁: 태그를 조합하여 구조 만들기
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>나의 첫 웹페이지</title> </head> <body> <h1>자기소개</h1> <p>안녕하세요! 저는 웹 코딩을 배우는 중입니다.</p> <img src="profile.jpg" alt="프로필 사진"> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <a href="https://www.example.com">포트폴리오 보러가기</a> </body> </html>
이처럼 HTML 기본 태그만으로도 콘텐츠가 구조화된 웹페이지를 만들 수 있습니다.
마무리: HTML 기본 태그, 웹 코딩의 첫걸음
HTML은 복잡한 문법이 없는 만큼, 누구나 시작할 수 있는 웹 언어입니다.
특히 이 글에서 소개한 10가지 태그는 웹페이지를 만들 때 가장 자주 사용되며, 실무에서도 기본이 되는 필수 요소입니다.
처음에는 태그가 낯설고 헷갈릴 수 있지만, 한 줄씩 따라 치고 브라우저에서 결과를 확인해보면 금세 익숙해질 수 있습니다.
HTML 태그를 이해하는 것만으로도 웹 개발에 대한 자신감이 생기며, 나아가 CSS와 JavaScript로 확장하는 기반이 됩니다.
오늘 소개한 태그들로 나만의 웹페이지를 만들어보세요.
기초를 다진 그 순간부터, 여러분은 웹 개발의 문을 연 것입니다.