이 글은 HTML 태그의 기본적인 구조부터 자주 사용되는 주요 태그들을 기능별로 정리해 누구나 쉽게 이해할 수 있도록 도와드립니다.
웹사이트를 만들 때 가장 기본이 되는 언어가 바로 HTML이죠. 복잡해 보이지만 사실 하나씩 살펴보면 그리 어렵지 않습니다. HTML은 마치 건물을 지을 때 뼈대를 세우는 것과 같아요. 다양한 태그들이 각각의 역할을 맡아 웹페이지라는 건물을 튼튼하게 만들어 줍니다. 이번 글에서는 HTML 태그의 종류를 기능별로 깔끔하게 정리해 드릴게요.
1. HTML 태그란? 🏷️
HTML 태그는 꺾쇠 괄호(<>)로 둘러싸인 키워드로, 웹 브라우저에게 콘텐츠의 의미를 알려주는 역할을 합니다. 대부분의 태그는 시작 태그(예: <p>)와 종료 태그(예: </p>)가 쌍으로 존재하며, 그 사이에 내용이 들어갑니다. 하지만 줄 바꿈을 위한 <br> 태그처럼 혼자 쓰이는 태그도 있습니다.
태그를 사용하면 웹 브라우저가 '이것은 제목이구나!', '이것은 문단이구나!', '이것은 이미지구나!' 하고 이해하게 됩니다. 이처럼 태그는 웹페이지의 뼈대를 만드는 가장 중요한 요소입니다.
태그와 엘리먼트(요소)는 종종 혼용되지만, 엄밀히 말해 태그는 꺾쇠 괄호로 둘러싸인 키워드 자체를 의미하고, 엘리먼트는 시작 태그와 종료 태그, 그리고 그 안의 내용을 모두 포함하는 개념입니다.
2. HTML 문서 구조를 만드는 태그 🏗️
모든 HTML 문서는 특정 구조를 갖추고 있습니다. 웹페이지의 기본 뼈대를 이루는 필수적인 태그들을 먼저 살펴보겠습니다.
- <!DOCTYPE html>: HTML5 문서임을 선언합니다. 태그는 아니지만 반드시 문서 최상단에 위치해야 합니다.
- <html>: HTML 문서의 루트(최상위) 요소를 나타냅니다. 모든 내용은 이 태그 안에 들어갑니다.
- <head>: 웹페이지의 메타데이터를 담는 부분입니다. 웹페이지의 제목, 외부 CSS/JS 파일 연결 등 사용자에겐 보이지 않는 정보를 포함합니다.
- <title>: 브라우저 탭에 표시될 페이지의 제목을 정의합니다. <head> 태그 안에 위치합니다.
- <body>: 웹페이지의 실제 콘텐츠, 즉 사용자에게 보여지는 모든 내용을 담는 부분입니다.
3. 텍스트를 꾸미고 구조화하는 태그 ✏️
웹페이지에서 가장 중요한 건 역시 텍스트 정보겠죠. 다양한 목적에 맞게 텍스트를 구조화하고 스타일을 적용하는 태그들입니다.
- <h1> ~ <h6>: 제목 태그입니다. <h1>이 가장 중요한 제목이며, 숫자가 커질수록 중요도가 낮아집니다.
- <p>: 단락(Paragraph)을 만드는 태그입니다. 한 단락의 텍스트를 묶어줍니다.
- <br>: 줄 바꿈(Break) 태그입니다. 문단 안에서 강제로 줄을 바꿀 때 사용합니다.
- <b>: 단순히 텍스트를 굵게(Bold) 만듭니다.
- <strong>: 텍스트를 굵게 만들면서 중요한 내용임을 강조합니다.
- <i>: 텍스트를 기울임(Italic)꼴로 만듭니다.
- <em>: 텍스트를 기울임꼴로 만들면서 강조(Emphasis)의 의미를 부여합니다.
- <hr>: 가로선(Horizontal Rule)을 삽입하여 주제의 전환을 시각적으로 구분해줍니다.
<b>와 <strong>처럼 시각적으로는 비슷해 보여도 의미가 다른 태그들이 있습니다. 웹 접근성과 SEO를 위해 중요한 내용은 <strong> 태그를 사용하는 것이 좋습니다.
4. 목록과 표를 만드는 태그 📋
정보를 정리하고 나열할 때는 목록과 표가 아주 유용합니다. 복잡한 데이터를 구조적으로 보여줄 수 있죠.
- <ul>: 순서 없는 목록(Unordered List)을 만듭니다. 보통 불릿 기호(•)로 표시됩니다.
- <ol>: 순서 있는 목록(Ordered List)을 만듭니다. 1, 2, 3... 같은 숫자로 표시됩니다.
- <li>: 목록 항목(List Item)을 나타냅니다. <ul>이나 <ol> 태그 안에 사용됩니다.
- <table>: 표를 만드는 최상위 태그입니다.
- <tr>: 표의 행(Table Row)을 정의합니다.
- <td>: 표의 셀(Table Data)을 정의합니다. 일반적인 내용을 담습니다.
- <th>: 표의 제목 셀(Table Header)을 정의합니다. 내용이 굵게 표시됩니다.
5. 링크와 이미지를 삽입하는 태그 🔗🖼️
웹페이지에서 다른 페이지로 이동하거나, 시각적 요소를 추가하는 데 사용되는 태그들입니다.
- <a>: 하이퍼링크(Anchor)를 만듭니다.
href속성을 이용해 연결할 주소를 지정합니다. - <img>: 이미지를 삽입합니다.
src속성으로 이미지 파일의 경로를,alt속성으로 이미지에 대한 설명을 제공합니다.
6. 사용자 입력을 받는 폼 태그 ⌨️
로그인, 회원가입, 검색 등 사용자의 입력을 받기 위한 태그들입니다. 다양한 입력 요소를 포함할 수 있습니다.
- <form>: 사용자 입력을 담는 폼(Form)을 정의합니다.
- <input>: 텍스트 입력, 체크박스, 라디오 버튼 등 다양한 형태의 입력 필드를 만듭니다.
type속성으로 종류를 지정합니다. - <button>: 클릭 가능한 버튼을 만듭니다.
7. 의미를 부여하는 시맨틱 태그 🧠
HTML5에서는 웹페이지의 구조에 의미를 부여하는 '시맨틱(Semantic)' 태그가 중요해졌습니다. 이는 검색 엔진 최적화(SEO)에도 큰 영향을 미칩니다.
- <header>: 페이지나 특정 섹션의 머리글을 정의합니다.
- <nav>: 내비게이션(Navigation) 링크를 담는 영역입니다.
- <main>: 문서의 주요 콘텐츠를 정의합니다. 페이지당 하나만 사용해야 합니다.
- <article>: 독립적으로 배포하거나 재사용할 수 있는 콘텐츠(예: 블로그 포스트, 뉴스 기사)를 정의합니다.
- <section>: 관련된 콘텐츠를 묶어 하나의 논리적인 섹션으로 만듭니다.
- <aside>: 본문 콘텐츠와 관련은 있지만, 독립적인 정보를 담는 영역(예: 사이드바)을 정의합니다.
- <footer>: 페이지나 특정 섹션의 바닥글을 정의합니다.
과거에는 <div> 태그로 모든 구조를 만들었지만, 시맨틱 태그를 사용하면 웹사이트의 의미와 구조를 명확하게 전달할 수 있어 검색 엔진이나 보조 기술(스크린 리더 등)이 콘텐츠를 더 잘 이해하게 됩니다.
8. 핵심 요약 📝
HTML 태그의 종류는 정말 다양하지만, 용도에 따라 크게 7가지 카테고리로 나눌 수 있습니다.
HTML 태그 핵심 정리
자주 묻는 질문 ❓
이렇게 HTML 태그들을 기능별로 살펴보니 훨씬 이해하기 쉽지 않으신가요? 이 글이 웹 개발의 첫걸음을 떼는 데 작은 도움이 되었으면 좋겠습니다. 혹시 더 궁금한 점이 있다면 언제든지 댓글로 남겨주세요! 😊
#HTML태그종류 #HTML기본태그 #웹개발입문 #프론트엔드기초 #HTML5태그 #시맨틱태그 #웹표준 #코딩초보 #HTML요소 #HTML문법
'생활 기타 정보' 카테고리의 다른 글
| 희망리턴패키지는 폐업 소상공인을 위한 든든한 지원책입니다. (8) | 2025.08.29 |
|---|---|
| 내 전세보증금 지키는 법: 전세사기 예방을 위한 완벽한 체크리스트 (5) | 2025.08.28 |
| 트럼프도 감탄한 '그 펜', 알고 보니 제나일 | 모나미 심을 쓴 한국 수제작이었다 (10) | 2025.08.27 |
| 근로장려금 자격조건 완벽 정리! 신청 방법부터 지급일까지 A-Z 가이드 (2) | 2025.08.27 |
| 입찰부터 등기까지, 부동산 경매의 모든 과정 총정리 (4) | 2025.08.27 |