HTML5-퀵 가이드

HTML5는 HTML 4.01, XHTML 1.0 및 XHTML 1.1을 대체하는 HTML 표준의 다음 주요 개정판입니다. HTML5는 World Wide Web에서 콘텐츠를 구성하고 표시하기위한 표준입니다.

HTML5는 W3C (World Wide Web Consortium)와 WHATWG (Web Hypertext Application Technology Working Group) 간의 협력입니다.

새로운 표준은 이전에 Adobe Flash, Microsoft Silverlight 및 Google Gears와 같은 타사 브라우저 플러그인에 의존했던 비디오 재생 및 드래그 앤 드롭과 같은 기능을 통합합니다.

브라우저 지원

최신 버전의 Apple Safari, Google Chrome, Mozilla Firefox 및 Opera는 모두 많은 HTML5 기능을 지원하며 Internet Explorer 9.0은 일부 HTML5 기능도 지원합니다.

iPhone, iPad 및 Android 휴대폰에 사전 설치되어 제공되는 모바일 웹 브라우저는 모두 HTML5를 훌륭하게 지원합니다.

새로운 기능

HTML5는 최신 웹 사이트를 구축하는 데 도움이 될 수있는 여러 가지 새로운 요소와 속성을 도입합니다. 다음은 HTML5에 도입 된 가장 눈에 띄는 기능 중 일부입니다.

New Semantic Elements − <header>, <footer>, <section>과 같습니다.
Forms 2.0 − <input> 태그에 대한 새 속성이 도입 된 HTML 웹 양식 개선.
Persistent Local Storage − 타사 플러그인에 의존하지 않고 달성하기 위해.
WebSocket − 웹 애플리케이션을위한 차세대 양방향 통신 기술.
Server-Sent Events − HTML5는 웹 서버에서 웹 브라우저로 흐르는 이벤트를 소개하며이를 SSE (Server-Sent Events)라고합니다.
Canvas − JavaScript로 프로그래밍 할 수있는 2 차원 그리기 화면을 지원합니다.
Audio & Video − 타사 플러그인을 사용하지 않고 웹 페이지에 오디오 또는 비디오를 삽입 할 수 있습니다.
Geolocation − 이제 방문자는 웹 애플리케이션과 물리적 위치를 공유하도록 선택할 수 있습니다.
Microdata −이를 통해 HTML5 이상의 고유 한 어휘를 생성하고 사용자 정의 의미 체계로 웹 페이지를 확장 할 수 있습니다.
Drag and drop − 동일한 웹 페이지의 한 위치에서 다른 위치로 항목을 끌어다 놓습니다.

하위 호환성

HTML5는 가능한 한 기존 웹 브라우저와 역 호환되도록 설계되었습니다. 새로운 기능은 기존 기능에 구축되었으며 이전 브라우저에 대한 대체 콘텐츠를 제공 할 수 있습니다.

몇 줄의 자바 스크립트를 사용하여 개별 HTML5 기능에 대한 지원을 감지하는 것이 좋습니다.

이전 버전의 HTML에 익숙하지 않은 경우 HTML Tutorial HTML5의 기능을 살펴보기 전에

HTML 5 언어에는 웹에 게시 된 HTML 4 및 XHTML1 문서와 호환되는 "사용자 정의"HTML 구문이 있지만 HTML 4의보다 난해한 SGML 기능과는 호환되지 않습니다.

HTML 5에는 소문자 태그 이름이 필요하고 속성을 인용하고 속성에 값이 있어야하고 모든 빈 요소를 닫아야하는 XHTML과 동일한 구문 규칙이 없습니다.

HTML5는 많은 유연성을 제공하며 다음 기능을 지원합니다.

대문자 태그 이름.
따옴표는 속성에 대한 선택 사항입니다.
속성 값은 선택 사항입니다.
빈 요소를 닫는 것은 선택 사항입니다.

DOCTYPE

이전 버전의 HTML에서 DOCTYPE은 HTML 언어가 SGML 기반이므로 DTD에 대한 참조가 필요하기 때문에 더 길었습니다.

HTML 5 작성자는 다음과 같이 DOCTYPE을 지정하기 위해 간단한 구문을 사용합니다.

<!DOCTYPE html>

위의 구문은 대소 문자를 구분하지 않습니다.

문자 인코딩

HTML 5 작성자는 간단한 구문을 사용하여 다음과 같이 문자 인코딩을 지정할 수 있습니다.

<meta charset = "UTF-8">

위의 구문은 대소 문자를 구분하지 않습니다.

<script> 태그

다음과 같이 스크립트 요소에 "text / javascript"값이있는 유형 속성을 추가하는 것이 일반적입니다.

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5는 필요한 추가 정보를 제거하고 간단히 다음 구문을 사용할 수 있습니다.

<script src = "scriptfile.js"></script>

<link> 태그

지금까지 다음과 같이 <link>를 작성했습니다.

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5는 필요한 추가 정보를 제거하고 다음 구문을 사용하면됩니다.

<link rel = "stylesheet" href = "stylefile.css">

HTML5 요소

HTML5 요소는 시작 태그와 종료 태그를 사용하여 마크 업됩니다. 태그는 사이에 태그 이름과 함께 꺾쇠 괄호를 사용하여 구분됩니다.

시작 태그와 종료 태그의 차이점은 후자의 태그 이름 앞에 슬래시가 포함된다는 것입니다.

다음은 HTML5 요소의 예입니다.

<p>...</p>

HTML5 태그 이름은 대소 문자를 구분하지 않으며 모두 대문자 또는 대소 문자를 혼합하여 쓸 수 있지만 가장 일반적인 규칙은 소문자를 사용하는 것입니다.

대부분의 요소에는 <p> ... </ p>와 같은 일부 콘텐츠가 포함되어 있습니다. 그러나 일부 요소는 내용을 전혀 포함 할 수 없으며 이러한 요소를 void 요소라고합니다. 예를 들면br, hr, link, meta등

다음은 HTML5 요소 의 전체 목록입니다 .

HTML5 속성

요소에는 요소의 다양한 속성을 설정하는 데 사용되는 속성이 포함될 수 있습니다.

일부 속성은 전역 적으로 정의되어 모든 요소에서 사용할 수있는 반면 다른 속성은 특정 요소에 대해서만 정의됩니다. 모든 속성에는 이름과 값이 있으며 아래 예제에 표시된 것처럼 보입니다.

다음은 "example"값을 사용하여 class라는 속성으로 div 요소를 마크 업하는 방법을 보여주는 HTML5 속성의 예입니다.

<div class = "example">...</div>

속성은 시작 태그 내에서만 지정 될 수 있으며 종료 태그에서는 사용되지 않아야합니다.

HTML5 속성은 대소 문자를 구분하지 않으며 모두 대문자 또는 대소 문자 혼합으로 작성 될 수 있지만 가장 일반적인 규칙은 소문자를 사용하는 것입니다.

다음은 HTML5 속성 의 전체 목록입니다 .

HTML5 문서

더 나은 구조를 위해 다음 태그가 도입되었습니다.

section−이 태그는 일반 문서 또는 애플리케이션 섹션을 나타냅니다. 문서 구조를 나타 내기 위해 h1-h6과 함께 사용할 수 있습니다.
article −이 태그는 블로그 항목이나 신문 기사와 같은 문서의 독립적 인 콘텐츠를 나타냅니다.
aside −이 태그는 페이지의 나머지 부분과 약간 관련된 콘텐츠를 나타냅니다.
header −이 태그는 섹션의 헤더를 나타냅니다.
footer −이 태그는 섹션의 바닥 글을 나타내며 작성자에 대한 정보, 저작권 정보 등을 포함 할 수 있습니다.
nav −이 태그는 탐색을위한 문서의 섹션을 나타냅니다.
dialog −이 태그는 대화를 마크 업하는 데 사용할 수 있습니다.
figure −이 태그는 그래픽 또는 비디오와 같은 일부 포함 된 콘텐츠와 함께 캡션을 연결하는 데 사용할 수 있습니다.

HTML 5 문서의 마크 업은 다음과 같습니다.

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

다음 결과가 생성됩니다-

이전 장에서 설명한 것처럼 요소에는 요소의 다양한 속성을 설정하는 데 사용되는 속성이 포함될 수 있습니다.

다음은 "example"값을 사용하여 class라는 속성으로 div 요소를 마크 업하는 방법을 보여주는 HTML5 속성의 예입니다.

<div class = "example">...</div>

속성은 내에서만 지정할 수 있습니다. start tags 그리고 절대로 사용해서는 안됩니다 end tags.

표준 속성

아래 나열된 속성은 거의 모든 HTML 5 태그에서 지원됩니다.

속성	옵션	함수
액세스 키	사용자 정의	요소에 액세스하기위한 키보드 단축키를 지정합니다.
정렬	오른쪽, 왼쪽, 가운데	태그를 가로로 정렬
배경	URL	요소 뒤에 배경 이미지 배치
bgcolor	숫자, 16 진수, RGB 값	요소 뒤에 배경색 배치
수업	사용자 정의	Cascading Style Sheets와 함께 사용할 요소를 분류합니다.
내용 편집 가능	허위 사실	사용자가 요소의 내용을 편집 할 수 있는지 여부를 지정합니다.
contextmenu	메뉴 ID	요소의 상황에 맞는 메뉴를 지정합니다.
데이터 -XXXX	사용자 정의	맞춤 속성. HTML 문서 작성자는 자신의 속성을 정의 할 수 있습니다. "data-"로 시작해야합니다.
드래그 가능	참, 거짓, 자동	사용자가 요소를 끌 수 있는지 여부를 지정합니다.
신장	숫자 값	표, 이미지 또는 표 셀의 높이를 지정합니다.
숨겨진	숨겨진	요소가 표시되어야하는지 여부를 지정합니다.
신분증	사용자 정의	캐스 케이 딩 스타일 시트와 함께 사용할 요소의 이름을 지정합니다.
안건	요소 목록	요소를 그룹화하는 데 사용됩니다.
itemprop	항목 목록	항목을 그룹화하는 데 사용됩니다.
맞춤법 검사	허위 사실	요소가 철자 또는 문법 검사를 받아야하는지 여부를 지정합니다.
스타일	CSS 스타일 시트	요소의 인라인 스타일을 지정합니다.
제목	사용자 정의 ID	요소의 해당 항목을 지정합니다.
tabindex	탭 번호	요소의 탭 순서를 지정합니다.
표제	사용자 정의	요소의 "팝업"제목입니다.
valign	상단, 중간, 하단	HTML 요소 내에서 태그를 세로로 정렬합니다.
폭	숫자 값	표, 이미지 또는 표 셀의 너비를 지정합니다.

HTML5 태그와 관련 속성의 전체 목록을 보려면, 우리의 참조하시기 바랍니다 HTML5 태그를 .

맞춤 속성

HTML 5에 도입 된 새로운 기능은 사용자 정의 데이터 속성의 추가입니다.

사용자 정의 데이터 속성은 data-귀하의 요구 사항에 따라 이름이 지정됩니다. 다음은 간단한 예입니다.

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

위의 코드는 datasubject 및 data-level 이라는 두 개의 맞춤 속성이있는 완벽하게 유효한 HTML5입니다 . 표준 속성에 대해 얻은 것과 유사한 방식으로 JavaScript API 또는 CSS를 사용하여 이러한 속성의 값을 가져올 수 있습니다.

사용자가 귀하의 웹 사이트를 방문하면 텍스트와 이미지 및 링크를 클릭하고 정의 된 요소 위로 마우스를 가져가는 등 다양한 활동을 수행합니다. 다음은 JavaScript 호출의 예입니다. events.

이벤트 핸들러를 Javascript 또는 VBscript로 작성할 수 있으며 이러한 이벤트 핸들러를 이벤트 태그 속성 값으로 지정할 수 있습니다. HTML5 사양은 아래와 같이 다양한 이벤트 속성을 정의합니다.

다음 속성 세트를 사용하여 javascript 또는 vbscript HTML5 요소에 대해 발생하는 이벤트가있을 때 값으로 제공되는 코드입니다.

다음 장에서 이러한 요소에 대해 자세히 논의하면서 요소 별 이벤트를 다룰 것입니다.

속성	값	기술
오프라인	스크립트	문서가 오프라인이 될 때 트리거됩니다.
중단하다	스크립트	중단 이벤트에 대한 트리거
onafterprint	스크립트	문서가 인쇄 된 후 트리거됩니다.
onbeforeonload	스크립트	문서가로드되기 전에 트리거됩니다.
인쇄 전	스크립트	문서가 인쇄되기 전에 트리거됩니다.
onblur	스크립트	창이 초점을 잃을 때 트리거됩니다.
oncanplay	스크립트	미디어가 재생을 시작할 수 있지만 버퍼링을 위해 중지해야 할 때 트리거됩니다.
oncanplaythrough	스크립트	버퍼링을 위해 중지하지 않고 미디어를 끝까지 재생할 수있을 때 트리거됩니다.
onchange	스크립트	요소가 변경 될 때 트리거됩니다.
onclick	스크립트	마우스 클릭시 트리거
oncontextmenu	스크립트	상황에 맞는 메뉴가 트리거 될 때 트리거됩니다.
ondblclick	스크립트	마우스 두 번 클릭시 트리거
Ondrag	스크립트	요소를 끌 때 트리거됩니다.
Ondragend	스크립트	드래그 작업 종료시 트리거
Ondragenter	스크립트	요소를 유효한 놓기 대상으로 끌면 트리거됩니다.
ondragleave	스크립트	요소가 유효한 놓기 대상을 벗어날 때 트리거됩니다.
Ondragover	스크립트	요소를 유효한 놓기 대상 위로 끌면 트리거됩니다.
ondragstart	스크립트	드래그 작업 시작시 트리거
온 드롭	스크립트	드래그 된 요소가 드롭 될 때 트리거됩니다.
ondurationchange	스크립트	미디어 길이가 변경되면 트리거됩니다.
비어있는	스크립트	미디어 리소스 요소가 갑자기 비워지면 트리거됩니다.
계속	스크립트	미디어가 끝에 도달하면 트리거됩니다.
오류	스크립트	오류가 발생하면 트리거됩니다.
onfocus	스크립트	창이 포커스를받을 때 트리거됩니다.
onformchange	스크립트	양식이 변경 될 때 트리거됩니다.
onforminput	스크립트	양식이 사용자 입력을받을 때 트리거됩니다.
onhaschange	스크립트	문서가 변경되면 트리거됩니다.
입력	스크립트	요소가 사용자 입력을받을 때 트리거됩니다.
oninvalid	스크립트	요소가 유효하지 않을 때 트리거됩니다.
onkeydown	스크립트	키를 누를 때 트리거됩니다.
onkeypress	스크립트	키를 눌렀다 놓을 때 트리거됩니다.
onkeyup	스크립트	키를 놓을 때 트리거됩니다.
길 위에	스크립트	문서가로드 될 때 트리거됩니다.
onloadeddata	스크립트	미디어 데이터가로드 될 때 트리거됩니다.
onloadedmetadata	스크립트	미디어 요소의 기간 및 기타 미디어 데이터가로드 될 때 트리거됩니다.
onloadstart	스크립트	브라우저가 미디어 데이터를로드하기 시작할 때 트리거됩니다.
onmessage	스크립트	메시지가 트리거 될 때 트리거됩니다.
onmousedown	스크립트	마우스 버튼을 누를 때 트리거됩니다.
onmousemove	스크립트	마우스 포인터가 움직일 때 트리거됩니다.
onmouseout	스크립트	마우스 포인터가 요소 밖으로 이동할 때 트리거됩니다.
onmouseover	스크립트	마우스 포인터가 요소 위로 이동할 때 트리거됩니다.
onmouseup	스크립트	마우스 버튼을 놓을 때 트리거됩니다.
onmousewheel	스크립트	마우스 휠이 회전 할 때 트리거됩니다.
온라인	스크립트	문서가 오프라인이 될 때 트리거됩니다.
오노 인	스크립트	문서가 온라인 상태가되면 트리거됩니다.
ononline	스크립트	문서가 온라인 상태가되면 트리거됩니다.
onpagehide	스크립트	창이 숨겨지면 트리거됩니다.
onpageshow	스크립트	창이 표시 될 때 트리거됩니다.
onpause	스크립트	미디어 데이터가 일시 중지 될 때 트리거됩니다.
onplay	스크립트	미디어 데이터 재생이 시작될 때 트리거됩니다.
onplaying	스크립트	미디어 데이터 재생이 시작되면 트리거됩니다.
온팝 스테이트	스크립트	창의 기록이 변경 될 때 트리거됩니다.
진행 중	스크립트	브라우저가 미디어 데이터를 가져올 때 트리거됩니다.
onratechange	스크립트	미디어 데이터의 재생 속도가 변경되면 트리거됩니다.
onreadystatechange	스크립트	준비 상태가 변경 될 때 트리거됩니다.
Onredo	스크립트	문서가 다시 실행을 수행 할 때 트리거됩니다.
onresize	스크립트	창 크기가 조정될 때 트리거됩니다.
스크롤	스크립트	요소의 스크롤바가 스크롤 될 때 트리거됩니다.
찾다	스크립트	미디어 요소의 검색 속성이 더 이상 참이 아니고 검색이 종료 될 때 트리거됩니다.
onseeking	스크립트	미디어 요소의 검색 속성이 true이고 검색이 시작된 경우 트리거됩니다.
onselect	스크립트	요소가 선택되면 트리거됩니다.
설치	스크립트	미디어 데이터를 가져 오는 데 오류가있을 때 트리거됩니다.
onstorage	스크립트	문서가로드 될 때 트리거됩니다.
제출시	스크립트	양식이 제출 될 때 트리거됩니다.
onsuspend	스크립트	브라우저가 미디어 데이터를 가져 왔지만 전체 미디어 파일을 가져 오기 전에 중지 된 경우 트리거됩니다.
ontimeupdate	스크립트	미디어가 재생 위치를 변경할 때 트리거됩니다.
Onundo	스크립트	문서가 실행 취소를 수행 할 때 트리거됩니다.
언로드	스크립트	사용자가 문서를 떠날 때 트리거됩니다.
onvolumechange	스크립트	미디어가 볼륨을 변경할 때 트리거되며 볼륨이 "음소거"로 설정된 경우에도 트리거됩니다.
대기 중	스크립트	미디어 재생이 중지되었지만 다시 시작될 것으로 예상되는 경우 트리거됩니다.

Web Forms 2.0은 HTML4에있는 양식 기능의 확장입니다. HTML5의 양식 요소와 속성은 HTML4보다 더 높은 수준의 시맨틱 마크 업을 제공하며 HTML4에 필요한 많은 지루한 스크립팅 및 스타일링에서 해방됩니다.

HTML4의 <input> 요소

HTML4 입력 요소는 type 데이터 type.HTML4를 지정하는 속성은 다음 유형을 제공합니다-

Sr. 아니.	유형 및 설명
1	text 명목상 줄 바꿈이없는 자유 형식 텍스트 필드입니다.
2	password 명목상 줄 바꿈이없는 민감한 정보를위한 자유 형식 텍스트 필드입니다.
삼	checkbox 미리 정의 된 목록에서 0 개 이상의 값 집합입니다.
4	radio 열거 된 값입니다.
5	submit 자유로운 형태의 버튼은 양식 제출을 시작합니다.
6	file MIME 유형 및 선택적으로 파일 이름이있는 임의의 파일.
7	image 특정 이미지의 크기에 상대적인 좌표로, 마지막으로 선택한 값이어야하고 양식 제출을 시작해야한다는 추가 의미가 있습니다.
8	hidden 일반적으로 사용자에게 표시되지 않는 임의의 문자열입니다.
9	select 라디오 유형과 매우 유사한 열거 된 값입니다.
10	textarea 명목상 줄 바꿈 제한이없는 자유 형식 텍스트 필드입니다.
11	button 버튼과 관련된 모든 이벤트를 시작할 수있는 자유로운 형태의 버튼입니다.

다음은 레이블, 라디오 버튼 및 제출 버튼을 사용하는 간단한 예입니다.

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

HTML5의 <input> 요소

위에서 언급 한 속성 외에도 HTML5 입력 요소는 type속성. 아래에 나열되어 있습니다.

NOTE − 최신 버전을 사용하여 다음 예제를 모두 시도해보십시오. Opera 브라우저.

Sr. 아니.	유형 및 설명
1	날짜 시간 시간대가 UTC로 설정된 ISO 8601에 따라 인코딩 된 날짜 및 시간 (년, 월, 일,시, 분, 초, 초 단위)입니다.
2	datetime-local 시간대 정보없이 ISO 8601에 따라 인코딩 된 날짜 및 시간 (년, 월, 일,시, 분, 초, 초 단위)입니다.
삼	데이트 ISO 8601에 따라 인코딩 된 날짜 (년, 월, 일)입니다.
4	달 ISO 8601에 따라 인코딩 된 연도와 월로 구성된 날짜입니다.
5	주 ISO 8601에 따라 인코딩 된 연도와 주 번호로 구성된 날짜입니다.
6	시각 ISO 8601에 따라 인코딩 된 시간 (시, 분, 초, 분수 초)입니다.
7	번호 숫자 값만 허용합니다. step 속성은 정밀도를 지정하며 기본값은 1입니다.
8	범위 범위 유형은 숫자 범위의 값을 포함해야하는 입력 필드에 사용됩니다.
9	이메일 이메일 값만 허용합니다. 이 유형은 이메일 주소를 포함해야하는 입력 필드에 사용됩니다. 간단한 텍스트를 제출하려고하면 [email protected] 형식의 이메일 주소 만 입력해야합니다.
10	URL URL 값만 허용합니다. 이 유형은 URL 주소를 포함해야하는 입력 필드에 사용됩니다. 간단한 텍스트를 제출하려고하면 http://www.example.com 형식 또는 http://example.com 형식으로 URL 주소 만 입력해야합니다.

<output> 요소

HTML5는 스크립트로 작성된 출력과 같은 다양한 유형의 출력 결과를 나타내는 데 사용되는 새로운 요소 <output>을 도입했습니다.

당신은 사용할 수 있습니다 for계산에 영향을 준 문서에서 출력 요소와 다른 요소 간의 관계를 지정하는 속성 (예 : 입력 또는 매개 변수). for 속성의 값은 공백으로 구분 된 다른 요소의 ID 목록입니다.

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

다음 결과가 생성됩니다-

자리 표시 자 속성

HTML5는 placeholder. <input> 및 <textarea> 요소에 대한이 속성은 필드에 입력 할 수있는 내용에 대한 힌트를 사용자에게 제공합니다. 자리 표시 자 텍스트에는 캐리지 리턴 또는 줄 바꿈이 포함되지 않아야합니다.

다음은 자리 표시 자 속성에 대한 간단한 구문입니다.

<input type = "text" name = "search" placeholder = "search the web"/>

이 속성은 최신 버전의 Mozilla, Safari 및 Crome 브라우저에서만 지원됩니다.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

이것은 다음 결과를 생성합니다-

자동 초점 속성

이것은 문서를로드 할 때 JavaScript로 쉽게 프로그래밍 할 수있는 간단한 원스텝 패턴으로 특정 양식 필드 하나에 자동으로 초점을 맞 춥니 다.

HTML5는 autofocus 다음과 같이 사용됩니다-

<input type = "text" name = "search" autofocus/>

이 속성은 최신 버전의 Mozilla, Safari 및 Chrome 브라우저에서만 지원됩니다.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

필수 속성

이제 HTML5에서 다음과 같은 새 속성을 도입했기 때문에 빈 텍스트 상자와 같은 클라이언트 측 유효성 검사를 위해 JavaScript를 사용할 필요가 없습니다. required 다음과 같이 사용되며 가치가 있다고 주장합니다.

<input type = "text" name = "search" required/>

이 속성은 최신 버전의 Mozilla, Safari 및 Chrome 브라우저에서만 지원됩니다.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

다음 결과가 생성됩니다-

SVG는 Scalable V엑터 Graphics는 XML로 2D 그래픽 및 그래픽 응용 프로그램을 설명하는 언어이며 XML은 SVG 뷰어에 의해 렌더링됩니다.

SVG는 원형 차트, X, Y 좌표계의 2 차원 그래프 등과 같은 벡터 유형 다이어그램에 주로 유용합니다.

SVG 2003 년 14 1월 W3C의 권고안이되었고, 당신은에서 SVG 사양의 최신 버전을 확인할 수 있습니다 SVG 사양 .

SVG 파일보기

대부분의 웹 브라우저는 PNG, GIF 및 JPG를 표시 할 수있는 것처럼 SVG를 표시 할 수 있습니다. Internet Explorer 사용자는 브라우저에서 SVG를 보려면 Adobe SVG Viewer 를 설치해야 할 수 있습니다.

HTML5에 SVG 포함

HTML5를 사용하면 다음을 사용하여 SVG를 직접 삽입 할 수 있습니다. <svg>...</svg> 다음과 같은 간단한 구문이있는 태그-

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

Firefox 3.7은 또한 다음 단계를 사용하여 HTML5를 활성화 할 수있는 구성 옵션 ( "about : config")을 도입했습니다.

유형 about:config Firefox 주소 표시 줄에서.
"조심 할게요 약속 해요!" 표시되는 경고 메시지에서 버튼을 클릭하십시오 (그리고이를 준수하는지 확인하십시오!).
유형 html5.enable 페이지 상단의 필터 표시 줄에
현재는 비활성화되어 있으므로 클릭하여 값을 true로 전환합니다.

이제 Firefox HTML5 파서를 활성화하고 다음 예제를 실험 할 수 있습니다.