WHATWG와 W3C가 발표하는 HTML의 최신 버전으로, 2014년 10월 28일 완전히 표준화되었다. XHTML에서 다시 HTML로 회귀하게 되었다. 따라서 HTML5는 XHTML의 상위 버전이 아니라, HTML4.01의 상위 버전이다. 완전히 XHTML 문법을 버린 것은 아니고 선택적으로 이용할 수 있게 되어있다. 어도비 플래시나 실버라이트 등의 플러그인을 기반으로 하는 응용 프로그램에 대한 필요성을 줄이는 것에 초점을 맞추고 있다. 이러한 방향성 덕분에 한국에서는 웹 표준에 대한 문제가 이슈로 떠오르면서 함께 주목을 받기도 하였다. HTML5라는 말은 의미가 넓어져, 꼭 W3C의 HTML5 표준만이 아닌 최신 웹 기술(HTML Living Standard, CSS3+, ECMAScript 6+ 등)을 통틀어 칭하기도 한다. HTML5가 상용화되면서 어도비 플래시는 지원 중단 절차를 밟게 되었다.
W3C는 HTML 4.01 이후 XML 기반의 XHTML로 웹 표준의 방향을 변경하였다. 그러나 XML의 까다로운 문법은 웹 개발자들에게 그리 잘 받아들여지지 못했다. 2004년6월 W3C 회의에서 모질라 재단과 오페라 소프트웨어는 새로운 HTML 표준 제안서를 제출하였다. 그러나 이는 "웹의 혁명을 위한 기존의 지향점에 위배된다"라는 이유로 거절되었다.[1]
이는 당시 전 세계 최고 점유율을 가진 인터넷 익스플로러가 사실상 웹 표준 브라우저가 되고 마이크로소프트는 XHTML을 밀고 나갔기 때문이다.
2004년 6월, 웹 브라우저 제공 기업인 애플, 모질라, 오페라 소프트웨어의 구성원들이 독자적으로 새로운 웹표준 기관 WHATWG를 설립했다. WHATWG는 기존의 HTML 등의 웹 기술에 응용 프로그램의 작성을 위한 기능을 추가한 Web Applications 1.0이라는 표준을 정립했다. 2006년 10월 W3C의 팀 버너스 리는 웹의 XML로의 전환이 실패했음을 시인했고, 다음 해인 2007년부터 W3C는 WHATWG와 협업하여 HTML5의 표준을 만들기 시작했다. 한편 WHATWG는 W3C와 협업을 진행하면서도 W3C와는 별도로 독자적인 HTML 표준의 작업을 시작했고, 이후 Web Applications 1.0과 HTML 표준을 합쳐 HTML Living Standard라는 이름으로 발표했다. HTML Living Standard는 W3C의 HTML5와는 달리 버전이 없이 그때그때 업데이트된다. 2014년 10월 28일, HTML5의 최종 권고안이 확정되어 최신 표준으로 지정되었다. 2016년 11월 1일, HTML5의 버전업인 HTML5.1이 최신 표준으로 지정되었다. 2017년 12월 14일. HTML5.1의 버전업인 HTML5.2가 최신 표준으로 지정되었다. 또한 HTML5.3이 워킹 드래프트 단계에 돌입했다. 2019년 5월 28일. 따로 각자의 표준을 발표하던 W3C와 WHATWG가 이제 함께 표준 작업을 진행하고, 두개의 표준을 단일화해 앞으로 WHATWG가 하나의 표준을 발표하기로 하였다. 즉, HTML5의 표준은 WHATWG의 Living Standard가 유일하게 되었다.
HTML5라고 불리우는 개념은 단순히 웹 문서를 작성할 때 사용되는 마크업 랭귀지(HTML)의 문법적(syntactic) 버전뿐만 아니라 새로운 DOM API 스펙을 포함하는 것이다. 문법면에서는 이전에 비해 상당히 간결하고 명확해졌다. XHTML에 있던 XML 문법도 모두 제거되어 HTML 4.01의 방식으로 돌아갔다. 또한 이전에는 JavaScript를 사용해서 엄청나게 긴 코드를 써서 간접적으로 구현해야 했던 기능들이 정식 엘리먼트로 편입됨으로써(예를 들어
) 간단하게 구현해낼 수 있게 되었고, 불필요하게 길게 적어야 했던 이전 버전에서 꼭 필요한 부분만 남기도록 바뀌는 등 여러가지 개선점이 생겼다. API면에서, HTML5에서는 비디오 및 오디오와 같은 미디어 엘리먼트에 대한 API를 포함해 오프라인 웹 앱 구현, 문서 편집 등과 같은 다양한 기능에 대한 API가 추가되었으며, WHATWG에 의해 Geolocation, Web SQL, File API, Audio API등이 “Living standard”로 권고되고 있다.(HTML5에서의 변화(W3C)WHATWG 스펙) 이를 통해 이전에는 플래시, 실버라이트 등의 외부 플러그인을 통해서만 지원할 수 있던 클라이언트 사이드에서의 사용자 인터페이스를 위한 기능들의 상당수를 브라우저 자체의 기능을 이용해 구현할 수 있게 되었다. 이런 API들은 사실상의 브라우저 표준 스크립트 언어인 JavaScript[2]
이론적으로는 다른 스크립트 언어라도 관계없다. 브라우저가 지원한다면 말이지만...
를 통해 이용할 수 있다. 이때문에 HTML5는 마크업 언어라고만 보기는 더 이상 힘들어졌다. 단, HTML5 그 자체만으로 모든 것이 된다는 오해는 삼가자. HTML5 그 자체가 제공하는 것은 문서 구조와 API이고, 이걸 API와 연결시켜 실제 동작을 구현하는 것은 JavaScript라는 언어로, 이 둘은 엄연히 별개의 것이다. HTML5와 JavaScript가 서로 연결되어 돌아가는 개념이지, HTML5 안에 JavaScript가 포함되는 것이 절대로 아니다. 단적으로, JavaScript는 ECMAScript라는 표준안이 따로 나오는 별도의 프로그래밍 언어이다. 인터넷 익스플로러는 9부터 일부 태그를 지원하기 시작했고, 10이후 거의 대부분 지원한다. 8 이하를 지원하려면 html5shiv.js[3]
jQuery를 만든 존 레시그가 만들었다.
라는 JavaScript를 이용하면 된다. 단 이 경우 JavaScript를 사용하기에 페이지 렌더링 속도가 느려진다는 단점이 있다. 그리고 위의 브라우저 API를 이용하는 기능들은 사용이 불가능하다. 이 JavaScript가 대체하는 것은 HTML5의 마크업뿐이기 때문이다. W3C의 HTML5와 WHATWG의 HTML Living Standard는 꼭 발표 시기에 따른 차이점만 있는 것은 아니고, 각 그룹의 논의 결과에 따라 한쪽에서만 표준으로 채택되기도 했다. 아직까지 비교적 사소한 부분에 한하고 있으나 언제 또 큰 차이가 발생할지 모를 일. 따라서 두 그룹은 표준을 WHATWG의 HTML Living Standard로 단일화시켰다.
HTML5에서는 시맨틱 웹을 중요시하여 여러가지 태그를 새롭게 만들었다. 이러한 태그들을 시맨틱 태그라고 한다. 사실 기존 HTML 표준에서도 각 태그는 대부분 의미를 가지고 있었다. 그러나 의미를 가진 태그가 부족한 편이었고, 의미가 불명확한 태그나 시대의 흐름에 뒤쳐진 태그도 있었다. 2000년대 초반까지만 해도 테이블 관련 태그로 웹 페이지를 여러 구획으로 나눠서 레이아웃을 만드는 방식인 테이블 레이아웃(Table Layout)이 일반화 되어 있었다. 당시 CSS가 나온지 얼마 되지 않은데다 HTML의 기능이 부족할 때 레이아웃을 짜던 방식이 그대로 이어진 것이 원인이었다. 이에 2000년대 초반부터 시맨틱 웹이 중시되면서 HTML은 문서 구조와 의미, CSS는 디자인으로 확연히 분리되고, 테이블 레이아웃은 박스 모델 레이아웃으로 변화되었다. 그러나 당시 표준이었던 HTML 4.01과 XHTML 1.0으로는 시맨틱 웹을 구현하기가 난점이 있었다. 문서 내에 들어가는 목록이나 강조 등의 미시적인 부분에는 의미가 있었지만, 레이아웃에서 이게 메뉴인지 메인 컨텐츠인지 서브 컨텐츠인지 분류할 수 있는 태그는 없었다. 이 때문에 레이아웃에서 각 영역을 지정하는 태그는
가 대단히 많이 쓰였고, 이 당시 박스 모델을 적용한 HTML 문서는 수십 개로 중첩된 복잡한
그나마 id나 name 속성을 이용하여 이게 무슨 용도로 사용되는 블럭인지 명시해두는 기법도 있었지만, 닫는 태그쪽은 표시가 안 되기 때문에 역시 문제가 있었다.
이 때문에 HTML5에서 관련 태그를 추가한 것이다. 시맨틱 태그를 사용한 레이아웃은 컴퓨터가 읽어낼 수 있다. 이게 무슨 말이냐면, 검색 사이트에서 어디가 내용인지를 알 수 있어서 검색 노출을 용이하게하고, 궁극적으로 시각장애인에게 사이트의 어디가 본문인지 아닌지 알려줄 수 있다는 장점이 있다. 기존 태그는 일부분을 제외하고는 HTML 4.01에서 사용되던 태그가 거의 그대로 사용된다. 원래 HTML을 표준에 맞게 사용했다면 큰 어려움 없이 HTML5에도 적응할 수 있다.
일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치한다. 페이지 맨 위에 쓸 때는 사이트의 제목이 보통 들어가며, 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다.
태그랑 헷갈리면 매우 곤란하다. section이나 article, aside 등으로 묶어놓은 섹션 안의 헤더 용도로 사용해도 된다. 이건 아래 footer 태그도 마찬가지다.
내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에
을 넣어 목록 형태로 사용한다.
문서의 주된 콘텐츠를 표시한다. 이 태그는 두 개 이상 보여져서는 안 된다. 두 개 이상의 main 요소를 쓸 경우 하나 이외의 전부를 hidden 속성을 써서 가려야 한다. 시맨틱 태그 중에서는 인터넷 익스플로러에서 유일하게 지원되지 않는 태그다.
웹 페이지의 내용에 사용하는 태그이다. 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용(예를 들어 투고 같은)할 수 있는 섹션에 사용한다.
웹 페이지의 섹션에 사용하는 태그이다. 웹 페이지를 의미적으로 각각의 파트로 구분하기 위해 쓰는 태그이다. 이 태그를 사용하면 검색엔진이 긁어가지 않는다는 이야기가 있는데 루머다. HTML5 표준 문서에 보면 "요소의 내용을 배포(syndicate)해도 이치에 맞다면 section 요소 대신 article 요소를 사용하기를 권합니다."라는 부분이 있는데, 이 부분의 해석이 잘못 퍼진 것으로 추정된다.
본문의 주요 부분을 표시하고 남은 부분을 설명하는 태그이다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.
일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치한다. 페이지 맨 아래에 쓸 때는 사이트의 라이선스, 주소, 연락처 등을 넣는다.