html5 Tag Refarence

このページは、WEB標準を基本とする、nandenが、 製作したものです。 HTML5の各タグのRefarenceを、表示します。

HTML5 Tag 一覧表

Tag Descriotion Syntax
<a> ハイパーリンクを定義する <a href="url">nanden.co.jp!</a>
<abbr> 略語または頭字語を定義する <abbr title="World Health Organization">WHO</abbr>
<address> ドキュメントの作成者/所有者の連絡先情報を定義します。 <address>
 Written by <a href="mailto:info@nanden.co.jp">Author</a>
 Visit us at:nanden.co.jp
 4-10-1 Fukushima Okayama Japan
</address>
<area> イメージマップ内の領域を定義する <img src="画像の場所と画像名" alt="代替え文字" usemap="#planetmap">
<map name="マップ名">
  <area shape="rect" coords="0,0,82,126" href="url_1" alt="代替え文字">
  <area shape="circle" coords="90,58,3" href="url_2" alt="代替え文字">
  <area shape="circle" coords="124,58,8" href="url_3" alt="代替え文字">
</map>
このような方法を、クリカブルマップ という。
<article> 記事を定義する <article>
  <h1>見出し</h1>
  <p>段落</p>
</article>
<aside> ページコンテンツとは別にコンテンツを定義する   <補足> <p>今年の夏、家族と私は、後楽園を訪れました。</p>
<aside>
  <h4>後楽園</h4>
  <p>後楽園は、日本三代公園のひとつです。</p>
</aside>
<audio> サウンドコンテンツを定義する <audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  お使いのブラウザはオーディオタグをサポートしていません。
  MacとWindowsに対応するため二つのファイルを、指定します。
</audio>
<b> 太字のテキストを定義する <p>これは通常のテキストです。 <b>これは太字です</ b></p>
<base> ドキュメント内のすべての相対URLのベースURL /ターゲットを指定します。 <head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>
<body>
  <img src="画像の場所と画像名" alt="画像の代替え文字">
  <a href="url">url</a>
</body>
<bdi> 他のテキストとは異なる方向に書式設定されたテキストの一部を分離する <ul>
  <li>User <bdi>hrefs</bdi>: 60 points</li>
  <li>User <bdi>jdoe</bd>: 80 points</li>
  <li>User <bd>>إيان</bd>: 90 points</li>
</u>
<bdo> 現在のテキスト方向をオーバーライドします。 <bdo dir="rtl">
  This text will go right-to-left.
</bdo>
<blockquote> 別のソースから引用されたセクションを定義します。 <blockquote cite="http://www.worldwildlife.org/who/index.html">
  WWFは、世界をリードする保護団体、
  50年間、自然の未来を守ってきました。
  WWFは100カ国で活動しており、米国では120万人、世界では500万人近くの会員が支援しています。
</blockquote>
<body> ドキュメントの本文を定義する <html>
 <head>
  <titl>大見出し</title>
 </head>
 <body>
   この段落に、記事の内容を書く
 </body>
</html>
<br> 1回の改行を定義する <br>は、breakを表します。つまり、文章の終了を意味し、ブラウザの仕様により改行します。
<button> クリック可能なボタンを定義する <button type="button">クリックボタン</button>
<canvas> スクリプティング(通常はJavaScript)を使用して、 グラフィックを描画するために使用されます。 <canvas id="myCanvas"></canvas>
<script>
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 ctx.fillStyle = "#FF0000";
 ctx.fillRect(0, 0, 80, 80);
</script>
<caption> 表キャプションを定義する <table>
 <caption>今月の貯蓄</caption>
 <tr>
  <th>月</th>
  <th>貯蓄</th>
 </tr>
 <tr>
  <td>1月</td>
  <td>10,000円</td>
 </tr>
</table>
<cite> 作品のタイトルを定義する <p>
  <cite>この写真</cite> 2017年1月に撮影されたものです。
</p>
<code> コンピュータコードを定義する <code>コンピュータコード</code>
<col> <colgroup>要素内の各列の列プロパティを指定します。 <table>
 <colgroup>
  <col span="2" style="background-color:red"> <!-- この部分は、赤色 -->
  <col style="background-color:yellow"> <!-- この部分は、黄色 -->
 </colgroup>
 <tr>
  <th>ISBN</th>
  <th>Title</th>
  <th>Price</th>
 </tr>
 <tr>
  <td>3476896</td>
  <td>My first HTML</td>
  <td>$53</td>
 </tr>
</table>
<colgroup> 書式設定のためにテーブル内の1つ以上の列のグループを指定します。 <table>
 <colgroup>
  <col span="2" style="background-color:red">
  <col style="background-color:yellow">
 </colgroup>
 <tr>
  <th>ISBN</th>
  <th>Title</th>
  <th>Price</th>
 </tr>
 <tr>
  <td>3476896</td>
  <td>My first HTML</td>
  <td>$53</td>
 </tr>
</table>
<datalist> 入力コントロールの事前定義されたオプションのリストを指定します。 <input list="browsers">
 
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>
ブラウザの種類を、リスト表示した例
<dd> 説明リスト内の用語の説明/値を定義します。 <dl>
 <dt>用語</dt>
 <dd>用語の説明</dd>
 <dt>ミルク</dt>
 <dd>白い飲みもの</dd>
</dl>
<del> ドキュメントから削除されたテキストを定義します。 <p>
 私の、お気に入りは、 <del>青色</del> <ins>赤色</ins>です。!
</p>
青色ではなく、赤色ということを、元の文章を残し、修正したことを表す。
<details> ユーザーが表示または非表示にできる追加の詳細を定義します。 <details>
 <summary>Copyright 1999-2017.</summary>
 <p> - by nanden Data. All Rights Reserved.</p>
 <p>このウェブサイト上のすべてのコンテンツおよびグラフィックスは、nandenの所有物です。</p>
</details>
<dfn> 用語の定義的なインスタンスを表します。 <p>
 <dfn>HTML</dfn>は、ウェブページを作成するための標準マークアップ言語です。
</p>
<dialog> ダイアログボックスまたはウィンドウを定義する <table>
 <tr>
  <th>1月 <dialog open>の、ダイアログウィンドウは、</dialog></th>
  <th>2月</th>
  <th>3月</th>
 </tr>
 <tr>
  <td>31日</td>
  <td>28日</td>
  <td>31日</td>
 </tr>
</table>
<div> ドキュメント内のセクションを定義する <div style="color:#0000FF">
 <h3>ここは、見出しです。</h3>
  <p>この部分は、段落です。</p>
</div>
<dl> 記述リストを定義する <dl>
 <dt>コーヒー</dt>
 <dd>黒くあったかい飲み物</dd>
 <dt>ミルク</dt>
 <dd>白く冷たい飲み物</dd>
</dl>
<dt> 記述リストに用語/名前を定義する <dl>
 <dt>Coffee</dt>
 <dd>Black hot drink</dd>
 <dt>Milk</dt>
 <dd>White cold drink</dd>
</dl>
<em> 強調されたテキストを定義する <em>
 Emphasized text
</em>
emは、Emphasized の省略語であることを、理解する。
<embed> 外部(非HTML)アプリケーションのコンテナを定義します。 <embed src="helloworld.swf">
<fieldset> フォーム内の関連要素をグループ化する <form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>
<figcaption> <figure>要素のキャプションを定義します。 <figure>
 <img src="img_pulpit.jpg" alt="The Pulpit Rock">
 <figcaption>
  Fig1.- ノルウェーのpulpit rockの眺め。-
 </figcaption>
</figure>
<figure> 自己完結型のコンテンツを指定する <figure>
 <img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>
<font> フォントサイズ、フォント、テキストの色を指定します。 <font size="3" color="red">
 This is some text!
</font>
<font size="2" color="blue">
 This is some text!
</font>
<font face="verdana" color="green">
 This is some text!
</font>
<footer> ドキュメントまたはセクションのフッターを定義する <footer>
 <p>
  Posted by: Hege Refsnes
 </p>
 <p>
  ご連絡先: <a href="mailto:e_mail address">e_mail</a>
 </p>
</footer>
<form> ユーザー入力用のHTMLフォームを定義します。 <form action="demo_form.asp" method="get">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="Submit">
</form>
<h1>to<h6> HTML見出しを定義する <h1>大見出し</h1>
<h2>中見出し</h2>
<h3>見出し</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
<head> ドキュメントに関する情報を定義する <!DOCTYPE html>
<html>
<head>
 <title>タイトル;/title>
</head>
 
<body>
 The content of the document......
</body>
</html>
<header> ドキュメントまたはセクションのヘッダーを定義します。 <article>
 <header>
  <h1>Most important heading here</h1>
  <h2>Less important heading here</h2>
   <p>
    Some additional information here
   </p>
 </header>
 <p>
  Lorem Ipsum dolor set amet....
 </p>
</article>
<hr> コンテンツにテーマ別の変更を定義する: horizontal rule の略語 <h1>HTML</h1>
 <p>
  HTML is a language for describing web pages.....
 </p>
 
 <hr>
 
 <h2>CSS</h2>
  <p>
   CSS defines how to display HTML elements.....
  </p>
<html> HTMLドキュメントのルートを定義します。 <!DOCTYPE HTML>
<html>
<head>
<title>タイトル</title>
</head>
 
<body>
 content領域
</body>
</html>
<i> 代替の音声または気分のテキストの一部を定義する:Italicの略 <p>
 He named his car <i>The lightning</i>, because it was very fast.
</p>
<iframe> インラインフレームを定義する <iframe src="url"></iframe>
<img> 画像を定義する: imagesの略 <img src="画像の位置と画像名" alt="画像代替text">
<input> 入力コントロールを定義する <form action="demo_form.asp">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="Submit">
</form>
<ins> ドキュメントに挿入されたテキストを定義します。 <p>
 お気に入りの色は、<del>blue</del> <ins>red</ins>!
</p>
<kdb> キーボード入力を定義する <kbd>Keyboard input</kbd>
<keygen> キーペアジェネレータフィールドを定義します(フォームの場合) <form action="demo_keygen.asp" method="get">
 Username: <input type="text" name="usr_name">
 Encryption: <keygen name="security">
 <input type="submit">
</form>
<label> <input>要素のラベルを定義します。 <form action="demo_form.asp">
 <label for="male">Male</label>
 <input type="radio" name="gender" id="male" value="male"><br>
 <label for="female">Female</label>
 <input type="radio" name="gender" id="female" value="female"><br>
 <label for="other">Other</label>
 <input type="radio" name="gender" id="other" value="other"><br><br>
 <input type="submit" value="Submit">
</form>
<li> リストアイテムを定義する <ol>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ol>
 
<ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ul>
<link> ドキュメントと外部リソースとの関係を定義します(ほとんどはスタイルシートへのリンクに使用されます) <link rel="stylesheet" type="text/css" href="theme.css">
<main> ドキュメントのメインコンテンツを指定します。 <main>
 <h1>Web Browsers</h1>
 <p>
   Google Chrome, Firefox, and Internet Explorer are the most used browsers today.
  </p>
 
  <article>
   <h2>Google Chrome</h2>
    <p>
     Google Chrome is a free, open-source web browser developed by Google,released in 2008.
    </p>
  </article>
 
  <article>
   <h2>Internet Explorer</h2>
    <p>
     Internet Explorer is a free web browser from Microsoft, released in 1995.
    </p>
  </article>
 
  <article>
   <h2>Mozilla Firefox</h2>
    <p>
     Firefox is a free, open-source web browser from Mozilla, released in 2004.
    </p>
  </article>
</main>
クライアント側のイメージマップを定義する <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
 
<map name="planetmap">
 <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
 <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
 <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
<mark> 強調表示されたテキストを定義する <p>
 Do not forget to buy <mark>milk</mark> today.
</p>
<menu> コマンドのリスト/メニューを定義する <menu type="context" id="mymenu">
 <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
 <menu label="Share on...">
  <menuitem label="Twitter" icon="ico_twitter.png"
  onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
 </menuitem>
 <menuitem label="Facebook" icon="ico_facebook.png"
  onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
 </menuitem>
</menu>
<menuitem label="Email This Page"
 onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
<menuitem> ユーザーがポップアップメニューから呼び出すことができる コマンド/メニュー項目を定義します。 <menu type="context" id="mymenu">
 <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
 <menu label="Share on...">
  <menuitem label="Twitter" icon="ico_twitter.png"
  onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
 </menuitem>
 <menuitem label="Facebook" icon="ico_facebook.png"
  onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
 </menuitem>
</menu>
<menuitem label="Email This Page"
 onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
<meta> HTML文書に関するメタデータを定義する <head>
 <meta charset="UTF-8">
 <meta name="description" content="Free Web tutorials">
 <meta name="keywords" content="HTML,CSS,XML,JavaScript">
 <meta name="author" content="John Doe">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<meter> 既知の範囲(ゲージ)内のスカラー測定値を定義します。 <meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
<nav> ナビゲーションリンクを定義する <nav>
 <a href="/html/">HTML</a> |
 <a href="/css/">CSS</a> |
 <a href="/js/">JavaScript</a> |
 <a href="/jquery/">jQuery</a>
</nav>
<noscript> クライアント側のスクリプトをサポートしていないユーザーの代替コンテンツを定義します。 <script>
 document.write("Hello World!")
</script>
<noscript>
 Your browser does not support JavaScript!
</noscript>
<object> 埋め込みオブジェクトを定義する <object width="400" height="400" data="helloworld.swf"></object>
<ol> 順序付きリストを定義する <ol>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ol>
 
<ol start="50">
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ol>
<optgroup> ドロップダウンリストに関連するオプションのグループを定義します。 <select>
 <optgroup label="Swedish Cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
 </optgroup>
 <optgroup label="German Cars">
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
 </optgroup>
</select>
<option> ドロップダウンリストでオプションを定義する <select>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="opel">Opel</option>
 <option value="audi">Audi</option>
</select>
<output> 計算結果を定義する <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
 <input type="range" id="a" value="50">100
 +<input type="number" id="b" value="50">
 =<output name="x" for="a b"></output>
</form>
<p>(paragraph) 段落を定義する <p>
 This is some text in a paragraph.
</p>
<pram> オブジェクトのパラメータを定義する <object data="horse.wav">
 <param name="autoplay" value="true">
</object>
<picture> 複数のイメージリソース用のコンテナを定義する <picture>
 <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
 <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
 <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<pre> あらかじめフォーマットされたテキストを定義する
(preformatted)
<pre>
 Text in a pre element
 is displayed in a fixed-width
 font, and it preserves
 both spaces and
 line breaks
</pre>
<progress> タスクの進行状況を表します。 <progress value="22" max="100"></progress>
<q> 短い引用を定義する <p>  WWF's goal is to:
 <q>Build a future where people live in harmony with nature.</q>
 We hope they succeed.
</p>
<rp> Rubyアノテーションをサポートしていないブラウザで 何を表示するかを定義します。 <ruby>
 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
<rt> 文字の説明/発音を定義する(東アジアのタイポグラフィーの場合) <ruby>
 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
<ruby> ルビ注釈を定義する(東アジアのタイポグラフィー用) <ruby>
 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
<s> もはや正しいテキストを定義しない <p>
 <s>My car is blue.</s>
</p>
<p>
 My new car is silver.
</p>
<samp> コンピュータプログラムからのサンプル出力を定義する <samp>Sample output from a computer program</samp>
<script> クライアント側スクリプトを定義する <script>
 document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<section> ドキュメント内のセクションを定義する <section>
 <h1>WWF</h1>
  <p>
   The World Wide Fund for Nature (WWF) is....
  </p>
</section>
<select> ドロップダウンリストを定義します。 <select>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>
<small> 小さなテキストを定義する <p>
 W3Schools.com - the world's largest web development site.
</p>
<p>
 <small>Copyright 1999-2050 by Refsnes Data</small>
</p>
<source> メディア要素の複数のメディアリソースを定義します (<video>および<audio>)。 <audio controls>
 <source src="horse.ogg" type="audio/ogg">
 <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>
<span> ドキュメント内のセクションを定義する <p>
 My mother has <span style="color:blue">blue</span> eyes.
</p>
<strong> 重要なテキストを定義する <strong>Strong text</strong>
<style> ドキュメントのスタイル情報を定義する <html>
<head>
<style>
 h1 {color:red;}
 p {color:blue;}
</style>
</head>
<body>
 
 <h1>A heading</h1>
  <p>
   A paragraph.
  </p>
 
</body>
</html>
<sub> 添字付きテキストを定義する <p>
 This text contains <sub>subscript</sub> text.
</p>
<summary> <details>要素の目に見える見出しを定義する <details>
 <summary>Copyright 1999-2014.</summary>
 <p>
   - by Refsnes Data. All Rights Reserved. -
 </p>
 <p>
  All content and graphics on this web site are the property of the company Refsnes Data.
 </p>
</details>
<sup> 上付きのテキストを定義する <p>
 This text contains <sup>superscript</sup> text.
</p>
<table> テーブルを定義する <table>
 <tr>
  <th>Month</th>
  <th>Savings</th>
 </tr>
 <tr>
  <td>January</td>
  <td>$100</td>
 </tr>
</table>
<tbody> テーブル内の本文コンテンツをグループ化する <table>
 <thead>
  <tr>
   <th>Month</th>
   <th>Savings</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td>Sum</td>
   <td>$180</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>January</td>
   <td>$100</td>
  </tr>
  <tr>
   <td>February</td>
   <td>$80</td>
  </tr>
 </tbody>
</table>
<td> テーブル内のセルを定義する <table>
 <tr>
  <td>Cell A</td>
  <td>Cell B</td>
 </tr>
</table>
<textarea> 複数行入力コントロール(テキストエリア)を定義します。 <textarea rows="4" cols="50">
 ウェブサイトの作成方法を学びます。 私たちは、すべてのWeb開発技術で無料のチュートリアルを提供しています。
</textarea>
<tfoot> テーブルのフッターコンテンツをグループ化する <table>
 <thead>
  <tr>
   <th>Month</th>
   <th>Savings</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td>Sum</td>
   <td>$180</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>January</td>
   <td>$100</td>
  </tr>
  <tr>
   <td>February</td>
   <td>$80</td>
  </tr>
 </tbody>
</table>
<th> 表のヘッダーセルを定義します。 <table>
 <tr>
  <th>Month</th>
  <th>Savings</th>
 </tr>
 <tr>
  <td>January</td>
  <td>$100</td>
 </tr>
</table>
<thead> テーブルのヘッダコンテンツをグループ化する <table>
 <thead>
  <tr>
   <th>Month</th>
   <th>Savings</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td>Sum</td>
   <td>$180</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>January</td>
   <td>$100</td>
  </tr>
  <tr>
   <td>February</td>
   <td>$80</td>
  </tr>
 </tbody>
</table>
<time> 日付/時刻を定義する <p>
 We open at <time>10:00</time> every morning.
</p>
 
<p>
 I have a date on <time datetime="2008-02-14 20:00">Valentines day</time.>
</p>
<title> ドキュメントのタイトルを定義します。 <!DOCTYPE html>
<html>
 
<head>
 <title>HTML Reference</title>
</head>
 
<body>
 The content of the document......
</body>
 
</html>
<tr> テーブル内の行を定義する <table>
 <tr>
  <th>Month</th>
  <th>Savings</th>
 </tr>
 <tr>
  <td>January</td>
  <td>$100</td>
 </tr>
</table>
<track> メディア要素のテキストトラックを定義します (<video>および<audio>)。 <video width="320" height="240" controls>
 <source src="forrest_gump.mp4" type="video/mp4">
 <source src="forrest_gump.ogg" type="video/ogg">
 <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
 <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
<u> 通常のテキストとスタイル的に異なる下線付きテキストを定義します。 <p>
 This is a <u>parragraph</u>.
</p>
<ul> 順序付けられていないリストを定義する <ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ul>
<var> 変数を定義する <var>Variable</var>
<video> ビデオまたはムービーを定義する <video width="320" height="240" controls>
 <source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
 Your browser does not support the video tag.
</video>
<wbr> 可能な改行を定義する <p>
 AJAXを学ぶには、XML<wbr>Http</wbr>Requestオブジェクトに精通していなければなりません。
</p>