HTML#02 - HTML4.01과 HTML5 문서의 구조적 차이

이번 글에서는 HTML5에 대해 알아보겠습니다. HTML4.01과 HTML5 어떻게 다른걸까요? 우선 제 기준으로 가장 많이 바뀐 구조적 특성에 대해 알아볼까 합니다.

 

 

HTML5은 HTML의 큰 틀에서 약간씩 변화해 지금의 웹표준으로 자리잡고 있는 HTML5버전을 의미합니다. HTML5에서의 가장 큰 변화는 시맨틱(Sementic) 웹을 기본으로하는 코딩입니다.

 

시맨틱의 사전적 의미는 '의미론적'입니다. 한글로 의미론적이라고 하면 무슨말인지 싶으실 수도 있는데요. 간단히 설명하자면 HTML문서의 각 요소 태그를 의미가 포함된 태그를 사용하여 브라우저나 검색엔진이 의미를 알 수 있는 코딩을 하는 것입니다.

 

이렇게 의미가 부여된 시맨틱 태그들을 이용하여 코딩을 하면, 사람이 아닌 브라우저나 검색엔진이 html의 내용에서 어떤것이 글의 제목, 본문, 사이트의 메뉴 등 각각의 내용이 무엇인지를 알수 있습니다.

 

아직까지 감이 안오신다구요? 한번 HTML4로 작성된 문서의 구조와 HTML5으로 작성된 문서의 구조만 비교해보도록하겠습니다.

 

HTML4.01 문서구조 예제:

<div id="header">
    <h1>사이트제목: HTML4 문서구조</h1>
    <div id="nav">사이트 메뉴</div>
</div>
<div id="article">
    <h2>본문 제목</h2>
    <p>본문내용</p>
</div>
<div id="aside">
    사이트위젯
</div>
<div id="footer">
    웹사이트 정보
</div>

HTML5 문서구조 예제:

<header>
    <h1>사이트제목: HTML5 문서구조</h1>
    <nav>사이트 메뉴</nav>
</header>
<article>
    <h2>본문 제목</h2>
    <p>본문내용</p>
</article>
<aside>
    사이트위젯
</aside>
<footer>
    웹사이트 정보
</footer>

 

위의 예제와 같이 HTML5 이전의 버젼에서 HTML문서의 구조를 만들때 <div>를 사용하여 id 혹은 class 속성을 통해 작성자가 임의로 헤더, 본문, 위젯, 풋터등을 코딩하였습니다.

 

약간의 개인적인 잡담을 더하자면 저는 10여년전 학원에서 HTML을 시작했습니다. 그 당시 확실한 버전은 기억 안 나지만 css도 같이 배웠기 때문에 아마 HTML4였던것 같습니다. 그 후 제로보드와 Table 태그를 이용해서 문서 구조(레이아웃)을 코딩했으며 조금 지나고서는 위의 예재와 같이 div를 이용하여 문서 구조를 코딩하였습니다. 그 당시 코딩하였던 코드를 들여다보면 브라우저나 검색엔진은 어디서 어디까지가 제목헤더, 본문, 메뉴, 풋터등을 알 수 없었습니다.

 

여러명의 코드 작성자들이 구조별로 비슷한 이름의 id나 class를 쓰는 경우가 있을 수는 있지만 다른 이름을 사용하는 경우가 대부분이 었을 것입니다. 이유는 구조적으로 id나 class 값이 정식으로 정의된 값이 아니었기 때문에 브라우저나 검색엔진에서는 어디부분이 메뉴 부분이고 어느부분이 본문 부분인지 인지하지 못했습니다.

 

HTML5에서는 HTML5 문서구조 예제와 같이 <header>, <article>, <aside>, <footer>등의 시맨틱 코드들이 추가 되어 어느 브라우저나 검색엔진이 문서를 열더라도 각각의 구조가 어떤 내용을 가지고 있는지 인식할 수 있습니다.

 

이는 검색엔진최적화(SEO)에도 도움이 되는 변화로 내가 생성한 정보를 보다 정확하게 검색엔진을 통해 배포할 수 있습니다.

 

이외에도 HTML5으로 바뀌면서 바뀌거나 간단하게 변경된 태그들이 있는데 이런 태그들은 저와 같이 차근차근 공부해 보도록 하겠습니다.

 

혹시나 제 글에서 문제점이나 의문 사항이 있으시면 편하게 댓글로 지적해 주시면 수정하도록하겠습니다. 저도 함께 공부하는 입장으로 모든 댓글은 꼭 확인도록 하겠습니다.