New Elements in HTML5
인터넷, 인터넷사용은 HTML 4.01 이 표준이 된 1999년 이후로 많은 것들이 변경되었다.
오늘날, HTML 4.01 의 몇가지 요소는 사용되지 않거나 사용할 수 없거나 그들이 의도한 방법으로 쓰지 않고 있다.
이러한 요소들은 삭제되거나 HTML5 로 다시 쓰고 있다.
더 나은 인터넷 요구에 대응하기 위해 HTML5 는 그래픽 그리는 것, 미디어 컨텐츠를 표현하는 것, 더 나은 페이지 구조, 더 나은 폼 그리고 드래그 앤 드롭과 사용자 접속 장소 획득, 로컬 데이터 저장소, 등 몇가지 새로운 API 들을 포함하고 있다.
아래는 HTML5 에 도입된 새로운 HTML요소 및 사용된 내용의 설명 목록이다.
The New <canvas> Element
<canvas> - 자바스크립트를 사용함으로서 그래픽을 그린다.
New Media Elements
<audio> - 소리 혹은 음악 내용을 정의.
<embed> - 플러그인과 같은 외부 프로그램을 담아내는 것을 정의.
<source> - <video> 와 <audio> 에 대한 원천을 정의
<track> - <video> 와 <audio> 의 트랙에 대해 정의.
https://html5-demos.appspot.com/static/video/track/index.html
<video> - 비디오 혹은 영화 컨텐츠를 정의.
New Form Elements
<datalist>
- 입력 컨트롤을 위한 미리 정의된 옵션을 정의.
- 텍스트 필드에 입력할 수 있는 값들을 목록 형태로 제시해 주어 손쉽게 값을 선택할 수 있도록 해줌.
- 즉 텍스트 필드에 직접 값을 입력하는 것이 아니라, 제시한 값 중에서 선택하면 그 값이 자동으로 입력되는 것.
- 데이터 목록은 텍스트 필드와 함께 사용하기 때문에 <input> 태그를 같이 사용함.
<keygen>
- 열쇠 페어 제네레이터 필드 를 정의합니다 ( 양식 )
- RSA 알고리즘을 기반으로 하는 듯.
<output>
- 계산 결과를 표시하기 위한 것.
New Semantic/Structural Elements
- HTML5 의 시맨틱 태그를 사용하여 만든 문서나 HTML4 시절에 만든 문서나, 브라우저에서 열어 보면 겉모습은 똑같다. 그러나 HTML5 를 이용하여 웹 표준 문서를 만들려면 시맨틱 태그를 사용해야 한다.
- HTML5 의 시맨틱 요소로 작성한 소스를 보면 태그만 보고도 어느 부분이 제목이고 메뉴인지, 그리고 어느 부분이 실제 내용인지 쉽게 알 수 있다. 또한 어떤 장애를 가지고 있더라도 웹사이트를 사용하는데 불편함이 있어서는 안 된다는 '웹 접근성'의 시각에서 봤을 때도 시맨틱 태그는 아주 중요하다. 시각 장애인들은 웹사이트를 이용할 때 화면 판독기 같은 웹 보조 기구를 이ㅇ한다. 이때 하면 판독기가 시맨틱 태그를 통해 어느 부분은 제목이고 어느 부분은 내용인지 구별하 ㄹ수 있으므로 사용자게에 그만큼 정확하게 사이트 내용을 전달할 수 있다. 그리고 태그에 대한 역할이 정확히 정해졌기 때문에 어떤 장치에서든 똑같이 문서를 해석할 수 있다.
<article>
- 실제 콘텐츠 내용 넣기.
- 보통 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 모두 여기에 해당됨.
- <section> 과 <article> 태그를 자주 혼동하는 경우가 있는데, 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면, <article> 태그를 쓰면 됨. <article> 에 비해 <section> 는 콘텐츠 기준이라기보다 헤더와 섹션, 푸터와 구분하기 위한 기능상의 구분이니, <section> 태그를 이용해 콘텐츠 영역을 구분해 두고, <article> 태그를 이용해 내용을 채워나간다고 생각하면 됨.
<aside>
- 본문 이외의 내용 표시하기.
- <aside> 는 본문 내용 외에 주변에 표시되는 기타 내용들을 나타냄.
- 흔히 블로그 등에서 왼쪽이나 오른쪽, 혹은 하단에 표시되는 광고나 링크 같은 사이드 바를 표시할 때 사용.
<bdi>
- 한 덩어리의 텍스트 방향을 주위와는 별도로 표시하도록 지시하는 요소.
- bdo 요소는 페이지 작성자가 명시적으로 방향을 지정해야 하지만 bdi 요소는 브라우저에서 요소의 텍스트를 보고 방향성을 판단할 수 있다.
- 이것은 당췌 모르게씀....
<details>
- 사용자가 추가 정보를 얻거나 컨트롤 할 수 있는 노출된 위젯을 나타낸다.
<dialog>
- 다이얼로그 박스를 팝업창으로 쉽게 보여준다.(지원되는 브라우저가 한정되어있음)
<figcaption>
- figcaption 요소는 부모 요소인 figure 요소의 캡션이나 제목을 정의한다.
- 캡션 설명 붙이기
- <figure> 태그를 사용해 캡션을 붙일 대상을 묶어 놓았다면 <figcaption> 태그를 사용해 캡션을 붙일 수 있다.
- <figcaption> 에 대한 스타일만 조절하면 적절한 캡션을 표시할 수 있다.
- <figure> 태그에서 <figcaption> 태그를 반드시 사용해야 하는 것은 아니다. 캡션을 표시하지 않더라도 <figure> 태그를 사용하는 경우는 그 부분에 이미지나 다이어그램, 비디오 같은 것이 있다고 브라우저에게 알려주기 위한 것. 단순히 이미지를 묶여서 표시하고 싶다면 <div> 태그를 사용.
<figure>
- 캡션 대상 지정하기.
- HTML5 이전에는 이미지에 캡션을 붙이기 위해서는 <p> 태그를 사용해 캡션 내용을 표시한 후 위치를 조절하고, 이미지 위치를 바꾸게 되면 캡션 내용도 함께 옮기는 등 번거로운 작업을 해야했었음.
<footer>
- 제작 정보와 저작권 정보 표시하기.
- 보통 작성자, 연관된 문서에 대한 링크, 저작권 정보, 기타 흡사한 정보를 담음.
<header>
- 머리말(제목) 지정하기.
- <head> 와 <header> 은 전혀 다름.
- <head> 은 문서에서 단 한번만 사용할 수 있고, 여기에는 <title>, <meta> 와 같은 웹 문서 정보가 들어간다. 실제로 웹 화면에서는 보이지 않는 내용들임.
이에 비해 <body> 태그 안에 사용하는 <header> 태그는 한 문서에서 여러 번 사용할 수 있다. <header> 태그는 사이트 로고나 메뉴 등 실제 문서 내용이 들어간다.
<main>
- 메인이라는 것을 알려주는 거 같은데, 사용빈도가 많이 없을듯??
<mark>
- 형광펜 효과 내기.
- HTML4 에서는 텍스트에 형광펜을 그은 듯한 효과를 내려면 스타일시트를 사용해야 했음.
- 배경색이 노란색으로 표시되는 것이 기본임. background-color 을 사용해 배경색 변경가능함.
<menuitem>
- 크롬에서는 지원이 안됨, 파이어폭스에만 지원 됨.
<meter>
- 알려진 범위 내에서의 스칼라 측정 또는 분포 비율을 나타낸다. 예를 들어 디스크 사용 현황, 쿼리 결과의 관련성, 특정 후보에 대한 투표율 등에 사용될 수 있다. 이것을 게이지라고도 한단.
- 값이 차지하는 크기 표시해주는 태그
- <meter> 태그는 작업이 진행된다는 의미보다, 하드 디스크 전체 용량 중 현재 얼마나 사용하고 있는지 나타내는 사용량이나 전체 유권자 수 중에서 몇 명이나 투표했는지를 보여주는 투표율처럼 지정된 범위 안에서 해당 값이 어느 정도 차지하고 있는지를 표현.
<nav>
- 문서를 연결하는 내비게이션 링크
- 같은 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 나타낸다.
<progress>
- 진행 상태 보여주기.
- 작업의 진행상 태를 나타낼 때 사용할 수 있는 태그.
- 작업의 시작을 0 으로 하고 최종 완료를 최댓값으로 하여 얼마나 진척되었는지를 숫자로 표현하는 것.
- 이때 사용하는 값에는 특별한 단위가 없고, 그 단위가 표시되지도 않음.
<rp>
- Ruby 요소는 루비 주석을 지원하지 않는 사용자 에이전트에서 루비 텍스트를 괄호로 둘려싸서 표현하기 위해 사용.
- 루비를 지원하지 않는 에이전트에서는 한자 형태로 표시됨(한자가 아닌 다른 언어로도 표시될수도?)
<rt>
- rt 요소는 루비 텍스트의 루비 주석을 나타냄.
<ruby>
- ruby 요소는 루비 주석을 정의. 루비 주석은 텍스트 주변(보통 위에) 나타나는 텍스트로 주로 동아시아권 언어에서 발음이나 주석으로 사용됨.
<section>
- 일반 문서나 프로그램의 섹션(제목으로 시작하는 컨텐츠의 의미적 그룹)을 나타냄.
<summary>
- details 요소에 포함된 내용의 요약, 캡션, 범례를 나타냄.
<time>
- 24시간에서의 시간, 혹은 그레고리력에서의 정밀한 날짜(선택적으로, 타임존 옵셋 정보를 포함하여) 나타냄.
<wbr>
- br 요소가 강제적으로 줄바꿈을 처리하는 것과 달리 부모 요소의 너비에 따라 동적으로 줄바꿈을 처리해줌.
Removed Elements
아래 HTML4.01 에 있던 Element 들은 HTML5 에선 제거되었음.
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
참조 사이트
