[HTML]HTML5 기본 태그

 

1. 글자 태그

1.1 제목 태그

• `h1`부터 `h6`까지 제공되며, 숫자가 작을수록 더 중요한 제목을 의미

<h1>제목글자태그 1</h1>
<h2>제목글자태그 2</h2>

1.2 본문과 줄바꿈 태그

• 단락은 `<p>`, 줄바꿈은 `<br>`, 수평 구분선은 `<hr>`로 작성

<p>이것은 단락입니다.</p>
<br>
<hr>

1.3 앵커(링크) 태그

• a태그는 anchor를 의미하며, href와 함께 사용
• 다른 페이지로 이동할 때 사용하며, 내부 이동 시 `id`와 함께 사용(id 사용 시, #필수)

<a href="https://www.google.com">Google</a>
<a href="#section1">1번 섹션으로 이동</a>
<h2 id="section1">1번 섹션입니다.</h2>

1.4 글자 모양 태그

• 글자 강조 및 모양 변경을 위한 태그들

<b>굵게</b> 
<i>기울임</i> 
<small>작은 글자</small>
<sub>아래첨자</sub> 
<sup>위첨자</sup>
<ins>밑줄</ins> 
<del>취소선</del>

✅ 핵심 요점 정리

항목	내용
제목	`h1`~`h6`
단락·줄바꿈·구분선	`p`,` br`, `hr`
링크	`a` (외부/내부 이동)
글자 모양	`b`,` i`, `small`, `sub`, `sup`, `ins`, `del`

---

2. 목록 태그

태그	설명
`ul`	순서가 없는 목록 생성
`ol`	순서가 있는 목록 생성
`li`	목록 요소 생성

2.1 순서 없는 목록

• `ul`과 `li` 태그로 구성

<ul>
    <li>사과</li>
    <li>바나나</li>
</ul>

2.2 순서 있는 목록

• `ol`과 `li` 태그로 구성

<ol>
    <li>1번 항목</li>
    <li>2번 항목</li>
</ol>

2.3 중첩 목록

• 목록 안에 또 다른 목록을 넣을 수 있음

<ul>
    <li>과일
        <ol>
            <li>사과</li>
            <li>바나나</li>
        </ol>
    </li>
    <li>채소
        <ol>
            <li>상추</li>
            <li>치커리</li>
        </ol>
    </li>
</ul>

 

✅  핵심 요점 정리

항목	내용
순서 없는 목록	ul + li
순서 있는 목록	ol + li
중첩 목록	ul/ol 안에 또 다른 ul/ol

---

3. 표 태그

3.1 기본 표 구성

• `table`, `tr`, `th`, `td`로 구성

태그	설명
`table`	표 삽입
`tr`	표에 행 삽입
`th`	표의 제목 셀 생성
`td`	표의 일반 셀 생성

<table border="1">
    <tr>
        <th>요일</th>
        <th>과목</th>
    </tr>
    <tr>
        <td>월요일</td>
        <td>수학</td>
    </tr>
</table>

3.2 셀 병합

• 가로 병합: `colspan`
• 세로 병합: `rowspan`

<table border="1">
    <tr>
        <th colspan="2">시간표</th>
    </tr>
    <tr>
        <td rowspan="2">오전</td>
        <td>수학</td>
    </tr>
    <tr>
        <td>국어</td>
    </tr>
</table>

 

✅ 핵심 요점 정리

항목	내용
표 구성 태그	`table`, `tr`, `th`, `td`
셀 병합	`colspan`, `rowspan`

---

4. 미디어 태그

4.1 이미지 삽입

• `img` 태그는 닫는 태그 없이 단독 사용

<img src="image.png" alt="설명글" width="300" height="400">
<img src="Nothing" alt="그림이 존재하지 않습니다." width="300" height="400">

4.2 오디오 삽입

• `audio` 태그로 브라우저에서 직접 재생

<!-- 오디오 파일 삽입하기 -->
<audio src="music.mp3" controls></audio>

<!-- 웹 브라우저 제약이 없도록 삽입-->
<audio controls>
    <source src="music.mp3" type="audio/mp3">
    <source src="music.ogg" type="audio/ogg">
</audio>

4.3 비디오 삽입

• `video` 태그로 동영상 표시

<!-- 웹 브라우저 제약이 없도록 삽입-->
<video controls poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="webm">
</video>

 

태그	속성	설명
img 태그 `<img>`	src	이미지의 경로 지정
	alt	이미지가 없을 떄 나오는 글자 지정
	width	이미지의 너비 지정
	heigth	이미지의 높이 지정
audio 태그 `<audio></audio>` video 태그 `<video></video>`	src	음악,  비디오 파일의 경로 지정
	preload	음악,  비디오를 준비 중일 때 데이터를 모두 불러올지 여부 지정
	autoplay	음악,  비디오의 자동 재생 여부 지정
	loop	음악,  비디오의 반복 여부 지정
	controls	음악,  비디오 재생 도구 출력 여부 지정
video 태그 `<video></video>`	width	비디오의 너비 지정
	height	비디오의 높이 지정

 

✅ 핵심 요점 정리

항목	내용
이미지 삽입	img (src, alt 필수)
오디오 삽입	audio + source
비디오 삽입	video + source (poster로 썸네일 지정 가능)

 

---

📎 참고자료

• MDN HTML 태그 목록
• HTML5 웹 프로그래밍 입문 4판 (김성윤 저, 한빛미디어)