HTML 기초 가이드

웹 문서를 작성할 때 꼭 알아야 할 기본 구조와 핵심 태그를 정리했습니다.

1. HTML 기본 구조

<!DOCTYPE html>
<html>
<head>
  <title>문서 제목</title>
  <meta charset="UTF-8">
</head>
<body>
  페이지 내용
</body>
</html>

<!DOCTYPE html>은 HTML5 선언이며,
<html>은 문서 전체를 감쌉니다.
<head>에는 SEO, 언어, 설명 등 보이지 않는 정보를,
<body>에는 화면에 표시될 모든 요소를 넣습니다.

2. 핵심 태그

제목: <h1> ~ <h6>
문단: <p>
줄바꿈: <br>
수평선: <hr>
텍스트 강조: <b>, <strong>, <i>, <mark>

3. 링크와 이미지

링크는 <a href="https://example.com" target="_blank">이동</a>,
이미지는 <img src="이미지.jpg" alt="설명문"> 형식으로 작성합니다.

4. 목록

순서 있는 목록은 <ol>, 순서 없는 목록은 <ul>을 사용합니다.

<ol>
  <li>첫번째</li>
</ol>

<ul>
  <li>항목</li>
</ul>

5. 표

<table>
  <tr>
    <th>제목</th>
    <td>내용</td>
  </tr>
</table>

<tr>은 행, <th>는 헤더 셀, <td>는 데이터 셀을 의미합니다.

6. 입력 Form

<form action="/send" method="post">
  <label>이름</label>
  <input type="text" name="name">
  <label>메시지</label>
  <textarea></textarea>
  <button type="submit">보내기</button>
</form>

자주 쓰는 input 타입: text, email, password, radio, checkbox, number, date, file

7. HTML 속성 Examples

id, class, style, title, src, href, alt 등이 있습니다.

<p id="main" class="text large" title="설명">내용</p>

8. 시맨틱 태그

검색 엔진 최적화와 웹 접근성을 위해 <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>를 적극 활용합니다.

9. 미디어 태그

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

<audio controls>
  <source src="sound.mp3" type="audio/mp3">
</audio>

10. CSS 연결

외부 스타일시트는 <link rel="stylesheet" href="style.css">로 연결합니다.
인라인 스타일은 <p style="color:red">텍스트</p>, 내부 스타일은 <style>...</style>을 사용합니다.

11. JS 연결

<script src="app.js"></script> 또는 <script>console.log("Hello");</script>로 스크립트를 추가합니다.

12. 메타 태그

<meta charset="UTF-8">
<meta name="description" content="페이지 설명">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

13. 블록 요소 vs 인라인 요소

블록 요소는 줄 전체를 차지하며 레이아웃 구성에 활용합니다(div, p, h1 등).
인라인 요소는 텍스트 흐름 안에서 스타일에 쓰입니다(a, img, strong, span 등).

14. iframe

<iframe src="https://example.com"></iframe>

15. 주석

16. 특수문자(Entity)

< → <
> → >
& → &
  → 공백