HTML

HTML(Hypertext Markup Language)은 웹 페이지의 구조를 정의하는 표준 마크업 언어
웹 브라우저에 콘텐츠를 표시하기 위한 구조를 제공하고, 하이퍼텍스트를 사용하여 문서 간 연결을 가능하게 한다.

주요 기능

특징

기본 구조

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!DOCTYPE html>
<html lang="ko">
<head>
    <!-- 메타 정보: 문서에 대한 정보를 포함 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹 페이지 제목</title>
</head>
<body>
    <!-- 실제 콘텐츠가 들어가는 부분 -->
    <h1>안녕하세요!</h1>
    <p>이것은 단락입니다.</p>
</body>
</html>

요소와 태그

1

<태그이름 속성="값">내용</태그이름>

주요 HTML 요소

  1. 텍스트 관련 요소:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    <!-- 제목 태그 -->
<h1>가장 큰 제목</h1>
<h2>두 번째 큰 제목</h2>
<h3>세 번째 큰 제목</h3>

<!-- 단락 -->
<p>이것은 단락입니다. 텍스트를 포함합니다.</p>

<!-- 텍스트 강조 -->
<strong>굵은 글씨</strong>
<em>기울임 글씨</em>

  2. 목록 요소:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

    <!-- 순서 없는 목록 -->
<ul>
    <li>항목 1</li>
    <li>항목 2</li>
</ul>

<!-- 순서 있는 목록 -->
<ol>
    <li>첫 번째</li>
    <li>두 번째</li>
</ol>

<!-- 정의 목록 -->
<dl>
    <dt>용어</dt>
    <dd>용어에 대한 설명</dd>
</dl>

  3. 링크와 이미지:

    1
2
3
4
5

    <!-- 링크 -->
<a href="https://example.com">웹사이트로 이동</a>

<!-- 이미지 -->
<img src="image.jpg" alt="이미지 설명">

  4. 구조적 요소:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

    <!-- 헤더 영역 -->
<header>
    <nav>
        <!-- 네비게이션 메뉴 -->
    </nav>
</header>

<!-- 메인 콘텐츠 -->
<main>
    <article>
        <!-- 독립적인 콘텐츠 영역 -->
    </article>
    <aside>
        <!-- 사이드바 -->
    </aside>
</main>

<!-- 푸터 영역 -->
<footer>
    <!-- 페이지 하단 정보 -->
</footer>

  5. 폼 요소:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

    <form action="/submit" method="POST">
    <!-- 텍스트 입력 -->
    <input type="text" name="username">

    <!-- 비밀번호 입력 -->
    <input type="password" name="password">

    <!-- 체크박스 -->
    <input type="checkbox" name="agree">

    <!-- 라디오 버튼 -->
    <input type="radio" name="gender">

    <!-- 드롭다운 -->
    <select name="country">
        <option value="kr">한국</option>
        <option value="jp">일본</option>
    </select>

    <!-- 제출 버튼 -->
    <button type="submit">제출</button>
</form>

  6. 테이블:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    <table>
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>홍길동</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

HTML5의 주요 특징과 개선사항

  1. 시맨틱 요소:

    • header, nav, main, article, section, aside, footer 등
    • 문서의 구조를 더 명확하게 표현
    • 검색엔진 최적화(SEO)에 도움

  2. 멀티미디어 지원:

    1
2
3
4
5
6
7
8
9

    <!-- 비디오 -->
<video src="video.mp4" controls>
    <source src="video.mp4" type="video/mp4">
</video>

<!-- 오디오 -->
<audio src="audio.mp3" controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

  3. 폼 개선:

    1
2
3
4
5
6
7
8

    <!-- 이메일 입력 -->
<input type="email" name="email">

<!-- 날짜 선택 -->
<input type="date" name="birthdate">

<!-- 숫자 입력 -->
<input type="number" name="quantity">

  4. 캔버스와 SVG:

    1
2
3
4
5
6
7

    <!-- 캔버스 -->
<canvas id="myCanvas" width="200" height="200"></canvas>

<!-- SVG -->
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" fill="red" />
</svg>

HTML 작성 시 주의사항과 모범 사례

  1. 접근성 고려:

    1
2
3
4
5

    <!-- 이미지에 대체 텍스트 제공 -->
<img src="logo.png" alt="회사 로고">

<!-- ARIA 레이블 사용 -->
<button aria-label="메뉴 열기">☰</button>

  2. 메타 태그 최적화:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    <head>
    <!-- 문자 인코딩 -->
    <meta charset="UTF-8">

    <!-- 뷰포트 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO 메타 태그 -->
    <meta name="description" content="페이지 설명">
    <meta name="keywords" content="키워드1, 키워드2">
</head>

  3. 구조화와 들여쓰기:

    • 적절한 들여쓰기로 코드 가독성 향상
    • 논리적인 요소 구조화
    • 주석을 통한 코드 설명

  4. 크로스 브라우징 고려:

    • 표준 HTML 사용
    • 폴백(fallback) 콘텐츠 제공
    • 브라우저 호환성 테스트

참고 및 출처