HTML4 vs HTML5 - by. UXKM

  • Publishing
  • HTML
  • HTML 문서구조
  • HTML4 vs HTML5
요약 설명

HTML4와 HTML5는 웹 문서 구조와 기능 면에서 여러 차이를 가지고 있으며, HTML5는 HTML4의 한계를 보완하고 현대 웹 환경에 맞게 발전한 표준입니다.
HTML5는 표현뿐 아니라 기능적인 면까지 고려한 최신 웹 표준으로, 반응형 디자인, 접근성, 웹 애플리케이션 구현에 유리한 구조를 제공합니다.

문서 선언 비교

HTML4와 HTML5의 가장 눈에 띄는 차이 중 하나는 문서 유형 선언 방식입니다.
HTML4는 문서 유형에 따라 Strict, Transitional, Frameset 등 세 가지 DTD를 사용하고
HTML5는 문서 구조의 간결성을 위해 하나의 선언만으로 브라우저가 HTML5로 해석하게 합니다.

HTML4 문서 선언

HTML5 문서 선언

구조 구성 방식

문서를 구성하는 방식에서도 HTML4와 HTML5는 큰 차이를 보입니다.
HTML4는 구조를 구분하기 위해 <div id="header">, <div id="content">와 같은 형태를 사용하고,
HTML5는 역할에 맞는 시맨틱 태그를 제공하여 문서 구조 자체로 의미를 표현합니다.

  • 항목
  • HTML4
  • HTML5

  • 구조화 방식

    <div>, <table> 등 비시맨틱 요소 중심으로 구성

    <header>, <nav>, <section>, <article> 등 시맨틱 태그 사용

  • 의미 전달

    id와 class로 역할을 명시

    태그 자체가 의미를 전달함

  • 유지보수

    역할 파악이 어려움, 코드 해석이 필요함

    구조가 명확하여 가독성과 유지보수 용이

시맨틱 요소 비교

HTML4에서는 동일한 구조를 표현하기 위해 모두 <div>로 처리하기 때문에 의미 전달이 어렵고 중복 코드가 많습니다.
반면 HTML5에서는 다양한 시맨틱 요소가 도입되어 의미 중심의 마크업이 가능해졌습니다.

  • 항목
  • HTML4 요소
  • HTML5 대체 시맨틱 요소

  • header

    <div id="header">

    <header>

  • nav

    <div id="nav">

    <nav>

  • content

    <div id="content">

    <main>, <section>

  • footer

    <div id="footer">

    <footer>

문서 아웃라인 방식 차이

HTML4는 <h1> ~ <h6> 태그만으로 아웃라인을 구성하고 구조를 <div>로 표현해 섹션 구분이 어렵습니다.
반면 HTML5는 <section>, <article> 등의 시맨틱 요소가 독립적인 아웃라인 컨텍스트를 형성합니다.

  • 항목
  • HTML4
  • HTML5

  • 아웃라인 구성 기준

    <h1> ~ <h6> 태그만 사용하여 계층 구성

    <section>, <article>, <nav>, <aside> 등 시맨틱 요소마다 독립적인 아웃라인 생성

  • 구조 표현 방식

    대부분 <div>로 구성되어 의미 구분 어려움

    시맨틱 태그로 문서 구조가 명확하게 표현됨

  • 제목 태그 사용 방식

    <h1>은 보통 1회만 사용 (문서 전체 제목)

    각 시맨틱 블록 안에 <h1> 중복 사용 가능 (섹션별 최상위 제목으로 인식)

  • 구조 해석 난이도

    스크린 리더 및 검색 엔진이 구조 해석에 어려움

    브라우저와 보조 기술이 문서 구조를 자동 인식

접근성과 SEO 측면 비교

시맨틱 구조의 도입은 웹 접근성과 검색 최적화에도 긍정적인 영향을 줍니다.
HTML5의 구조만으로도 많은 접근성 역할이 내포되어 있으므로, 별도의 ARIA 설정 없이도 보조 기술에서 효과적으로 동작합니다.

  • 항목
  • HTML4
  • HTML5

  • 접근성

    시각적 구분만 가능. 보조 기술이 의미를 파악하기 어려움

    시맨틱 태그를 통해 구조적 의미를 직접 표현

  • SEO 최적화

    구조 파악이 어려워 크롤러가 콘텐츠의 중요도를 구분하기 어려움

    의미 기반 구조로 콘텐츠의 우선순위 파악이 용이

  • ARIA 활용

    접근성 향상을 위해 추가 구성 필요

    시맨틱 태그만으로도 상당 부분 보완 가능