HTML5

  • 상위 항목: HTML
HTML5 로고

1 개요

2008년 1월부터 논의가 시작된 버전으로 2014년 10월 28일 확정된 HTML의 최신 표준이다. XHTML에서 다시 HTML로 회귀하게 되었다. 따라서 HTML5는 XHTML의 상위 버전이 아니라, HTML4.01의 상위 버전이다. 플래시나 실버라이트 등의 플러그인을 기반으로 하는 응용 프로그램에 대한 필요성을 줄이는 것에 초점을 맞추고 있다. 이러한 방향성 덕분에 한국에서는 웹표준에 대한 문제가 이슈로 떠오르면서 함께 주목을 받기도 하였다.

2014년 10월 28일, HTML5의 최종 권고안이 확정되어 최신 표준으로 지정되었다.

2 설명

HTML5라고 불리우는 개념은 단순히 웹 문서를 작성할 때 사용되는 마크업 랭귀지(HTML)의 문법적 (syntactic) 버전 뿐만 아니라 새로운 DOM API 스펙을 포함하는 것이다.

문법면에서는 이전에 비해 상당히 간결하고 명확해 졌는데, 또한 이전에는 JavaScript를 사용해서 엄청나게 긴 코드를 써서 간접적으로 구현해야 했던 기능들이 정식 엘리먼트로 편입됨으로서 (예를 들어 <video> ) 간단하게 구현해낼 수 있게 되었고, 불필요하게 길게 적어야했던 이전 버전에서 꼭 필요한 부분만 남기도록 바뀌는 등 여러가지 개선점이 생겼다.

API면에서, HTML5에서는 비디오 및 오디오와 같은 미디어 엘리먼트에 대한 API뿐를 포함해 오프라인 웹 앱 구현, 문서 편집 등과 같은 다양한 기능에 대한 API가 추가되었으며, WHATWG에 의해 Geolocation, Web SQL, File API, Audio API등이 “Living standard”로 권고되고 있다. HTML5에서의 변화 (W3C) WHATWG 스펙 이를 통해 이전에는 플래시, 실버라이트 등의 외부 플러그인을 통해서만 지원할 수 있던 클라이언트 사이드에서의 사용자 인터페이스를 위한 기능들의 상당수를 브라우저 자체의 기능을 이용해 구현할 수 있게 되었다.

이런 API들은 사실상의 브라우저 표준 스크립트 언어인 JavaScript (이론적으로는 다른 스크립트 언어라도 관계없다. 브라우저가 지원한다면 말이지만..) 를 통해 이용할 수 있다. 이 때문에 HTML5는 마크업 언어라고만 보기는 더 이상 힘들어졌다. 단, HTML5 그 자체만으로 모든 것이 된다는 오해는 삼가자. HTML5 그 자체가 제공하는 것은 문서 구조와 API이고, 이걸 API와 연결시켜 실제 동작을 구현하는 것은 JavaScript라는 언어로, 이 둘은 엄연히 별개의 것이다. HTML5와 JavaScript가 서로 연결되어 돌아가는 개념이지, HTML5 안에 JavaScript가 포함되는 것이 절대로 아니다. 단적으로, JavaScript는 ECMAScript라는 표준안이 따로 나오는 별도의 프로그래밍 언어이다.

인터넷 익스플로러는 9부터 일부 태그를 지원하기 시작했고, 10에서 거의 대부분 지원한다. 8 이하를 지원하려면 html5shiv.js 라는 JavaScript를 이용하면 된다. 단 이 경우 JavaScript를 사용하기에 페이지 렌더링 속도가 느려진다는 단점이 있다. 그리고 위의 브라우저 API를 이용하는 기능들은 사용이 불가능하다. 이 JavaScript가 대체하는 것은 HTML5의 마크업 뿐이기 때문이다.

3 변경사항

HTML5로 접어들어 HTML이 다양한 기능을 포함하면서 새롭게 추가된 태그들과 의미가 변경된 태그들이 여럿 있다.

3.1 선언문

이전 버전의 HTML과 XHTML이 유효성 검사를 위한 선언문이 쓸데없이 길었던 반면, HTML5에서는 간단하게 몇 자만 적으면 된다. 

<!DOCTYPE html>

3.2 시맨틱 태그

HTML5에서는 시맨틱 웹을 중요시하여 여러가지 태그를 새롭게 만들었다. 이러한 태그들을 시맨틱 태그라고 한다.

사실 기존 HTML 표준에서도 각 태그는 대부분 의미를 가지고 있었다. 그러나 의미를 가진 태그가 부족한 편이었고, 의미가 불명확한 태그나 시대의 흐름에 뒤쳐진 태그도 있었다. 2000년대 초반까지만 해도 테이블 관련 태그로 웹 페이지를 여러 구획으로 나눠서 레이아웃을 만드는 방식인 테이블 레이아웃(Table Layout)이 일반화 되어 있었다. 당시 CSS가 나온지 얼마 되지 않은데다 HTML의 기능이 부족할 때 레이아웃을 짜던 방식이 그대로 이어진 것이 원인이었다. 이에 2000년대 초반부터 시맨틱 웹이 중시되면서 HTML은 문서 구조와 의미, CSS는 디자인으로 확연히 분리되고, 테이블 레이아웃은 박스 모델 레이아웃으로 변화되었다. 그러나 당시 표준이었던 HTML 4.01과 XHTML 1.0으로는 시맨틱 웹을 구현하기가 난점이 있었다. 문서 내에 들어가는 목록이나 강조 등의 미시적인 부분에는 의미가 있었지만, 레이아웃에서 이게 메뉴인지 메인 컨텐츠인지 서브 컨텐츠인지 분류할 수 있는 태그는 없었다. 이 때문에 레이아웃에서 각 영역을 지정하는 태그는 <div>가 대단히 많이 쓰였고, 이 당시 박스 모델을 적용한 HTML 문서는 수십 개로 중첩된 복잡한 <div> 지옥(...)인 경우가 많았다[1]. 이 때문에 HTML5에서 관련 태그를 추가한 것이다.

시맨틱 태그를 사용한 레이아웃은 컴퓨터가 읽어낼 수 있다. 이게 무슨 말이냐면, 검색 사이트에서 어디가 내용인지를 알 수 있어서 검색 노출을 용이하게하고, 궁극적으로 눈으로 페이지를 볼 수 없는 사람들에게 사이트의 어디가 본문인지 아닌지 알려줄 수 있다는 장점이 있다.

기존 태그는 일부분을 제외하고는 HTML 4.01에서 사용되던 태그가 거의 그대로 사용된다. 원래 HTML을 표준에 맞게 사용했다면 큰 어려움 없이 HTML5에도 적응할 수 있다.

3.2.1 레이아웃 태그

  • <header>
일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치한다. 페이지 맨 위에 쓸 때는 사이트의 제목이 보통 들어가며, 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다. <head> 태그랑 헷갈리면 매우 곤란하다. section이나 article, aside 등으로 묶어놓은 섹션 안의 헤더 용도로 사용해도 된다. 이건 아래 footer 태그도 마찬가지다.
  • <nav>
내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 <ul>을 넣어 목록 형태로 사용한다.
  • <article>
웹 페이지의 내용에 사용하는 태그이다. 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용(예를 들어 투고 같은)할 수 있는 섹션에 사용한다.
  • <section>
웹 페이지의 섹션에 사용하는 태그이다. 웹 페이지를 의미적으로 각각의 파트로 구분하기 위해 쓰는 태그이다. 이 태그를 사용하면 검색엔진이 긁어가지 않는다는 이야기가 있는데 루머다. HTML5 표준 문서에 보면 "요소의 내용을 배포(syndicate)해도 이치에 맞다면 section 요소 대신 article 요소를 사용하기를 권합니다."라는 부분이 있는데, 이 부분의 해석이 잘못 퍼진 것으로 추정된다.
  • <aside>
본문의 주요 부분을 표시하고 남은 부분을 설명하는 태그이다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.
  • <footer>
일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치한다. 페이지 맨 아래에 쓸 때는 사이트의 라이선스, 주소, 연락처 등을 넣는다.
3.2.1.1 예시

레이아웃 태그를 사용한 HTML5 마크업의 기초 뼈대는 다음과 같다.

300px 






[페이지 제목]




[사이트 제목]

[사이트 부제목]


    

  • [메뉴1]

  • [메뉴2]

  • [메뉴3]






    [본문 내용]



[사이드바 내용]


[주소 내용]
    • </span>
    </pre></div>
    </html>

    3.2.2 멀티미디어 태그

    • <audio>
    음성, 음악 파일 등을 재생할 수 있는 태그. 웹 브라우저마다 지원하는 확장자가 달라[2] 멀티브라우저 지원을 위해서는 <source> 태그를 안에 넣어 두가지 이상의 확장자를 가진 음악 파일을 넣어야 한다. 가장 많이 사용하는 조합은 mp3+ogg
    • <video>
    영상 파일을 재생할 수 있는 태그. 사실상 HTML5에서 가장 주목받는 태그이다. 별다른 플러그인 없이도 자체 재생이 가능하다는 점이 가장 큰 장점이다. <audio> 태그와 마찬가지로 <source> 태그를 넣어 mp4+ogv의 조합으로 짜주면 거의 대부분의 브라우저를 지원한다. 뭐 요즘은 어차피 어딜 가든 그냥 유튜브를 걸어버리지만....
    • <canvas>
    스크립트를 이용하여 그래픽을 표현하는 태그이다. 일반적으로는 JavaScript를 많이 사용하며, 응용하면 웹에서 게임 앱, 3D 엔진 등을 돌리는 다양한 응용이 가능하다.

    3.2.3 폼 관련

    • <output>
    계산의 결과값을 전송하는 데에 쓰인다.
    • 새로운 <input>의 type 속성 - date, datetime, time, color, range 등
    JavaScript를 통해서만 구현됐던 기능이 내장되었다. 현 시점에서는 크롬이 사실상 전부를 지원한다.
    • <datalist>
    <input>의 type="text"와 같은 속성을 가진 것들에 들어갈 값을 미리 정의하는 태그이다.
    암호화용 키쌍을 생성하는 태그이다. 서버에는 공개 키가 전송되고, 개인 키는 클라이언트에 저장된다.

    3.2.4 기타 태그

    • <menu>
    툴바, 팝업 메뉴를 넣을 때 쓴다.
    • <menuitem>
    툴바, 팝업 메뉴의 각 항목을 정의한다.
    • <details>
    보이거나 숨기게 해주는 요약글 형식의 위젯에 사용되는 태그이다. <summary> 태그와 함께 쓰인다.
    • <embed>
    외부 애플리케이션이나 플러그인을 삽입할 때 쓰는 태그이다. 대표적으로 어도비 플래시를 웹페이지에 삽입할 때 이걸 쓴다. 그 외에도 예전에는 IE 전용 태그 중 하나인 <bgsound> 태그를 대체하는 태그로도 쓰인 바 있다. 원래 HTML에 없던 비표준 태그였는데 거의 모든 브라우저가 이 태그를 지원한데다, 기존에 표준으로 존재하던 object 태그보다 사용방법이 간편해서[4] 사실상 표준처럼 쓰이던 태그였고 결국 HTML5 표준에 포함되었다.
    • <object>
    외부 문서, 매체, 플러그인 등을 웹페이지에 삽입할 때 쓰는 태그이다.
    • <figure>
    그림, 도표, 다이어그램 등의 글의 이해를 돕기 위한 내용들을 나타내는 태그이다.
    • <figcaption>
    <figure> 태그 안에 사용되는 태그로, <figure> 태그 안에 있는 내용의 설명을 적는 태그이다.

    3.2.5 용도가 바뀐 태그

    • <s>
    더이상 옳지 않은 내용을 나타내는 데에 쓴다. 별도의 CSS 없이 쓰면 브라우저에서는 취소선을 긋는 것이 기본값이다.
    • <u>
    양식상 일반적인 텍스트보다 돋보여야 할때 쓴다. 예를 들어 철자가 틀린 단어나, 중국어로 번역된 고유 명사 등이 있다. 별도의 CSS 없이 쓰면 브라우저에서는 밑줄을 긋는 것이 기본값이다.
    • <i>
    어떠한 이유로 일반적인 텍스트보다 돋보여야 할때 쓴다. 예를 들어 전문 용어, 외국어의 구절 등이 있다. 별도의 CSS 없이 쓰면 브라우저에서는 이탤릭체로 표기하는 것이 기본값이다.
    더 적절한 시맨틱 태그가 있을 경우 그쪽을 쓴다.
    • <hr>
    원래 단순한 가로줄을 나타내는 태그였으나, 페이지의 주제가 바뀔 때 내용을 분리시키는 의미가 HTML5에서 추가되었다.

    3.2.6 사용 불가 태그

    대개 시맨틱 웹에서 사용을 지양하는 태그라든가, 특정 브라우저대표적으로 IE라든가에서만 작동하는 태그가 속한다.

    • <font> → CSS가 있기 때문에 폐기되었다. 이미 HTML 4.01에서 비권장으로 분류된 태그였다. CSS의 color, font-family, font-size로 대체된다.
    • <center> → 가운데 정렬용 태그인데 마찬가지로 CSS로 너무나도 간단하게 대체 가능하기에 폐기되었다. 텍스트 및 인라인 요소 가운데 정렬은 text-align: center;로, 블럭 요소 가운데 정렬은 margin:0 auto;로 대체 가능하다.
    • <basefont> → 말 그대로 기본 폰트를 지정해 주는 태그였다. 하지만 CSS가 있는데 굳이 이걸 쓸 이유가... 결국 IE 9를 끝으로 여러 브라우저에서 더 이상 이 태그를 지원하지 않는 등 존재가 유명무실해진 까닭에 너무나도 당연히 폐기되었다. 모든 태그에 CSS 속성을 적용하는 * 선택자를 이용하여 font-family, font-size로 지정하는 방식으로 대체할 수 있고, 이 태그보다 더욱 다양하게 지정할 수 있다.
    • <applet> → 자바 애플릿을 넣을 때 쓰는 태그였다. <object>, <embed>로 대체한다.
    • <strike> → <del>, <s>로 대체되었다.
    • <frame> → 이것과 함께 쓰이던 <frameset>, <noframes> 태그 역시 함께 사용 불가 태그가 되었다. 또한 이게 없어지면서 frameset 속성의 문서도 없어졌다. HTML5에서 프레임을 가진 문서는 <iframe>으로 비슷하게 구현할 수 있다.
    • <acronym> → <abbr>와 의미가 중복되어서 <abbr>로 통합되었다.
    • <marquee> → 익스플로러에서 전광판처럼 글자가 흐르게 하는 테그였다. JavaScript나 CSS3의 Animation으로 대체할 수 있다.
    • <blink> → 넷스케이프와 파이어폭스에서 글자를 깜빡이게 하는 태그였다. 이 역시 JavaScript나 CSS3의 Animation으로 대체할 수 있다.
    • <bgsound> → 배경음악을 재생시키는 태그인데 익스플로러에서만 돌아가는 비표준 태그이다. 다른 브라우저를 배려하기 위한 차원에서 범용성이 좋은 <embed>로 대체해 가는 추세였으며, HTML5에서 <audio>가 추가되었으므로 더 이상 필요하지 않다.

    4 기타

    2012년 12월 17일자로 권고 후보안(Candidate Recommendation)으로 등록되어 표준 지정을 기다리고있다. 표준화 일정에 따르면 2014년 4분기까지는 표준을 제정하고, 처리하기 힘든 문제들은 HTML5.1 이상의 버전에서 다룰 예정이었고,# 결국 2014년 10월 28일 최종 권고안이 확정, HTML의 최신 표준으로 지정되었다.

    HTML5test에서 태그 지원 여부를 확인할 수 있는데, 2016년 9월 시점에서도 만점(555점)을 기록한 웹 브라우저는 아직 없다. 웹 브라우저 순위는 다음과 같다.

    1. 크롬 52 - 492점
    2. 오페라 40 - 496점
    3. 파이어폭스 48 - 461점
    4. 엣지 14 - 460점
    5. 사파리 9.1 - 370점
    6. 인터넷 익스플로러 11 - 312점[5]
    7. 비발디 브라우저 1.4 499점
    플래시나 NPAPI에 의존하지 않고 직접 동영상을 실행할 수 있게 되면서 곤란한 점도 생겼는데, 플래시 시절과 달리 원하지 않는 동영상이나 광고화면 차단이 원천적으로 불가능하다는 것이다. 일단 파이어폭스의 경우 about:config로 들어가서 해결할수 있으며 크롬은 애드온을 깔면 되지만 유튜브 말고는 동영상이나 움짤 차단이 불가능하다. 그리고 엣지는 아예 동영상 기능 해제가 불가능하다. 결국 플래시/NPAPI 시절과 달리 인터넷을 보는 사람이 알아서 엄빠주의, 후방주의 해야 하는 시대가 찾아온 것. 이외에도 동영상/음악 불펌을 막을 수 없다는 문제도 있다.[6]
    1. ↑ 그나마 id나 name 속성을 이용하여 이게 무슨 용도로 사용되는 블럭인지 명시해두는 기법도 있었지만, 닫는 태그쪽은 표시가 안 되기 때문에 역시 문제가 있었다.
    2. ↑ 이는 이런저런 어른의 사정 때문에 빚어진 현상. video 태그는 더 심하다.
    3. ↑ 현재 whatwg 스펙에서 제거되었다. 그러나 w3c 스펙 상에는 아직 없어지지 않은 상태.
    4. ↑ <object> 태그는 일일이 외우기도 힘든 형식(classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 같은 식이다(...))으로 된 개체 형식 코드값을 넣어야 한다!
    5. ↑ 버전 11이 최종버전으로, 더 이상 개발되지 않을 예정이기 때문에 점수가 더 이상 나아질 가능성이 없다.
    6. ↑ 사실 인터넷이 열린 공간이라는 것을 감안할 때, 인터넷에 올린다는 것은 암묵적으로 올린 정보를 공유하겠다는 의미가 되는 것이긴 하다.