HTML 5이란?

HTML5는 HTML4.01의 상위 버전으로 이전에 비해 상당히 간결하고 명확해졌다.

 

2014년 10월 28일, 차세대 웹 표준으로 확정이 되었고 단순 텍스트, 링크의 표시가 아닌

오디오, 비디오 등의 멀티미디어와 여러가지 폭 넓은 처리를 할 수 있도록 표현한다. 

(ActiveX 등의 별도의 플러그인을 이용하지 않고 HTML5 태그만으로 자체적으로 처리할 수 있다.)

 

인터넷 익스플로러의 경우 9부터 일부 태그를 지원하고 10에서 거의 대부분의 태그를 지원한다.

ie8 이하를 지원하려면 html5shiv.js 라는 JavaScript 를 이용하면 된다.

 

 

1. HTML5에서 달라진 점

HTML5에서는 이전과는 다르게 시맨틱 웹을 중요시한다.

시맨틱 웹을 사용하기 위해 HTML5에선 시맨틱 태그를 사용한다.

 

 

1-1. 레이아웃 태그의 추가

단순히 레이아웃 구조를 짤 때 <div>로만 겹겹이 쌓는 것이 아니라

용도와 상황에 따라 레이아웃 관련된 태그를 사용하여 페이지를 조금 더 시맨틱하게 (의미있게) 작성할 수 있다.

 

아래의 코드처럼 레이아웃 구조를 div만 이용해서 처리를 하게되면

관련 영역에 대한 의미를 확실하게 알 수 없을 뿐만 아니라

소스가 복잡해질 경우 소스를 확인하는데에 어려움이 있을 것이다.

 

<div id="header">Header 영역</div>

<div id="section">
   <div id="article">독립적 사용 가능한 문서</div>
   <div id="main">메인 컨텐츠</div>
</div>

<div id="aside">
   <div id="nav">네비게이션 영역</div>
</div>

<div id="footer">Footer 영역</div>    
    

 

하지만 아래의 소스처럼 html5의 레이아웃 태그를 이용하게 된다면,

조금 더 깔끔한 태그 작성과 태그의 의미에 맞게 레이아웃을 작성하게 되므로

스크린 리더에도 각 영역별로 의미를 확실히 명시해줄 수 있고 각 영역 별로 의미를 부여할 수 있다.

 

<header>Header 영역</header>

<section>
   <article>독립적 사용 가능한 문서</article>
   <main>메인 컨텐츠</main>
</section>

<aside>
   <nav>네비게이션 영역</nav>
</aside>

<footer>Footer 영역</footer>

* 레이아웃 태그 표

태그	설명
<header>	일반적으로 페이지 전체 영역의 가장 윗부분, 제목 영역에 많이 위치하게 된다. 그리고 <section>, <article>, <aside> 영역 안의 헤더 영역 표시를 위해서도 사용된다.
<nav>	네비게이션을 표시하는 태그이다. 주로 <nav> 태그 안에 <ul><li>를 사용하여 네비게이션 메뉴를 작성한다.
<section>	페이지의 각 영역의 구분을 위해 사용한다.
<article>	페이지 내용을 담는 태그이다. sns 관련 영역, 뉴스 소식 등 독립적으로 따로 떼어가서 어디서든 사용할 수 있는 내용을 담는다.
<main>	문서의 주된 내용을 담는 태그이다. 문서에서 두 개 이상 노출되면 안되는 태그이므로 사용하는 영역이 아닌 <main> 태그는
<aside>	본문의 주요 내용 외의 사이드 영역이나 광고 영역 등의 기타 내용을 담는다.
<footer>	일반적으로 페이지 전체 영역의 가장 아랫부분에 위치하게 된다. <header>와 마찬가지로 <section>, <article>, <aside> 영역 안에도 위치할 수 있다.

 

 

1-2. 기타 추가 된 태그

태그	설명
<video>	영상 파일을 재생할 수 있는 태그. 별다른 플러그인 없이 자체 재생이 가능하다.
<audio>	오디오 파일을 재생할 수 있는 태그. <video>태그와 마찬가지로 자체 기능을 제공한다.
<canvas>	동적인 비트맵 그래픽을 활용하는 태그, 스크립트를 이용해 표현한다.
<embed>	플러그인 컨텐츠를 나타내는 태그.
<output>	스크립트를 통해 계산된 결과값을 나타내는 태그.
<datalist>	<input> 요소에 대해 미리 정의된 옵션 리스트를 명시하는 태그.
<mark>	특정 영역을 형광펜으로 마킹하는 태그.
<figure>	그림, 도표, 다이어그램 등의 이해를 돕기 위한 내용을 담는 태그.
<figcaption>	<figure> 태그 안에 사용하며 <figure> 태그 안에 있는 내용을 설명한다.
<time>	날짜와 시간을 나타내는 태그.
<meter>	측정치를 나타내는 태그.
<progress>	진행 상황을 나타내는 태그.
<input>의 type	<input type=""> 에 추가된 요소 - search - tel - url - email - datatime - date - month - week - time - datatime-local - number - range - color

 

1-3. 삭제된 기존 태그

css 적용할 수 있는 태그는 최대한 줄이고 css로 적용하여 스타일을 주었다.

삭제된 태그	설명
<acronym>	<abbr> 태그로 대체
<nobr>	CSS로 적용 (white-space : nowrap)
<marquee>	스크립트나 CSS로 적용
<blink>	스크립트나 CSS로 적용
<applet>	<object> 태그로 대체
<basefont>	CSS로 적용
<big>	CSS로 적용
<center>	CSS로 적용
<font>	CSS로 적용
<strike>	CSS로 적용
<tt>	CSS로 적용
<dir>	<ul> 태그로 대체
<frame>	삭제
<frameset>	삭제
<noframes>	삭제