728x90
HTML5 개요
HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안이다.
HTML5는 HTML 4.01, XHTML 1.1 등을 대체하는 HTML의 차세대 표준이다.
HTML5는 XML이나 XHTML과는 달리 문법적으로 매우 유연하게 대처한다.
따라서 다음과 같은 사항들을 모두 문법적으로 허용한다.
- 태그 이름에 대문자 사용
- 속성값에 따옴표 생략
- 속성값 생략
- 빈 태그의 종료 태그(/) 생략
HTML5 문서의 기본 구조
HTML5에서는 DOCTYPE 선언이 매우 간단해졌다.
<!DOCTYPE html>또한, 문자셋(character set)의 선언도 매우 간단해졌다.
HTML5에서의 기본 문자 인코딩(character encoding) 방식은 UTF-8이다.
<!-- HTML5 이전 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- HTML5 -->
<meta charset="UTF-8">HTML5 변경사항
HTML5에서 추가된 요소 및 타입
- 의미(semantic) 요소 : <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
- 멀티미디어 요소 : <video>, <audio>
- 그래픽 요소 : <canvas>, <svg>
- input 요소의 타입 : number, date, time, calendar, range
HTML5에서 추가된 자바스크립트 API
- Geolocation
- Drag and Drop
- Web Storage
- Application Cache
- Web Worker
- Server Sent Events
HTML5에서 삭제된 기존 요소
| 삭제된 기존 요소 | 설명 |
| <acronym> | <abbr> 태그로 대체 |
| <applet> | <object> 태그로 대체 |
| <basefont> | CSS로 적용 |
| <big> | CSS로 적용 |
| <center> | CSS로 적용 |
| <dir> | <ul> 태그로 대체 |
| <font> | CSS로 적용 |
| <frame> | 삭제 |
| <frameset> | 삭제 |
| <noframes> | 삭제 |
| <strike> | CSS로 적용 |
| <tt> | CSS로 적용 |
HTML5 추가요소
HTML5에서 추가된 의미(semantic) 요소
| 의미 요소 | 설명 |
| <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 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 정의함. |
HTML5에서 추가된 다양한 타입의 input 요소
| form 요소 | 설명 |
| <datalist> | input 요소에 대해 미리 정의된 옵션 리스트를 명시함. |
| <keygen> | form 요소 안에 두 개의 키(key)를 만들어주는 생성기를 명시함. |
| <output> | 스크립트 등으로 실행된 계산의 결과를 바로 나타냄. |
HTML5에서 추가된 input 요소의 타입
- number
- range
- color
- date
- time
- datetime-local
- month
- week
- tel
- url
- search
HTML5에서 추가된 form 요소의 속성
- autocomplete
- novalidate
HTML5에서 추가된 input 요소의 속성
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern
- placeholder
- required
- step
HTML5에서 추가된 그래픽 요소
| 그래픽 요소 | 설명 |
| <canvas> | 자바 스크립트를 이용한 그래픽 작업을 정의함. |
| <svg> | SVG를 이용한 그래픽 작업을 정의함. |
HTML5에서 추가된 멀티미디어 요소
| 멀티미디어 요소 | 설명 |
| <audio> | 오디오와 음악 등 오디오 파일을 명시함. |
| <video> | 비디오와 영화 등 비디오 파일을 명시함. |
| <embed> | 플러그인(plug-in)과 같은 HTML 문서에 삽입할 객체(object)를 명시함. |
| <source> | 멀티미디어 요소의 원본에 대한 파일 형식 및 파일 주소를 여러 개 명시함. |
| <track> | 비디오 플레이어에 대한 텍스트 자막을 명시함. |
HTML5에서 변경된 사항들에 대한 더 자세한 정보는 W3C 공식 사이트를 방문하여 확인할 수 있다.
'Language > HTML' 카테고리의 다른 글
| [HTML] Input 요소 (0) | 2022.09.19 |
|---|---|
| [HTML] semantic element (0) | 2022.09.19 |
| [HTML] HTML과 XHTML (0) | 2022.09.18 |
| [HTML] HTML과 JavaScript (0) | 2022.09.18 |
| [HTML] HTML과 CSS (0) | 2022.09.18 |