HTML4 vs HTML5

오호·2021년 12월 23일

프론트엔드 공부를 처음 시작하면서 가장 먼저 유심히 공부했던 주제이다. 다시 한번 과거에 공부했던 내용들을 리마인드 할겸 포스팅을 해본다. 끝없는 공부는 언제나 즐겁다🔥

1. HTML5의 탄생

* W3C는 웹의 창시자 팀 버너스 리가 1994년에 만들었다.

웹 표준화 기구인 W3C에서 초기에는 HTML5에 대한 계획을 가지고 있지 않았었다. XHTML 1.0을 XML 기반으로 구체화하기 위한 작업에 몰두하고 있었다. 그러나 XHTML 2.0은 견고한 웹을 구현한다는 취지아래 기존 웹과의 호환성이 고려되지 않은 치명적인 문제를 가지고 있었다.

이러한 때 W3C의 의사결정이 느리다는 이유로 2004년에 애플, 모질라, 오페라 소프트웨어는 WHATWG(Web Hypertext Application Technology Working Group)를 공동으로 설립했다.
vendor 현재는 애플, 모질라, 구글, 마이크로소프트 4개사가 핵심그룹이다. WHATWG는 Web Application 1.0과 Web Forms 2.0을 만들어냈다.

WHATWG는 2007년에 HTML5 명세를 W3C에 제안했고 W3C가 공개적으로 XHTML2.0의 실패를 인정하고 새롭게 HTML을 개발하기로 결정하여 HTML5가 공식적으로 탄생했다.

2011년까지는 W3C와 WHATWG는 협력관계 였지만 2012년부터 서로의 목표가 다르다는 점을 밝히면서 편집팀을 분리했다.

주요 브라우저 벤더들로 구성된 WHATWG는 새로운 기능을 구현하는 데 더 관심이 많았다. 따라서 2019년까지 각자 표준을 발표했다.

그러다 결국 WHATWG가 승리했다. WHATWG의 Living Standard를 HTML과 DOM 명세 표준으로 삼게 되었다.

2. HTML의 아웃라인 알고리즘

아웃라인은 HTML에서 정보 구조를 명확히 하기 위한 개념이라고 할 수 있다. 이 아웃라인은 페이지의 contents를 사용자에게 전달하는데 매우 중요한 토대가 된다.

2.1 HTML4 아웃라인

HTML4에서는 헤딩 요소 자체가 아웃라인을 만들었다. 주로 div를 이용해 아웃라인을 그렸다.

<div id="header">
  <h1>제목1</h1>
  <div>
  	contents.....
  </div>
</div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>

위와 같은 방식으로 마크업을 했었는데 이런 방식은 div가 어떤일을 하는 녀석인지 의미론적으로 와닿지 않았습니다.
그래서 등장한 것이, HTML5의 Semantic 태그들이다.

2.2 HTML5 아웃라인

HTML5에서는 많은 Semantic 태그들이 등장하면서 명시적으로 아웃라인을 구성할 수 있게 되었다.

2.3 명시적 아웃라인 vs 암묵적 아웃라인

HTML4와 HTML5의 가장 큰 차이라고 할 수 있다. 명시적 아웃라인은 <section>, <article> 등의 요소로 직접 묶어서 마크업하는 것을 말한다.

반면, 암묵적 아웃라인은 HTML4에서 사용하는 것과 같이 <div id="header"/> 등 heading 요소를 사용하여 그 아래에 있는 요소들이 아웃라인을 구성하도록 하는 것을 말한다.

📌 결론
암묵적 아웃라인 즉, HTML4의 마크업은 개발자 또한 알아보기 쉽지 않으며 프로그램도 이를 처리하기 더 어렵게 만든다.

3. 그래서 HTML5가 뭐가 좋은건데?!

so what

HTML5에 추가된 내용을 살펴보자.

콘텐츠 모델

기존 HTML 기반의 마크업에서는 인라인 요소와 블록요소로 구분하는 정도만 있었을 뿐이었다.
좀 더 구체적인 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것끼리 그룹화했는데 이것을 콘텐츠 모델이라고 한다.
'어떤 요소에 어떤 콘텐츠를 포함해야 하는지' 라는 것이 더욱 중요해짐에 따라 단순한 문법적 변화에서 더 나아가 HTML가 구조와 구성을 중시하는 마크업으로 진화했음을 말해준다.

이 콘텐츠의 모델에 대한 여러가지 카테고리가 있는데 알아보자.

3.1 섹셔닝 루트

<body>, <blockquote>,<figure>,<fieldset>,<td>,<detail>

섹셔닝 루트에 해당하는 태그들은 독립된 컨텐츠로 간주되어 전후의 컨텐츠 아웃라인에는 영향을 미치지 않는다.
하지만 보이지 않는 자기만의 제목이 있다.
예시) 섹셔닝 루트(body) 안에 섹셔닝 루트(blockquote) 사용


<body>
    <h1>body 요소의 제목</h1>
    <section>
        <h1>section 요소의 제목</h1>
      
        <blockquote>
            <h1>blockquote 제목</h1>
            
            <section>
                <h1>인용된 내용에 포함된 섹션</h1>
            </section>
        </blockquote>
      
        <section>
            <h1>section 요소의 제목 2</h1>
        </section>
    </section>
</body>

3.2 섹셔닝 콘텐츠

<section>, <article>, <nav>, <aside>

이 요소들은 요소 자체가 의미를 가지며, 하나의 아웃라인을 만든다. 대부분 HTML5에 새로 추가된 요소들로, 반드시 헤딩요소를 포함해야한다. 헤딩레벨은 섹셔닝 콘텐츠의 구조에 따라 바뀐다.

<body>
    <h1>제목1</h1>
    <h2>제목2</h2>
    
    <article>
    	<h3>
            제목3-1
        </h3>
    </article>
    
    <article>
    	<h3>
            제목3-2
        </h3>
    </article>
</body>

3.4 헤딩 콘텐츠

헤딩 콘텐츠는 섹션의 제목을 나타내고, 문서의 아웃라인을 고려하여 사용해야한다.

<h1> ~ <h6>
<hgroup></hgroup>

3.5 메타데이터 콘텐츠

메타데이터 콘텐츠 카테고리에 속한 요소는 문서의 표현이나 동작을 수정하거나, 다른 문서를 가리키는 링크를 설정한다. 기본적인 웹 브라우저에 직접적으로 표시되지 않으며 문서와 문서간의 관계를 설정한다.

<base>,<command>,<link>,<meta>,<script>,<style>,<title>

3.6 임베디드 콘텐츠

임베디드 콘텐츠는 다른 리소스를 가져오거나, 콘텐츠를 다른 마크업 언어나 네임스페이스로부터 문서에 삽입한다.

<audio>,<canvas>,<embed>,<iframe>,<img>,<object>,<video>

4. 요약

섹셔닝 콘텐츠는 항상 heading 요소와 같이 사용한다.

최상위 헤딩(h1)은 섹셔닝 루트(body 등) 한번만 사용하자.

HTML5는 웹 접근성 측면, 개발자, 컴퓨터 모두에게 한층 향상된 구체적인 정보를 제공할 수 있도록 도와준다.

출처
1. 참고블로그
2. 웹표준 핵심가이드북

오호

이전 포스트

Normalize, Reset 뭘써야 할까?

다음 포스트