HTML5

작성자

익명

작성일

2026.07.28

조회수

버전

HTML5 시맨틱 마크업 웹 표준 웹 접근성 Web API SEO 크로스 브라우징 초급

HTML5

1. 개요 {#section1}

HTML5는 웹 페이지의 구조를 정의하는 마크업 언어인 HTML(HyperText Markup Language)의 5번째 주요 버전으로, 단순한 문서 구조 정의를 넘어 웹 애플리케이션을 구축하기 위한 다양한 API와 멀티미디어 기능을 통합한 웹 표준 기술이다.

과거 HTML 4.01 버전에서는 정적인 문서 전달에 치중하여, 동적인 콘텐츠나 멀티미디어 재생을 위해 Adobe Flash와 같은 외부 플러그인에 의존해야 했다. 그러나 HTML5는 브라우저 자체에서 멀티미디어를 처리하고, 기기 제어 및 데이터 저장 기능을 제공함으로써 '플러그인 없는 웹(Plugin-free Web)' 환경을 구현하고 웹의 상호작용성을 획기적으로 높였다.

문서 타입 선언 (DOCTYPE)

HTML5에서는 이전 버전의 복잡한 DTD(Document Type Definition) 선언 방식에서 벗어나 매우 간결한 문서 타입 선언을 사용한다.

<!DOCTYPE html>

이 선언은 브라우저에게 현재 문서가 HTML5 표준으로 작성되었음을 알리며, 브라우저가 '쿼크 모드(Quirks Mode)'가 아닌 '표준 모드(Standards Mode)'로 렌더링하도록 강제하여 일관된 화면 표시를 보장한다.

2. 주요 특징 및 새로운 기능 {#section2}

HTML5의 핵심은 웹의 기능 확장과 구조적 의미 부여에 있다. 특히 별도의 플러그인 없이도 오디오와 비디오를 재생할 수 있는 내장 요소가 추가되었으며, 그래픽 구현을 위한 캔버스와 SVG 지원이 강화되었다.

멀티미디어 내장: <audio>와 <video> 태그를 통해 브라우저에서 직접 미디어 파일을 재생할 수 있다.

    <!-- 비디오 재생 예제 -->
    <video src="movie.mp4" controls width="400">
      브라우저가 비디오 태그를 지원하지 않습니다.
    </video>

    <!-- 오디오 재생 예제 -->
    <audio src="music.mp3" controls>
      브라우저가 오디오 태그를 지원하지 않습니다.
    </audio>

그래픽 구현:
- Canvas API: 자바스크립트를 이용해 픽셀 단위의 2D 그래픽을 그리는 영역을 제공한다.
- SVG (Scalable Vector Graphics): 해상도에 관계없이 깨지지 않는 벡터 기반의 그래픽을 지원한다.

HTML4 vs HTML5 주요 변경 사항 비교

구분	HTML 4.01	HTML5
구조 정의	비시맨틱 태그(`<div>`) 위주의 구조	시맨틱 태그(`<header>`, `<nav>` 등) 도입
멀티미디어	Flash, Silverlight 등 외부 플러그인 필요	`<audio>`, `<video>` 태그 내장
그래픽	이미지 파일(JPG, PNG) 위주	`<canvas>`, `<svg>` 지원
데이터 저장	쿠키(Cookie) 위주 (용량 제한적)	로컬/세션 스토리지(Web Storage) 도입
문서 선언	길고 복잡한 DTD 선언	`<!DOCTYPE html>`로 간소화

3. 시맨틱 구조 (Semantic Markup)

시맨틱 마크업(Semantic Markup)이란 태그 자체가 의미를 가지고 있어, 브라우저와 개발자, 그리고 검색 엔진이 해당 콘텐츠의 역할을 쉽게 이해할 수 있도록 작성하는 것을 말한다.

주요 시맨틱 태그

<header>: 문서나 섹션의 도입부, 로고, 메뉴 등을 포함한다.
<nav>: 페이지 내의 주요 내비게이션 링크 모음을 정의한다.
<main>: 문서의 핵심이 되는 본문 내용을 담으며, 페이지당 한 번만 사용한다.
<article>: 독립적으로 배포하거나 재사용할 수 있는 완전한 콘텐츠(예: 블로그 포스트, 뉴스 기사)를 정의한다.
<section>: 문서의 일반적인 구획을 나누는 논리적 그룹을 정의한다.
<footer>: 문서나 섹션의 하단 정보(저작권, 연락처 등)를 포함한다.

SEO 및 웹 접근성 영향

시맨틱 태그를 사용하면 검색 엔진(Google, Naver 등)의 크롤러가 페이지의 구조를 정확히 파악하여 SEO(검색 엔진 최적화) 성능이 향상된다. 또한, 스크린 리더와 같은 보조 공학 기기가 페이지의 랜드마크를 인식하여 시각 장애인이 콘텐츠를 더 효율적으로 탐색할 수 있게 한다.

시맨틱 레이아웃 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>시맨틱 구조 예제</title>
</head>
<body>
    <header>
        <h1>웹 기술 위키</h1>
        <nav>
            <ul>
                <li><a href="#section1">개요</a></li>
                <li><a href="#section2">특징</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>HTML5의 발전</h2>
            <p>HTML5는 웹 표준의 새로운 지평을 열었습니다.</p>
            <section>
                <h3>시맨틱 태그의 이점</h3>
                <p>구조적 의미를 부여하여 접근성을 높입니다.</p>
            </section>
        </article>
    </main>

    <footer>
        <p>&copy; 2024 Wiki AI Assistant. All rights reserved.</p>
    </footer>
</body>
</html>

4. 새로운 API 및 기능

HTML5는 단순한 마크업을 넘어 브라우저가 운영체제 수준의 기능을 사용할 수 있도록 다양한 API를 제공한다.

웹 스토리지 (Web Storage): 서버를 거치지 않고 브라우저에 데이터를 저장하는 방식으로, 쿠키보다 훨씬 큰 용량을 제공한다.
- LocalStorage: 브라우저를 닫아도 데이터가 유지되는 영구 저장소이다.
- SessionStorage: 탭이나 윈도우를 닫으면 데이터가 삭제되는 임시 저장소이다.
지오로케이션 (Geolocation API): 사용자의 동의 하에 현재 위도와 경도 정보를 가져와 위치 기반 서비스를 구현할 수 있게 한다.
웹 워커 (Web Workers): 자바스크립트의 싱글 스레드 한계를 극복하여, 백그라운드에서 무거운 연산을 처리함으로써 UI 멈춤 현상을 방지한다.
드래그 앤 드롭 (Drag and Drop API): 요소들을 마우스로 끌어서 이동시키는 인터랙션을 표준화된 방식으로 구현한다.
웹 소켓 (WebSocket API): 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 하여 채팅이나 실시간 알림 구현에 사용된다.

5. 폼(Form) 개선 및 입력 타입

HTML5에서는 사용자 입력의 편의성을 높이고, 서버로 데이터를 보내기 전 브라우저 단에서 1차 검증을 수행하는 기능이 대폭 강화되었다.

새로운 input 타입 및 속성

입력 타입 확장: 데이터 성격에 맞는 타입을 지정하면 모바일 기기에서 최적화된 키패드가 나타나며, 자동 유효성 검사가 이루어진다.
유효성 검사 속성:
- required: 필수 입력 항목으로 지정한다.
- placeholder: 입력란에 힌트 텍스트를 표시한다.
- pattern: 정규 표현식을 통해 입력 형식을 제한한다.

신규 input 타입 정리

타입	용도	특징
`email`	이메일 주소 입력	`@` 포함 여부 등 기본 형식 검사 수행
`date`	날짜 선택	브라우저 내장 캘린더 UI 제공
`number`	숫자 입력	숫자 전용 키패드 제공 및 `min`, `max` 설정 가능
`range`	범위 선택	슬라이더 바 형태의 입력 컨트롤 제공
`tel`	전화번호 입력	모바일 기기에서 숫자 키패드 활성화
`url`	웹 주소 입력	`http://` 등의 프로토콜 형식 검사 수행

6. 웹 접근성(A11y) 준수 가이드

웹 접근성(Web Accessibility, A11y)이란 장애인, 고령자 등 모든 사용자가 웹 사이트의 정보를 동등하게 이용할 수 있도록 보장하는 것이다. HTML5는 이를 위해 다음과 같은 가이드를 권장한다.

대체 텍스트 제공: <img> 태그 사용 시 alt 속성을 반드시 작성하여 이미지의 의미를 텍스트로 전달해야 한다.
명확한 레이블링: <input> 요소에는 반드시 <label> 태그를 연결하여 입력란의 목적을 명시해야 한다.
키보드 접근성 보장: 모든 인터랙티브 요소(버튼, 링크 등)는 탭(Tab) 키로 접근 가능해야 하며, 포커스 상태가 시각적으로 표시되어야 한다.
ARIA(Accessible Rich Internet Applications) 활용: HTML 태그만으로 의미 전달이 부족한 복잡한 UI(예: 탭 메뉴, 모달창)의 경우 role이나 aria-label 속성을 사용하여 보조 공학 기기에 추가 정보를 제공한다.

7. 웹 표준과 호환성

표준화 과정: W3C와 WHATWG

초기 HTML 표준은 W3C(World Wide Web Consortium)가 주도했으나, 실제 브라우저 구현체들의 빠른 변화를 반영하기 위해 WHATWG(Web Hypertext Application Technology Working Group)가 결성되었다. 두 단체는 갈등과 협력을 반복하다가, 현재는 WHATWG가 HTML 표준을 유지 관리하고 W3C가 이를 승인하는 체계로 통합되었다.

HTML Living Standard

현재 HTML은 특정 버전(예: HTML 5.1, 5.2)으로 끊어서 발표하는 방식이 아니라, 지속적으로 업데이트되는 HTML Living Standard 체제로 운영된다. 즉, "HTML5"라는 명칭은 하나의 상징적인 세대를 의미하며, 실제로는 끊임없이 진화하는 단일 표준 문서에 의해 정의된다.

브라우저 호환성

HTML5의 핵심 기능들은 현대의 모든 주요 브라우저에서 광범위하게 지원된다.

기능	Chrome	Firefox	Safari	Edge
시맨틱 태그	지원	지원	지원	지원
`<audio>`, `<video>`	지원	지원	지원	지원
Canvas / SVG	지원	지원	지원	지원
Web Storage	지원	지원	지원	지원
WebSocket	지원	지원	지원	지원

크로스 브라우징과 폴리필(Polyfill)

크로스 브라우징(Cross-browsing): 서로 다른 브라우저(Chrome, Safari, Firefox, Edge 등)에서 웹 페이지가 동일하게 작동하고 보이도록 최적화하는 작업이다.
폴리필(Polyfill): 최신 HTML5 기능이나 API를 지원하지 않는 구형 브라우저에서, 자바스크립트를 이용해 해당 기능을 흉내 내어 구현함으로써 호환성을 확보하는 코드를 의미한다.

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# HTML5

## 1. 개요 {#section1}
**HTML5**는 웹 페이지의 구조를 정의하는 마크업 언어인 HTML(HyperText Markup Language)의 5번째 주요 버전으로, 단순한 문서 구조 정의를 넘어 웹 애플리케이션을 구축하기 위한 다양한 API와 멀티미디어 기능을 통합한 웹 표준 기술이다.

과거 HTML 4.01 버전에서는 정적인 문서 전달에 치중하여, 동적인 콘텐츠나 멀티미디어 재생을 위해 Adobe Flash와 같은 외부 플러그인에 의존해야 했다. 그러나 HTML5는 브라우저 자체에서 멀티미디어를 처리하고, 기기 제어 및 데이터 저장 기능을 제공함으로써 '플러그인 없는 웹(Plugin-free Web)' 환경을 구현하고 웹의 상호작용성을 획기적으로 높였다.

### 문서 타입 선언 (DOCTYPE)
HTML5에서는 이전 버전의 복잡한 DTD(Document Type Definition) 선언 방식에서 벗어나 매우 간결한 문서 타입 선언을 사용한다.

```html
<!DOCTYPE html>
```
이 선언은 브라우저에게 현재 문서가 HTML5 표준으로 작성되었음을 알리며, 브라우저가 '쿼크 모드(Quirks Mode)'가 아닌 '표준 모드(Standards Mode)'로 렌더링하도록 강제하여 일관된 화면 표시를 보장한다.

---

## 2. 주요 특징 및 새로운 기능 {#section2}
HTML5의 핵심은 웹의 기능 확장과 구조적 의미 부여에 있다. 특히 별도의 플러그인 없이도 오디오와 비디오를 재생할 수 있는 내장 요소가 추가되었으며, 그래픽 구현을 위한 캔버스와 SVG 지원이 강화되었다.

*   **멀티미디어 내장**: `<audio>`와 `<video>` 태그를 통해 브라우저에서 직접 미디어 파일을 재생할 수 있다.
    ```html
    <!-- 비디오 재생 예제 -->
    <video src="movie.mp4" controls width="400">
      브라우저가 비디오 태그를 지원하지 않습니다.
    </video>

    <!-- 오디오 재생 예제 -->
    <audio src="music.mp3" controls>
      브라우저가 오디오 태그를 지원하지 않습니다.
    </audio>
    ```
*   **그래픽 구현**: 
    *   **Canvas API**: 자바스크립트를 이용해 픽셀 단위의 2D 그래픽을 그리는 영역을 제공한다.
    *   **SVG (Scalable Vector Graphics)**: 해상도에 관계없이 깨지지 않는 벡터 기반의 그래픽을 지원한다.

### HTML4 vs HTML5 주요 변경 사항 비교

| 구분 | HTML 4.01 | HTML5 |
| :--- | :--- | :--- |
| **구조 정의** | 비시맨틱 태그(`<div>`) 위주의 구조 | 시맨틱 태그(`<header>`, `<nav>` 등) 도입 |
| **멀티미디어** | Flash, Silverlight 등 외부 플러그인 필요 | `<audio>`, `<video>` 태그 내장 |
| **그래픽** | 이미지 파일(JPG, PNG) 위주 | `<canvas>`, `<svg>` 지원 |
| **데이터 저장** | 쿠키(Cookie) 위주 (용량 제한적) | 로컬/세션 스토리지(Web Storage) 도입 |
| **문서 선언** | 길고 복잡한 DTD 선언 | `<!DOCTYPE html>`로 간소화 |

---

## 3. 시맨틱 구조 (Semantic Markup)
**시맨틱 마크업(Semantic Markup)**이란 태그 자체가 의미를 가지고 있어, 브라우저와 개발자, 그리고 검색 엔진이 해당 콘텐츠의 역할을 쉽게 이해할 수 있도록 작성하는 것을 말한다.

### 주요 시맨틱 태그
*   `<header>`: 문서나 섹션의 도입부, 로고, 메뉴 등을 포함한다.
*   `<nav>`: 페이지 내의 주요 내비게이션 링크 모음을 정의한다.
*   `<main>`: 문서의 핵심이 되는 본문 내용을 담으며, 페이지당 한 번만 사용한다.
*   `<article>`: 독립적으로 배포하거나 재사용할 수 있는 완전한 콘텐츠(예: 블로그 포스트, 뉴스 기사)를 정의한다.
*   `<section>`: 문서의 일반적인 구획을 나누는 논리적 그룹을 정의한다.
*   `<footer>`: 문서나 섹션의 하단 정보(저작권, 연락처 등)를 포함한다.

### SEO 및 웹 접근성 영향
시맨틱 태그를 사용하면 검색 엔진(Google, Naver 등)의 크롤러가 페이지의 구조를 정확히 파악하여 **SEO(검색 엔진 최적화)** 성능이 향상된다. 또한, 스크린 리더와 같은 보조 공학 기기가 페이지의 랜드마크를 인식하여 시각 장애인이 콘텐츠를 더 효율적으로 탐색할 수 있게 한다.

### 시맨틱 레이아웃 예제
```html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>시맨틱 구조 예제</title>
</head>
<body>
    <header>
        <h1>웹 기술 위키</h1>
        <nav>
            <ul>
                <li><a href="#section1">개요</a></li>
                <li><a href="#section2">특징</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>HTML5의 발전</h2>
            <p>HTML5는 웹 표준의 새로운 지평을 열었습니다.</p>
            <section>
                <h3>시맨틱 태그의 이점</h3>
                <p>구조적 의미를 부여하여 접근성을 높입니다.</p>
            </section>
        </article>
    </main>

    <footer>
        <p>&copy; 2024 Wiki AI Assistant. All rights reserved.</p>
    </footer>
</body>
</html>
```

---

## 4. 새로운 API 및 기능
HTML5는 단순한 마크업을 넘어 브라우저가 운영체제 수준의 기능을 사용할 수 있도록 다양한 API를 제공한다.

*   **웹 스토리지 (Web Storage)**: 서버를 거치지 않고 브라우저에 데이터를 저장하는 방식으로, 쿠키보다 훨씬 큰 용량을 제공한다.
    *   **LocalStorage**: 브라우저를 닫아도 데이터가 유지되는 영구 저장소이다.
    *   **SessionStorage**: 탭이나 윈도우를 닫으면 데이터가 삭제되는 임시 저장소이다.
*   **지오로케이션 (Geolocation API)**: 사용자의 동의 하에 현재 위도와 경도 정보를 가져와 위치 기반 서비스를 구현할 수 있게 한다.
*   **웹 워커 (Web Workers)**: 자바스크립트의 싱글 스레드 한계를 극복하여, 백그라운드에서 무거운 연산을 처리함으로써 UI 멈춤 현상을 방지한다.
*   **드래그 앤 드롭 (Drag and Drop API)**: 요소들을 마우스로 끌어서 이동시키는 인터랙션을 표준화된 방식으로 구현한다.
*   **웹 소켓 (WebSocket API)**: 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 하여 채팅이나 실시간 알림 구현에 사용된다.

---

## 5. 폼(Form) 개선 및 입력 타입
HTML5에서는 사용자 입력의 편의성을 높이고, 서버로 데이터를 보내기 전 브라우저 단에서 1차 검증을 수행하는 기능이 대폭 강화되었다.

### 새로운 input 타입 및 속성
*   **입력 타입 확장**: 데이터 성격에 맞는 타입을 지정하면 모바일 기기에서 최적화된 키패드가 나타나며, 자동 유효성 검사가 이루어진다.
*   **유효성 검사 속성**:
    *   `required`: 필수 입력 항목으로 지정한다.
    *   `placeholder`: 입력란에 힌트 텍스트를 표시한다.
    *   `pattern`: 정규 표현식을 통해 입력 형식을 제한한다.

### 신규 input 타입 정리

| 타입 | 용도 | 특징 |
| :--- | :--- | :--- |
| `email` | 이메일 주소 입력 | `@` 포함 여부 등 기본 형식 검사 수행 |
| `date` | 날짜 선택 | 브라우저 내장 캘린더 UI 제공 |
| `number` | 숫자 입력 | 숫자 전용 키패드 제공 및 `min`, `max` 설정 가능 |
| `range` | 범위 선택 | 슬라이더 바 형태의 입력 컨트롤 제공 |
| `tel` | 전화번호 입력 | 모바일 기기에서 숫자 키패드 활성화 |
| `url` | 웹 주소 입력 | `http://` 등의 프로토콜 형식 검사 수행 |

---

## 6. 웹 접근성(A11y) 준수 가이드
**웹 접근성(Web Accessibility, A11y)**이란 장애인, 고령자 등 모든 사용자가 웹 사이트의 정보를 동등하게 이용할 수 있도록 보장하는 것이다. HTML5는 이를 위해 다음과 같은 가이드를 권장한다.

1.  **대체 텍스트 제공**: `<img>` 태그 사용 시 `alt` 속성을 반드시 작성하여 이미지의 의미를 텍스트로 전달해야 한다.
2.  **명확한 레이블링**: `<input>` 요소에는 반드시 `<label>` 태그를 연결하여 입력란의 목적을 명시해야 한다.
3.  **키보드 접근성 보장**: 모든 인터랙티브 요소(버튼, 링크 등)는 탭(Tab) 키로 접근 가능해야 하며, 포커스 상태가 시각적으로 표시되어야 한다.
4.  **ARIA(Accessible Rich Internet Applications) 활용**: HTML 태그만으로 의미 전달이 부족한 복잡한 UI(예: 탭 메뉴, 모달창)의 경우 `role`이나 `aria-label` 속성을 사용하여 보조 공학 기기에 추가 정보를 제공한다.

---

## 7. 웹 표준과 호환성

### 표준화 과정: W3C와 WHATWG
초기 HTML 표준은 **W3C(World Wide Web Consortium)**가 주도했으나, 실제 브라우저 구현체들의 빠른 변화를 반영하기 위해 **WHATWG(Web Hypertext Application Technology Working Group)**가 결성되었다. 두 단체는 갈등과 협력을 반복하다가, 현재는 WHATWG가 HTML 표준을 유지 관리하고 W3C가 이를 승인하는 체계로 통합되었다.

### HTML Living Standard
현재 HTML은 특정 버전(예: HTML 5.1, 5.2)으로 끊어서 발표하는 방식이 아니라, 지속적으로 업데이트되는 **HTML Living Standard** 체제로 운영된다. 즉, "HTML5"라는 명칭은 하나의 상징적인 세대를 의미하며, 실제로는 끊임없이 진화하는 단일 표준 문서에 의해 정의된다.

### 브라우저 호환성
HTML5의 핵심 기능들은 현대의 모든 주요 브라우저에서 광범위하게 지원된다.

| 기능 | Chrome | Firefox | Safari | Edge |
| :--- | :---: | :---: | :---: | :---: |
| 시맨틱 태그 | 지원 | 지원 | 지원 | 지원 |
| `<audio>`, `<video>` | 지원 | 지원 | 지원 | 지원 |
| Canvas / SVG | 지원 | 지원 | 지원 | 지원 |
| Web Storage | 지원 | 지원 | 지원 | 지원 |
| WebSocket | 지원 | 지원 | 지원 | 지원 |

### 크로스 브라우징과 폴리필(Polyfill)
*   **크로스 브라우징(Cross-browsing)**: 서로 다른 브라우저(Chrome, Safari, Firefox, Edge 등)에서 웹 페이지가 동일하게 작동하고 보이도록 최적화하는 작업이다.
*   **폴리필(Polyfill)**: 최신 HTML5 기능이나 API를 지원하지 않는 구형 브라우저에서, 자바스크립트를 이용해 해당 기능을 흉내 내어 구현함으로써 호환성을 확보하는 코드를 의미한다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나

HTML5

HTML5

1. 개요 {#section1}

문서 타입 선언 (DOCTYPE)

2. 주요 특징 및 새로운 기능 {#section2}

HTML4 vs HTML5 주요 변경 사항 비교

3. 시맨틱 구조 (Semantic Markup)

주요 시맨틱 태그

SEO 및 웹 접근성 영향

시맨틱 레이아웃 예제

4. 새로운 API 및 기능

5. 폼(Form) 개선 및 입력 타입

새로운 input 타입 및 속성

신규 input 타입 정리

6. 웹 접근성(A11y) 준수 가이드

7. 웹 표준과 호환성

표준화 과정: W3C와 WHATWG

HTML Living Standard

브라우저 호환성

크로스 브라우징과 폴리필(Polyfill)

📝 마크다운 원본

🤔 AI의 사고 과정

이 AI 생성 콘텐츠가 도움이 되었나요?