반응형
HTML 태그 종류와 용도 및 사용 예시
1. 문서 구조 태그
- <html>: HTML 문서 전체를 감싸는 최상위 태그입니다.
<html> </html> - <head>: 문서의 메타 정보 (문서 제목, 스타일 시트 링크 등)를 포함합니다.
<head> <title>HTML 예제</title> </head> - <body>: 실제로 보이는 웹 페이지의 내용을 담는 부분입니다.
<body> <h1>제목입니다</h1> <p>본문 내용입니다.</p> </body>
2. 텍스트 콘텐츠 태그
- <h1> ~ <h6>: 제목을 나타냅니다. 숫자가 작을수록 제목의 크기가 커집니다.
<h1>주제</h1> <h2>소제목</h2> - <p>: 단락을 나타냅니다.
<p>이것은 하나의 단락입니다.</p> - <span>: 특정 텍스트에 스타일을 적용할 때 사용합니다.
<span style="color: blue;">파란색 텍스트</span> - <br>: 줄 바꿈을 합니다.
<p>첫 번째 줄<br>두 번째 줄</p> - <hr>: 수평선을 그립니다.
<hr>
3. 목록 태그
- <ul>: 불렛(원형 마커) 목록을 생성합니다.
<ul> <li>사과</li> <li>바나나</li> <li>딸기</li> </ul> - <ol>: 번호 목록을 생성합니다.
<ol> <li>첫 번째</li> <li>두 번째</li> <li>세 번째</li> </ol> - <dl>: 정의 목록을 생성합니다.
<dl> <dt>HTML</dt> <dd>HyperText Markup Language의 약자입니다.</dd> </dl>
4. 링크 태그
- <a>: 다른 페이지나 웹사이트로 연결하는 링크를 생성합니다.
<a href="https://www.example.com">예시 사이트</a>
5. 이미지 태그
- <img>: 이미지를 삽입합니다.
<img src="image.jpg" alt="이미지 설명">
6. 표 태그
- <table>: 표를 생성합니다.
<table> <tr> <th>이름</th> <th>나이</th> </tr> <tr> <td>홍길동</td> <td>20</td> </tr> </table>
반응형
'HTML&CSS' 카테고리의 다른 글
| [CSS] 4. 속성(Property)과 값(Value) (0) | 2024.09.14 |
|---|---|
| [CSS] 3. 선택자(selector) (0) | 2024.09.13 |
| [CSS] 2. 문법과 규칙 (0) | 2024.09.13 |
| [CSS] 1. CSS 소개 (0) | 2024.09.13 |
| #5 HTML 시맨틱 태그 (0) | 2024.08.25 |
| #4 HTML5의 새로운 기능 (1) | 2024.08.25 |
| #3 HTML 요소와 속성 (0) | 2024.08.25 |
| #2 HTML 문서의 구조 (0) | 2024.08.25 |