HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 새 요소

HTML5의 의미 있는 태그 및 속성은 개발자가 명확한 웹 페이지 레이아웃을 쉽게 구현할 수 있도록 도와주며, CSS와 함께3의 효과적인 렌더링과 풍부하고 유연한 웹 페이지를 빠르게 구축하는 것은 매우 간단합니다.

HTML5 새 요소

부터1999년 이후 HTML 4.01 에서 많이 변했습니다. 오늘, HTML 4.01중 몇 가지는 폐기되었습니다. 이 요소는 HTML5에서 제거되거나 다시 정의되었습니다.

오늘의 인터넷 애플리케이션을 더 잘 처리하기 위해 HTML5많은 새로운 요소 및 기능을 추가했습니다. 예를 들어: 그래픽 그리기, 멀티미디어 내용, 더 나은 페이지 구조, 더 나은 형식 처리하고, 몇 가지 API 드래그 앤 드롭 요소, 위치, 웹 페이지 포함 애플리케이션 캐시, 저장, 네트워크 워커 등.

HTML5의 새 태그 요소

<header>페이지나 영역의 헤더 정의;
<footer>페이지나 영역의 尾部 정의;
<nav>페이지나 영역의 네비게이션 영역 정의;
<section>페이지의 논리적 영역이나 내용 조합;
<article>본문이나 완전한 내용 정의;
<aside>보완이나 관련 내용 정의;

nav네비게이션 태그

예제

!doctype html<html><head>
<meta charset="UTF-8">
<title>HTML5　nav네비게이션 태그 사용/title>
</head>
<body>
<nav>
　　　　<ul>
　　　　　　　　<li><a href="#">Home</a></li>
　　　　　　　　<li><a href="#">One</a></li>
　　　　　　　　<li><a href="#">Two</a></li>
　　　　　　　　<li><a href="#">Three</a></li>
　　　　</ul>
</nav>
</body></html>

テストを見て‹/›

<header>태그로 구현

예제

!doctype html
<html>
<head>
<meta charset="UTF-8">
title<header>태그로 구현 by ko.oldtoolbag.com</title>
</head>
<body>
<header id="page_header">
　　　　<h1>Header</h1>
</header>
</body>
</html>

テストを見て‹/›

<footer>태그로 구현

예제

!doctype html
<html>
<head>
<meta charset="UTF-8">
title<footer>태그로 구현 by ko.oldtoolbag.com</title>
</head>
<body>
<footer>태그로 구현
<footer id="page_footer">
　　　　<h2>Footer</h2>
</footer>
</body>
</html>

テストを見て‹/›

<section>블록과<article>문서

예제

!doctype html
<html>
<head>
<meta charset="UTF-8">
title<section>와<article>태그로 구현 by ko.oldtoolbag.com</title>
</head>
<body>
<section>と<article>タグを実現
<section　id="posts">
　　　　　　　　/*複数の<　article>を含むことができます*/
　　　　<article　class="post">
　　　　　　　　　/*articleの内容*/
　　　　　　　　</article>
　　　　　　　　<article　class="post">
　　　　　　　　　/*articleの内容*/
　　　　　　　　</article>
</section>
</body>
</html>

テストを見て‹/›

<canvas>の新しい要素

タグ	説明
<canvas>	グラフや他の画像などのグラフィックを定義するタグです。このタグはJavaScriptのドローAPIに基づいています。

新しいマルチメディア要素

タグ	説明
<audio>	オーディオコンテンツを定義します。
<video>	ビデオ（videoまたはmovie）を定義します。
<source>	マルチメディアリソース<video>や<audio>を定義します。
<embed>	埋め込まれた内容、例えばプラグインを定義します。
<track>	例えば<video>や<audio>などのメディア要素に対して外部テキストトラックを規定します。

新しいフォーム要素

タグ	説明
<datalist>	オプションリストを定義します。この要素をinput要素と組み合わせて、inputが可能な値を定義します。
<keygen>	フォームのキーゲネレーターフィールドを規定します。
<output>	異なるタイプの出力、例えばスクリプトの出力を定義します。

新しいセマンティックおよび構造要素

HTML5より良いページ構造を作成するために新しい要素を提供します：

タグ	説明
<article>	ページの独立した内容エリアを定義します。
<aside>	ページのサイドバー内容を定義します。
<bdi>	テキストを親要素のテキスト方向設定から離脱させることができるように設定します。
<command>	コマンドボタン、例えばラジオボタン、チェックボックス、またはボタンを定義します。
<details>	ドキュメントまたはドキュメントの一部の詳細を説明するために使用されます。
<dialog>	ダイアログ、例えばポップアップを定義します。
<summary>	details要素のタイトルを含むタグ
<figure>	独立した流内容（画像、グラフ、写真、コードなど）を規定します。
<figcaption>	<figure>要素のタイトルを定義します。
<footer>	sectionまたはドキュメントのフッターを定義します。
<header>	ドキュメントのヘッダーエリアを定義します。
<mark>	マーク付きのテキストを定義します。
<meter>	測定単位を定義します。最大値と最小値が既知の測定にのみ使用されます。
<nav>	ナビゲーションリンクの部分を定義します。
<progress>	定义任何类型的任务的进度。
<ruby>	定义ruby注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容。
<section>	문서에서 섹션(section, 区段)을 정의합니다.
<time>	날짜나 시간을 정의합니다.
<wbr>	문자에서 적절한 위치에 개행 기호를 추가할 수 있습니다.

已移除的元素

以下的 HTML 4.01 元素在HTML5중已经被删除:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML5 내장 SVG HTML5 브라우저 지원