スポンサーリンク

HTML 5 リファレンスと記述例

HTML 5

近年のスマートフォンの普及と Windows XP のサポート終了間近ということが影響し、これからのサイト作成の主流となる HTML 5 + CSS 3 というスタイルのサイトが増えてきました。
またこれまでの主流だった HTML 4 に代わり今後の主流と思われてきた XHTML が活動終了になったことも、HTML 5 に移行する後押しになったとも思われます。
これからサイト作成を覚えようという方は HTML 5 + CSS 3 で覚えましょう。

HTML 5 は記述がシンプルになったと書かれているサイトも多く見られますが、実際にはそうでもありません。
便利なタグが増えた、スマートフォンに対応し易くなった、画像を使わなくても装飾が豊富に出来るようになった、などの特徴があります。
最低限必須の記述に一般的に記述するべきものを加えると以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<base href="相対パスの基準URLを指定します。通常はトップページのディレクトリを記入します">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="スタイルシート「.css」ファイルのURL" />
<script src="javascript「.js」ファイルのURL"></script>
<meta name="robots" content="ALL" />
<link rel="shortcut icon" href="設定するなら画像ファイルのURL" />
<title>ページのタイトルを入力</title>
<meta name="description" content="入力するならサイトの説明文" />
<meta name="keywords" content="キーワードを「,」で区切って記入" />
</head>
<body>

コンテンツ入力

</body>
</html>

HTML 5 リファレンス

※=HTML 5 で新たに追加されたタグ

メタデータ

<head>
ヘッダ情報
<title>
タイトル
<base>
相対パスの基準URLを指定
<link>
リンクする外部ファイルを指定
<meta>
情報(メタデータ)を指定
<style>
スタイルシートを記述

スクリプト

<script>
スクリプトを組み込む
<noscript>
スクリプトが動作しない環境用の表示内容を指定

セクション

<body>
文書の本体
<section>
※セクションであることを示す
<nav>
※ナビゲーションであることを示す
<article>
※記事であることを示す
<aside>
※補足情報のセクションであることを示す
<h1>-<h6>
見出し
<header>
※ヘッダであることを示す
<footer>
※フッタであることを示す
<address>
連絡先を示す

コンテンツの分類

<p>
段落
<hr>
水平線
<pre>
半角スペースや改行をそのまま表示する
<blockquote>
引用セクションであることを表す
<ol>
連番のリストを表示する
<ul>
リストを表示する
<li>
リストの項目
<dl>
説明リスト
<dt>
説明する言葉を表示
<dd>
説明を表示
<figure>
※図表であることを示す
<figcaption>
※図表のキャプションを示す
<div>
範囲を定義する
<main>
メインコンテンツであることを示す

テキストの意味

<a>
ハイパーリンクを指定
<em>
強調
<strong>
最強調
<small>
細目のような注釈
<s>
打ち消し線
<cite>
作品のタイトルを表す
<q>
引用句・引用文であることを表す
<dfn>
用語が使用されていることを示す
<abbr>
略語や頭字語であることを表す
<time>
※日付や時刻を正確に示す
<code>
プログラムなどのコードであることを示す
<var>
変数であることを示す
<samp>
プログラムによる出力結果のサンプルであることを示す
<kbd>
ユーザーが入力する内容であることを示す
<sub>
下付き文字を表す
<sup>
上付き文字を表す
<i>
声や心の中で思ったことなど、他と区別したいテキストを表す
<b>
太字
<mark>
※文書内の該当テキストを目立たせる
<ruby>
※ルビをふる
<rt>
※ルビのテキストを指定する
<rp>
※ルビを囲む記号を指定する
<bdo>
文字表記の方向を指定する
<span>
範囲として定義する
<br>
改行する
<wbr>
※改行しても良い位置を示す

コンテンツの埋め込み

<img>
画像を表示する
<iframe>
インラインフレームを作る
<embed>
※プラグインデータを埋め込む
<object>
文書に外部リソースを埋め込む
<param>
プラグインのパラメータを指定する
<video>
※動画を再生する
<audio>
※音声を再生する
<source>
※動画や音声などのURLや種類を指定する
<canvas>
※図形を描く
<map>
イメージマップを作成する
<area>
イメージマップのハイパーリンク領域を設定する

テーブル

<table>
テーブルを作成する
<caption>
テーブルにキャプションをつける
<colgroup>
表の縦列をグループ化する
<col>
表の縦列の属性やスタイルを指定する
<tbody>
テーブルのボディ部分を定義する
<thead>
テーブルのヘッダ部分を定義する
<tfoot>
テーブルのフッタ部分を定義する
<tr>
テーブルの横一行を定義する
<td>
テーブルのデータセルを作成する
<th>
テーブルの見出しセルを作成する

フォーム

<form>
フォームを作る
<fieldset>
フォームの入力項目をグループ化する
<legend>
フォームの入力項目グループにキャプションを付ける
<label>
フォーム部品と項目名(ラベル)を関連付ける
<button>
ボタンを作成
<select>
セレクトボックスを作成
<datalist>
※入力候補となるデータリストを定義
<optgroup>
選択肢をグループ化する
<option>
セレクトボックスや入力候補リストの選択肢を指定する
<textarea>
複数行のテキスト入力欄を作成
<keygen>
※フォーム送信時にキーを発行する
<output>
※計算結果を示す
<progress>
※タスク完了までの進行状況を示す
<meter>
※規定範囲内の測定値を表す
<input>
フォームを構成する様々な入力部品を作成
<input type="hidden">
画面上は表示されない隠しデータを指定
<input type="text">
一行テキストボックスを作成
<input type="search">
※検索テキストの入力欄を作成
<input type="tel">
※電話番号の入力欄を作成する
<input type="url">
※URLの入力欄を作成する
<input type="email">
※メールアドレスの入力欄を作成
<input type="password">
パスワード入力欄を作成
<input type="datetime">
※協定世界時による日時の入力欄を作成
<input type="date">
※日付の入力欄を作成
<input type="month">
※月の入力欄を作成
<input type="week">
※週の入力欄を作成
<input type="time">
※時間の入力欄を作成
<input type="datetime-local">
※ローカル日時の入力欄を作成
<input type="number">
※数値の入力欄を作成
<input type="range">
※レンジ入力欄を作成
<input type="color">
※色の入力欄を作成
<input type="checkbox">
チェックボックスを作成
<input type="radio">
ラジオボタンを作成
<input type="file">
サーバーへファイルを送信する
<input type="submit">
送信ボタンを作成
<input type="image">
画像ボタンを作成
<input type="reset">
リセットボタンを作成
<input type="button">
汎用ボタンを作成
<input autofocus>
※入力欄にカーソルを当てて自動フォーカスする
<input placeholder>
※入力欄に初期表示する内容を指定
<input required>
※入力必須であることを示す
<input pattern>
※正規表現で入力値のパターンを指定
<input min max>
※入力できる最小値と最大値を指定
<input step>
※入力欄で刻むステップ値を指定
<input autocomplete>
※入力候補を提示して入力内容を自動補完
<input multiple>
※複数の値を入力・選択できるようにする

挿入と削除

<ins>
追加された部分であることを示す
<del>
削除された部分であることを示す

ユーザーによる操作

<details>
※備考や操作手段などの詳細情報を示す
<summary>
※<details>の内容の要約を示す
<command>
※操作メニューの各コマンドを指定
<menu>
※操作メニューを作成
スポンサーリンク
sns1 RSS Feedly はてな Line Tweet FaceBook sns2 Follow Follow none none none none
スポンサーリンク

コメント

_____________________________________________________________________________________________________
net PV