HTML5에서는 태그 자체에 의미를 부여하는 시맨택 마크업(Semantic Markup)을 사용합니다. 아래 태그들은 그에 걸맞게 새로 추가된 태그들로, 이름만으로도 충분히 용도을 짐작할 수 있을 것입니다. 되도록 아래의 태그들을 사용해서 문서의 구조를 만들고 콘텐츠를 삽입하는 것이 논리적인 웹 문서를 만드는 지름길 입니다.
| section | 일반적인 문서나 애플리케이션 영역을 표시합니다. 섹션의 제목을 나타내는 h1~h6와 함께 사용할 수 있습니다. |
|---|---|
| article | 뉴스 기사나 블로그 글 같은 독립적인 콘텐츠를 표시합니다. |
| aside | 문서의 주요 부분을 표시하고 남는 사이드 바 콘텐츠를 표시 합니다. |
| hgroup | 제목과 그에 관련된 부제목을 하나로 묶습니다. |
| header | 헤더 부분으로 사이트 소개나 네비게이션 등을 표시하기도 하고 내용 중간에서는 머리글 역할을 하기도 합니다. |
| footer | 푸터 부분을 표시합니다. 사이트 제작자나 저작권 정보 등을 나타낼 때 주로 사용합니다. |
| nav | 사이트 안의 내비게이션 요소를 표시합니다. |
| figure,figcaption | 그림이나 비디오 같은 멀티미디어 콘텐츠에 캡션을 붙이려고 할 때 사용합니다. |
| audio, video | 멀티미디어 콘텐츠를 표시합니다. 애플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공합니다. |
| embed | 플러그인 콘텐츠를 표시합니다. |
| mark | 텍스트에 형광펜으로 칠한 것과 같은 강조 효과를 만듭니다. |
| progress | 시간이 걸리는 작업과정을 막대로 표시합니다. |
| meter | 측정값을 표시합니다. |
| time | 날짜나 시간을 표시합니다. |
| ruby, rt, rp | 루비 문자를 표현합니다. |
| canvas | 웹상에 그래픽을 표시합니다. API와 함께 사용해 다양한 애플리케이션을 만들수 있습니다. |
| command | 사용자 실행 명령어를 표시합니다. |
| details | 추가적인 정보나 사용자가 요청하는 정보를 표시합니다. |
| datalist | 사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 목록으로 보여줍니다. |
| keygen | 양식(form)을 서버로 전송할 때 한 쌍의 키를 만들어 private key(프라이비트키)는 로컬에 저장하고 public key(퍼블릭 키)는 서버에 저장합니다. |
| output | 수학적인 계산의 결과값을 표시합니다. |
HTML4에도 있었던 태그지만 HTML5에서 의미를 새로 규정함으로써 HTML4에서와 용도가 달라지는 태그들이 있습니다. 이 태그들은 정확한 용도대로 사용해야 논리적이고 시맨틱한 웹 문서를 만들 수 있습니다.
| 태그 | HTML4에서의 의미 | HTML5에서의 의미 |
|---|---|---|
| a | href="#" 또는 href="javascript:;"로 지정해야 널 링크로 사용할 수 있습니다. | href 속성 없이 사용하면 '널 링크'로 사용됩니다. |
| address | 이름이나 이메일 주소, 전화번호 등 제작자에 대한 정보를 표시합니다. | 실제 우편물 주소를 표시합니다. |
| b | 텍스트를 진하게 표시합니다. | 텍스트를 진하게 표시할 뿐 아니라, 제품 소개서안의 제품명, 요약 문서 안의 키워드처럼 특별하게 중요하지는 않지만 진하게 표시하려고 할 때 사용합니다. |
| hr | 가로줄을 표시합니다. | 단락 단위로 주제를 바꾸려고 할 때 사용합니다. |
| i | 텍스트를 기울어지게 표시합니다. | 텍스트를 기울어지게 표시할 뿐 아니라, 중요한 정보가 들어 있지 않은 주변 콘텐츠로부터 텍스트를 따로 표시할 때 사용합니다. |
| menu | (사용하지 않도록 권고) | 실제 문서 메뉴 정보를 제공하는데 사용합니다. |
| small | 작은 글자로 표시합니다. | 세부 주석이나 법적 인쇄 문서에서 작은 인쇄 정보를 표시할 때 사용합니다. |
| strong | 글자를 강조합니다. | 단순히 진하게 표시하는 것보다 더 중요한 정보를 표시할 때 사용합니다. |
HTML5에서도 계속 사용할 수 있는 HTML4 태그들이 많은데 이런 태그에서 사용할 수 있는 새로운 속성들이 추가되었습니다.
| 속성 | 적용태그 | 설명 |
|---|---|---|
| media | a, area | 링크할 미디어를 지정합니다. |
| hreflang | area | 링크하는 대상의 언어를 지정합니다. |
| rel | area | area가 포홤된 문서와 area가 링크하는 대상간의 관계를 지정합니다. |
| target | base | href속성에서 지정한 링크의 target을 지정합니다. |
| value | li | 첫번째 항목의 값을 지정합니다.HTML4에서는 사용하지 않도록 권고했었지만 HTML5에서는 ol태그 안에 있는 li태그에서만 사용할 수 있습니다. |
| charset | meta | 문자 인코딩을 선언합니다. |
| autofocus | input,select, textarea,button |
입력 필드에 포커스를 줍니다. |
| placeholder | input, textarea | 입력필드에 힌트 내용을 표시합니다. 입력을 하기 위해 필드 내부를 클릭하면 힌트 내용은 사라집니다. |
| required | input,textarea | 필수 입력 필드를 설정합니다. |
| autocomplete | input | 자동 완성 기능을 켜거나 끕니다. |
| min, max | input | 숫자나 범위를 지정할 때 값의 최소값이나 최대값을 지정합니다. |
| multiple | input | 값을 여러 개 허용합니다. |
| pattern | input | 조건을 사용한 일반식을 표시합니다. |
| step | input | 숫자나 범위를 지정할 때 값을 조절하는 단계를 지정합니다. |
| novalidate | form | 서버로 양식을 전송하는 동안 유효했는지 보증할 수 없음을 나타냅니다. |
| type | menu | 메뉴의 종류를 선택합니다. 선택할 수 있는 값은 toolbar와 context입니다. |
| label | menu | 메뉴명을 지정합니다. |
| scoped | style | 해당 요소의 부모 요소와 자식 요소가 스타일의 적용 대상이 됩니다. 이 속성을 지정하지 않으면 문서 전체가 적용 대상이 됩니다. |
| async | script | 스크립트를 실행할 수 있게 되면 즉시 비동기적으로 실행됩니다. |
| menifest | html | 오프라인 웹 캐시를 사용할 경우 menifest파일의 경로를 지정합니다. |
| reversed | ol | 이 속성을 지정하면 목록이 역순으로 표시됩니다. |
| start | ol | 첫번째 항목의 시작값을 지정합니다. 이전 버전에서는 사용하지 않도록 권고했으나 HTML5에서는 다시 사용할 수 있습니다. |
| seamless | iframe | 문서 내용의 일부인 것처럼 끼워넣은 표시가 나지 않도록 iframe을 삽입합니다. |
| sandbox | iframe | iframe안에 플러그인이나 폼, 스크립트 같은 특정 기능을 허용할 수도 있고 허용하지 않을 수도 있습니다. |
HTML5에서는 웹 애플리케이션 개발에 도움을 줄 다양한 API를 제공합니다. 웹 개발에 관심이 없는 분들은 마크업 부분만
공부하고 API부분은 남겨두어도 됩니다.
HTML5에서 제공하는 여러 API중에서 중요한 몇 가지는 다음과 같습니다.
| API | 내용 |
|---|---|
| 웹스토리지(Web Storage) | 로컬 스토리지(Local Storage)라고도 합니다. 웹의 내용을 사용자 컴퓨터에 임시저장하는 기능을 구현하는 API로, 인터넷 접속이 끊긴 상태에서도 이미 살펴보았던 게시판이나 웹 메일을 볼 수 있도록 애플리케이션을 만들 수 있습니다. |
| 드래그앤드롭(Drag&Drop) | 웹 페이지상에서 원하는 항목을 드래그할 수 있게 해주는 API입니다. 다른 API와 함께 사용하면 다양한 효과를 만들 수 있습니다. |
| 지오로케이션(Geolocation) | 여러 포털 사이트에서 제공하는 공개지도 API와 함께 사용하면 자신의 현재 위치를 알아낼 수 있는 애플리케이션을 쉽게 만들 수 있습니다. |
| 캔버스(Canvas) 2D | Canvas 요소와 그리기 API를 제공하여 웹에서 직접 그림을 그리는 애플리케이션을 만들 수 있습니다. 아직까지는 2D만 구현 됩니다. |
| 웹 워커(Web Workers) | CPU에 부하를 많이 주는 작업을 여러 워커(Worker)로 나누어 작업하면 실행 속도에 서로 영향을 주지 않고 실행할 수 있습니다. |
| 웹 SQL 데이터베이스(Web SQL Database) | 웹 브라우저에 내장 데이터베이스를 만들고 SQL 질의를 통해 데이터베이스를 사용할 수 있습니다. 모바일용 애플리케이션에서 유용합니다. |
