Skip to content

7. HTML5 시작

1. 키워드

  • HTML5


2. HTML5 개요

  • HTML5는 웹 상에서 콘텐츠(Content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안이다.
  • HTML5는 HTML 4.01, XHTML 1.1 등을 대체하는 HTML의 차세대 표준이다.


  • HTML5는 XML이나 XHTML과는 달리 문법적으로 매우 유연하게 대처한다.
  • 따라서 다음과 같은 사항들을 모두 문법적으로 허용한다.


1] 태그 이름에 대문자 사용

2] 속성값에 따옴표 생략

3] 속성값 생략

4] 빈 태그의 종료 태그(/) 생략


1) HTML5 문서의 기본 구조

  • HTML5에서는 DOCTYPE 선언이 매우 간단해졌다.


<!DOCTYPE html>


  • 또한, 문자셋의 선언도 매우 간단해졌다.
  • HTML5에서의 기본 문자 인코딩(Character Encoding) 방식은 UTF-8이다.


<meta charset="UTF-8" />


3. HTML5 변경사항

1) HTML5에서 추가된 요소 및 타입

  • 의미 요소: <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
  • 멀티미디어 요소: <video>, <audio>
  • 그래픽 요소: <canvas>, <svg>
  • input 요소의 타입: number, date, time, calendar, range


2) HTML5에서 추가된 자바스크립트 API

  • Geolocation
  • Drag and Drop
  • Web Storage
  • Application Cache
  • Web Worker
  • Server Sent Events


3) HTML5에서 삭제된 기존 요소

삭제된 기존 요소 설명
<acronym> <abbr> 태그로 대체
<applet> <object> 태그로 대체
<basefont> CSS로 적용
<big> CSS로 적용
<center> CSS로 적용
<dir> <ul> 태그로 대체
<font> CSS로 적용
<frame> 삭제
<frameset> 삭제
<noframes> 삭제
<strike> CSS로 적용
<tt> CSS로 적용


4. HTML5 추가요소

1) HTML5에서 추가된 의미 요소

의미 요소 설명
<header> HTML 문서나 섹션(Section) 부분에 대한 헤더(Header)를 정의함.
<nav> HTML 문서 사이를 탐색할 수 있는 링크(Link)의 집합을 정의함.
<main> HTML 문서의 주요 콘텐츠(Content)를 정의함.
<section> HTML 문서에서 섹션(Section) 부분을 정의함.
<article> HTML 문서에서 독립적인 하나의 기사(Article) 부분을 정의함.
<aside> HTML 문서에서 페이지 부분 이외의 콘텐츠(Content)를 정의함. 
<figure> HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(Content)를 정의함.
<figcaption> figure 요소를 위한 캡션을 정의함.
<footer> HTML 문서나 섹션(Section) 부분에 대한 푸터(Footer)를 정의함.
<bdi> 기본 출력방향과는 다른 방향으로 출력되는 텍스트를 정의함.
<mark> 하이라이팅된 텍스트를 정의함.
<details> 사용자가 보거나 숨길 수 있는 추가적인 설명문을 정의함.
<summary> details 요소에 나타날 내용을 정의함.
<dialog> 다이얼로그(Dialog) 박스나 다이얼로그 윈도우를 정의함.
<menuitem> 사용자가 팝업 메뉴(Popup Menu)를 통해 선택할 수 있는 메뉴의 아이템(Menu Item)을 정의함.
<meter> 정해진 범위 내의 스칼라 치수를 정의함.
<progress> 작업에 대한 진행 정도를 정의함.
<ruby> 루비(Ruby) 문자를 선언함.
<rt> 본문 위에 나타날 문자를 정의함.
<rp> 루비(Ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 정의함.
<time> 날짜와 시간을 정의함.
<wbr> br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 정의함.


2) HTML5에서 추가된 다양한 타입의 input 요소

form 요소 설명
<datalist> input 요소에 대해 미리 정의된 옵션 리스트를 명시함.
<keygen> form 요소 안에 두 개의 키(Key)를 만들어주는 생성기를 명시함.
<output> 스크립트 등으로 실행된 계산의 결과를 바로 나타냄.


3) HTML5에서 추가된 그래픽 요소

그래픽 요소 설명
<canvas> 자바 스크립트를 이용한 그래픽 작업을 정의함.
<svg> SVG를 이용한 그래픽 작업을 정의함.


4) HTML5에서 추가된 멀티미디어 요소

멀티미디어 요소 설명
<audio> 오디오와 음악 등 오디오 파일을 명시함.
<video> 비디오와 영화 등 비디오 파일을 명시함.
<embed> 플러그인(Plug-in)과 같은 HTML 문서에 삽입할 객체(Object)를 명시함.
<source> 멀티미디어 요소의 원본에 대한 파일 형식 및 파일 주소를 여러 개 명시함.
<track> 비디오 플레이어에 대한 텍스트 자막을 명시함.

References