1. 목록 태그
1) 기본 목록 태그 활용 예제
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>돼지 일기</title>
</head>
<body>
<h2>오늘의 메뉴</h2>
<ul>
<li>치킨
<ol>
<li>bhc</li>
<li>네네치킨</li>
<li>BBQ</li>
</ol>
</li><br>
<li>피자
<ol>
<li>임실치즈피자</li>
<li>도미노</li>
</ol>
</li><br>
<li>떡볶이
<ol>
<li>청년다방</li>
<li>걸작 떡볶이</li>
<li>신전 떡볶이</li>
</ol>
</li><br>
<li>햄버거
<ol>
<li>롯데리아</li>
<li>맥도날드</li>
</ol>
</li>
</ul>
</body>
</html>
2) 중첩 목록(Overlapped list) 활용 예제
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML List Tag</title>
</head>
<body>
<h2>Web Front-End Development</h2>
<ul>
<li>HTML5
<ol>
<li>Tag</li>
<li>Attribute</li>
<li>Structure</li>
</ol>
</li>
<li>CSS3
<ol>
<li>Style</li>
<li>Animation</li>
</ol>
</li>
<li>Javascript</li>
</ul>
</body>
</html>
2. 표 태그
1) 예제
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>메뉴 정하기</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>음식</th>
<th>치킨</th>
<th>피자</th>
<th>보쌈</th>
<th>족발</th>
</tr>
</thead>
<tbody>
<tr>
<th>나</th>
<td>좋음</td>
<td colspan="3">별로</td>
</tr>
<tr>
<th>언니</th>
<td colspan="2">좋음</td>
<td colspan="2">별로</td>
</tr>
<tr>
<th rowspan="2">엄마<br>아빠</th>
<td colspan="3">별로</td>
<td>좋음</td>
</tr>
<tr>
<td>?</td>
<td>별로</td>
<td colspan="2">좋음</td>
</tr>
</tbody>
</table>
</body>
</html>
2) 예제
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>English</th>
<th>Math</th>
<th>Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>David</td>
<td>A</td>
<td>C</td>
<td>B</td>
</tr>
<tr>
<td>Herry</td>
<td>B</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>Sera</td>
<td>B</td>
<td>B</td>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>
3. 이미지 태그
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image</title>
</head>
<body>
<img src="라이언.jpg" alt="카카오프렌즈 라이언" width="500">
</body>
</html>
