HTML 태그란?
HTML 태그는 웹 페이지의 요소를 정의하고 구성하는 도구입니다. 텍스트, 이미지, 링크, 버튼 등 웹에서 보이는 대부분의 콘텐츠는 HTML 태그로 만들어집니다. 이번 글에서는 가장 기본적인 HTML 태그와 사용법을 예제로 소개합니다.
HTML 기본 태그 소개
1. 텍스트 관련 태그
• <h1> ~ <h6> (제목 태그):
웹 페이지의 제목을 정의할 때 사용합니다. 숫자가 작을수록 중요도가 높은 제목입니다.
<h1>가장 중요한 제목</h1>
<h2>두 번째로 중요한 제목</h2>
<h3>세 번째로 중요한 제목</h3>
• <p> (단락 태그):
단락을 정의할 때 사용합니다.
<p>이것은 단락을 나타내는 태그입니다.</p>
• <br> (줄 바꿈 태그):
줄을 바꾸고 싶을 때 사용합니다.
첫 번째 줄<br>두 번째 줄
2. 링크 태그
• <a> (링크 태그):
다른 페이지나 외부 사이트로 이동하는 링크를 만듭니다.
<a href="https://www.example.com">Example 사이트 방문</a>
• href 속성: 이동할 URL을 지정합니다.
• target="_blank": 새 창에서 링크를 열도록 설정합니다.
3. 이미지 태그
• <img> (이미지 태그):
웹 페이지에 이미지를 삽입합니다.
<img src="example.jpg" alt="예제 이미지" width="300">
• src: 이미지 파일의 경로.
• alt: 이미지를 대체하는 텍스트. SEO와 접근성에 중요합니다.
• width와 height: 이미지 크기 설정.
4. 리스트 태그
• 순서 있는 목록 (<ol>):
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
• 순서 없는 목록 (<ul>):
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
5. 강조 태그
• <strong>와 <em>:
텍스트를 굵게(strong) 또는 기울임(em)으로 강조합니다.
<p>이 문장은 <strong>강조</strong>되고, <em>이 문장은 기울임</em>입니다.</p>
HTML 태그 사용 시 주의사항
1. 시맨틱 태그 사용 권장
• 단순히 스타일을 적용하려면 <div>나 <span>을 남용하지 말고, 의미가 명확한 태그(<header>, <article>)를 사용하세요. 이는 SEO와 접근성에 도움이 됩니다.
2. 태그는 짝을 맞춰야 한다
• <h1>, <p> 같은 태그는 반드시 닫는 태그(</h1>, </p>)가 필요합니다. 예외적으로 <img>와 <br> 같은 태그는 닫지 않아도 됩니다.
3. 속성 관리
• 태그의 속성은 항상 소문자로 작성하며, 큰따옴표로 값을 감싸야 합니다. 예: <a href="url">.
HTML 태그 실습 예제
아래는 기본 HTML 태그를 활용한 간단한 웹 페이지 예제입니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML 기본 태그를 학습할 수 있는 예제 페이지">
<title>HTML 기본 태그 실습</title>
</head>
<body>
<header>
<h1>HTML 태그 배우기</h1>
</header>
<main>
<p>HTML 태그는 웹 페이지의 구조를 정의합니다.</p>
<a href="https://www.example.com" target="_blank">외부 링크 예제</a>
<br>
<img src="example.jpg" alt="HTML 태그 이미지 예제" width="400">
<ul>
<li>순서 없는 목록 1</li>
<li>순서 없는 목록 2</li>
</ul>
<ol>
<li>순서 있는 목록 1</li>
<li>순서 있는 목록 2</li>
</ol>
</main>
<footer>
<p>© 2024 HTML 학습 블로그</p>
</footer>
</body>
</html>
HTML 기본 태그는 모든 웹 페이지의 시작점입니다. 제목, 단락, 이미지, 링크 등 다양한 태그를 적절히 활용하면 효율적인 웹 페이지를 만들 수 있습니다. HTML 학습은 실습을 통해 더 쉽게 익힐 수 있으니, 직접 작성하고 브라우저에서 확인해 보세요.
다음 강의에서는 HTML 레이아웃 태그와 문서 구조를 설계하는 방법을 다룰 예정입니다. 웹 페이지를 구성하는 더 체계적인 방법을 알아보세요!
'HTML' 카테고리의 다른 글
| HTML 멀티미디어 태그 완벽 가이드: 오디오와 비디오를 추가하는 방법 (0) | 2024.12.08 |
|---|---|
| HTML 폼 태그 완벽 가이드: 사용자 입력을 처리하는 방법 (0) | 2024.12.07 |
| HTML 레이아웃 태그 완벽 정리: 웹 페이지 구조의 기본 (0) | 2024.12.06 |
| HTML 문서 구조: 효율적인 웹 페이지의 기초 다지기 (0) | 2024.12.05 |
| HTML이란? 웹 개발의 기초를 배우는 첫걸음 (0) | 2024.12.05 |