네이게이션 건너뛰기
codingEverybody
  • HTML
  • CSS
  • JavaScript
  • PHP
  • HTML 소개
  • HTML 태그
  • HTML 속성
  • 유용한 활용 팁
HTML
  • HTML 소개
  • <!DOCTYPE html>
    선언의 올바른 의미
  • HTML 주석
    올바른 이해와 사용 방법
HTML 태그
  • HTML 태그 소개
  • <a>
  • <abbr>
  • <address>
  • <article>
  • <aside>
  • <audio>
  • <b>
  • <base>
  • <bdi>
  • <bdo>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <cite>
  • <code>
  • <datalist>
  • <del>
  • <details>
  • <summary>
  • <dfn>
  • <div>
  • <dl>
  • <dt>
  • <dd>
  • <em>
  • <fieldset>
  • <legend>
  • <figure>
  • <figcaption>
  • <footer>
  • <form>
  • <h1>~<h6>
  • <head>
  • <header>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <li>
  • <link>
  • <main>
  • <map>
  • <area>
  • <mark>
  • <menu>
  • <meta>
  • <meter>
  • <nav>
  • <noscript>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <picture>, <source>
  • <pre>
  • <progress>
  • <q>
  • <ruby>, <rt>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <small>
  • <span>
  • <strong>
  • <style>
  • <sub>
  • <sup>
  • <table>
  • <caption>
  • <tr>
  • <td>
  • <th>
  • <thead>
  • <tbody>
  • <tfoot>
  • <col>
  • <colgroup>
  • <template>
  • <textarea>
  • <time>
  • <title>
  • <u>
  • <ul>
  • <var>
  • <video>
  • <wbr>
HTML 속성
  • HTML 속성 소개
  • button 태그의 type
    버튼의 컨트롤 유형을 지정
  • <button type="button">
  • <button type="reset">
  • <button type="submit">
  • cite
    인용문이나 변경 내용의 출처를 가리키는 URL
  • class
    하나 이상의 클래스 이름을 지정
  • contenteditable
    에디터 개발을 위해 알아야 할 필수 속성
  • crossorigin
    외부 출처 리소스와의 상호작용 허용 방식을 지정
  • data-*
    표준 사용자 지정 데이터 속성
  • datetime
    해당 요소와 관련된 시간 및 날짜 정보
  • dir
    언어의 특성에 맞게 읽고 쓰는 텍스트의 방향을 지정
  • enterkeyhint
    가상 키보드의 Enter 버튼 모양 설정
  • hidden
    숨겨진 요소임을 나타내는 속성
  • href
    링크된 리소스의 URL을 지정
  • id
    웹 페이지 내에서 유일한 고유식별자 설정
  • img 태그의 alt
    이미지의 대체 텍스트를 지정
  • img 태그의 srcset, sizes
    <img>로 반응형 이미지 구현하기
  • input 태그의 type
    다양한 입력 컨트롤 유형을 지정
  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • inputmode
    가상 키보드의 입력 모드 설정
  • lang
    기본 언어를 지정
  • placeholder
    텍스트 박스에 플레이스홀더 텍스트 지정하기
  • rel
    링크된 리소스와 현재 문서 사이의 관계를 지정
  • <link rel="prefetch">
    다음에 사용될 리소스를 미리 로딩하여 캐시로 저장
  • <link rel="dns-prefetch">
    링크된 외부 도메인의 DNS 조회를 미리 수행
  • <link rel="preconnect">
    링크된 외부 도메인을 미리 연결
  • <link rel="preload">
    리소스를 우선순위로 즉시 다운로드하기
  • role
    웹 콘텐츠 접근성을 개선하는 강력한 도구
  • style
    요소에 직접 CSS 스타일하기
  • tabindex
    요소의 키보드 tab 포커스 탐색 제어하기
  • th 태그의 scope
    향상된 테이블 헤더 구조의 접근성 제공
  • title
    요소에 대한 지침 또는 설명 등의 참고 정보
HTML 유용한 활용 팁
  • HTML 유용한 활용 팁 소개
  • 오픈 그래프 프로토콜
    웹 페이지의 소셜 미디어 공유 미리보기 설정
  • 특수 문자 사용법과 의의
    예약된 문자와의 충돌을 피하며 웹 콘텐츠 작성하기
  • 웹 페이지에서 이모지(이모티콘) 사용하기
    웹 페이지에 이모지 삽입하는 방법
  • <video> 태그 자동 재생 완벽 가이드
    자동 재생 안 됨 해결

HTML <!DOCTYPE html> 선언의 올바른 의미

HTML 다음

<!DOCTYPE html> 선언의 역할

<!DOCTYPE html> 선언은
브라우저가 쿼크 모드(Quirks Mode)가 아닌 표준 모드(Standards Mode)로 렌더링하도록 하기 위해 사용됩니다.

이 선언의 유일한 목적은 브라우저가 최신 웹 표준 사양을 준수하며 올바르게 렌더링하도록 하는 것입니다.

HTML에서 <!DOCTYPE html>은 필수적인 전문(preamble)입니다.
<!DOCTYPE html>은 과거( legacy)의 이유로 필요합니다. 생략되면, 브라우저는 일부 사양과 호환되지 않는 다른 렌더링 모드를 사용하기가 일반적입니다. HTML 문서 최상단에 <!DOCTYPE html>를 포함하면 브라우저가 관련 사양을 최선의 노력으로 준수하려고 시도하는 것을 보장합니다.

브라우저는 현대적인 최신의 웹 표준 사양을 지원하지만, 과거에 사용하던 여러 사양의 이전 버전의 렌더링 방식을 함께 지원합니다.
현대적인 최신의 웹 표준 사양은 과거에 사용하던 방식과는 다른 작동원리가 많습니다. 웹은 매우 발달했고, 현재 진행형이기도 합니다. 과거의 버전들은 현대 웹 표준과 호환되지 않을 수 있습니다.

<!DOCTYPE html> 선언을 포함시키면, 브라우저는 관련 스펙(specifications)을 최선의 노력으로 따르려고 시도(makes a best-effort attempt)합니다. 이를 일반적으로 표준 모드(Standards Mode)라 말합니다.

<!DOCTYPE html> 선언을 생략하면 브라우저는 쿼크 모드(Quirks Mode)로 렌더링하는 경향이 있습니다. 이는 이전 스펙(specifications)과의 호환성을 유지하기 위한 것입니다. 그러나 이 모드는 일부 스펙과 호환되지 않을 수 있으며, 이는 심각한 문제를 초래할 수 있습니다.

<!DOCTYPE html> 선언은 브라우저가 최신 버전의 웹 표준 사양을 준수하고 올바르게 렌더링하도록 선언하는 역할을 합니다. 이 선언을 문서의 최상단에 포함시키면, 브라우저는 해당 문서를 최신 웹 표준에 맞춰 처리하려고 노력합니다.

<!DOCTYPE html> 선언의 잘못된 편견

HTML 버전이 무엇인지를 브라우저에 알려주는 역할을 한다?

이는 잘못된 편견에서 생기는 오해입니다.
<!DOCTYPE html> 선언은 브라우저에게 최신 버전의 웹 표준 사양을 준수하고 올바르게 렌더링하도록 선언하는 역할을 하는 것으로 버전 정보를 제공하지 않습니다. 아마도 최신의 HTML 버전인 HTML5를 사용하고 있기 때문에 생긴 오해라고 생각됩니다. <!DOCTYPE html> 선언은 HTML뿐만 아니라 CSS에도 영향을 줍니다.

<!DOCTYPE html>은 HTML 태그이다?

<!DOCTYPE html>은 HTML 태그가 아닙니다.
선언문입니다. HTML이 시작하기 이전에 선언하는 선언문입니다. 명세서에서는 대소문자를 구분하지 않는다고 말하고 있습니다.

<!DOCTYPE html>을 선언하면 과거에 사용하던 여러 사양의 이전 버전과 호환된다?

아닙니다. 과거에 사용하던 여러 사양의 이전 버전과 호환되지 않습니다.
원하는 과거의 버전과 호환성을 유지하려면 해당하는 DOCTYPE 선언을 사용해야 합니다.

명세서

DOCTYPE에 대한 명세서 사양
명세서 사양
DOCTYPE HTML Standard
#the-doctype

참고문헌

  • MDN - 문서 타입 정의
  • MDN - Quirks Mode
  • W3C - Doctypes and markup styles
  • Activating Browser Modes with Doctype

같이 보기

  • HTML <html> 태그 - 올바른 이해와 사용 방법
  • HTML 특수 문자 사용법과 의의 - 예약된 문자와의 충돌을 피하며 웹 콘텐츠 작성하기
  • 웹 페이지에서 이모지(이모티콘) 사용하기
  • HTML role 속성 - 장애를 가진 사용자들을 위한 향상된 웹 콘텐츠의 접근성 제공
  • HTML rel 속성 - 개념 정리 및 활용 방법
  • CSS @charset - 스타일시트에 사용되는 인코딩을 지정하는 규칙
HTML 다음

codingEverybody는 모든 사람을 위한 코딩 학습서입니다.
모든 자료와 예제는 오류를 방지하기 위해 지속적으로 검토되지만 완전한 정확성을 보증할 수는 없습니다.
따라서, 모든 자료와 예제를 신뢰하기 전에 스스로의 판단에 따라 오류, 버그, 취약점이 없는지 신중하게 테스트하고 검토해야 합니다.
크리에이티브 커먼즈 저작자표시-저작자표시 4.0 국제 에 따라 사용할 수 있습니다.

Copyright © 옵티안. All Rights Reserved.