header/hgroup/keygen

<header>

header要素は、イントロダクションやナビゲーションの支援となるグループを表します。

※ <header>の中には、通常は<h2><h6>や<hgroup>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。 他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。

HTML5コーディングならココ!

<header>
<h1>オジョギリ・ダー</h1>
<nav>
<ul>
<li><a href=”aoyama/material.html”> 青山マテリアル/素材だよね </a></li>
<li><a href=”aoyama/terumasa.html”> 青山テルマサ/だれだろうね </a></li>
<li><a href=”aoyama/chikuwa.html”> 青山『ちくわ大明神』テルマ/いまのだれだ </a></li>
</ul>
</nav>
<h2>青山マテリアル情報</h2>
<p>壁紙入りました</p>
</header>

<hgroup>

hgroup要素は、セクションの見出しを表します。この要素は、小見出し、副題、キャッチフレーズなど、見出しが複数のレベルを持つとき、h2h6要素のセットをグループ化するために使います。

ドキュメントの要約やアウトラインなどの目的においては、hgroup要素のテキストは、そのhgroup要素の子孫にh2h6要素があれば、その中で最もランクが高いh2h6要素のテキストとなるよう定義されます。そのランクを持った要素が複数ある場合は、そのうち最初の要素となります。そのような要素がなければ、このhgroup要素のテキストは空文字列となります。

hgroup要素の中にヘッディング・コンテンツの要素が他にあれば、それは小見出しや副題を表すことになります。

hgroup要素はセクションの見出しですから、文書を要約したり概要を把握する目的ために、一定のルールに従って見出しのテキスト内容とランクが決められます。見出しのテキスト内容は、<hgroup>~</hgroup>の下にある<h1>-<h6>の中で最もランクの高い要素のテキスト内容となります。それ以外は小見出しや副題を表すことになります。また、hgroup要素の見出しランクは、<hgroup>~</hgroup>の下にある<h1>-<h6>の中で最もランクの高い要素と同じランクとなります。

以下の例では、<hgroup>~</hgroup>の下にある<h2>の内容がセクションの見出しとなり、見出しランクは<h1>と同等となります。文書が要約される際には、<h2>の内容が副題として隠されるのがポイントです。

「見出しとセクション」の節で、hgroup要素をどのようにして個々のセクションに割り当てるのかを定義しています。

<header>
<h1>カラスはなんで感電しないのか?</h1>
</header>

<hgroup>
<h1>感電していない派</h1>
<h2>やる気と根性だよ派</h2>
<h3>山にかわいい7つの子があるからよ派(王道派) </h3>
<h3>感電してるけど平気なふりしてるよ派(中立派) </h3>
<h3>電気の周波に合わせて足を高速で動かしてるよ派 </h3>
<h2>ゴムだからだよ派</h2>
<h3>カラスはゴムをはいてるよ派 </h3>
<h3>カラスはゴムだよ派 </h3>
<h3>電気はゴムだよ派</h3>
<h2>カラスは存在しないよ派</h2>
<h3>みんな飛蚊症だよ派</h3>
<h2>カラスと電気じゃ格が違うよ派 </h2>
<h3>黒いからだよ派 </h3>
<h3>カラスも感電してられるほど暇じゃないんだよ派</h3>
<h2>電気はカラスを勘当して絶縁したよ派</h2>
<h2>電気会社の陰謀だよ派</h2>
<h3>カラスは電気代払ってないから電気止められてるよ派</h3>
<h3>そういう契約だからだよ派 </h3>
<h3>もともと電線はカラスが止まるためにできたものだよ派 </h3>
<h3>電線に電気が流れているというのは都市伝説だよ派</h3>
<h2>感電してるけど反対の足から電気が流れ出てるから大丈夫だよ派(過激派)</h2>
</hgroup>

<hgroup>
<h1>感電している派</h1>
<h2>楽しんでるよ派 </h2>
<h2>接触面積が広いから大丈夫だよ派</h2>
<h2>鳩が感電したのがカラスだよ派 </h2>
<h2>感電してるのは電気の方だよ派 </h2>
<h2>中の人は感電してるよ派</h2>
<h2>電気と友達だよ派 </h2>
<h3>電気で胃の中の有害物質を分解してるよ派 </h3>
<h3>カラスは電気で動いてるよ派 </h3>
<h3>電気はカラスの見た夢だよ派 </h3>
<h3>カラスは電気を盗んでる宇宙生命だよ派 </h3>
<h3>電気をおこしてるのがカラスだよ派 </h3>
<h4>電線を流れてるのがカラスだよ派 </h4>
<h2>感電してるけど気づいてないよ派</h2>
<h3> カラスはすでに死んでるよ派 </h3>
</hgroup>

↓表示例

カラスはなんで感電しないのか?

感電していない派

やる気と根性だよ派

山にかわいい7つの子があるからよ派(王道派)

感電してるけど平気なふりしてるよ派(中立派)

電気の周波に合わせて足を高速で動かしてるよ派

ゴムだからだよ派

カラスはゴムをはいてるよ派

カラスはゴムだよ派

電気はゴムだよ派

カラスは存在しないよ派

みんな飛蚊症だよ派

カラスと電気じゃ格が違うよ派

黒いからだよ派

カラスも感電してられるほど暇じゃないんだよ派

電気はカラスを勘当して絶縁したよ派

電気会社の陰謀だよ派

カラスは電気代払ってないから電気止められてるよ派

そういう契約だからだよ派

もともと電線はカラスが止まるためにできたものだよ派

電線に電気が流れているというのは都市伝説だよ派

感電してるけど反対の足から電気が流れ出てるから大丈夫だよ派(過激派)

感電している派

楽しんでるよ派

接触面積が広いから大丈夫だよ派

鳩が感電したのがカラスだよ派

感電してるのは電気の方だよ派

中の人は感電してるよ派

電気と友達だよ派

電気で胃の中の有害物質を分解してるよ派

カラスは電気で動いてるよ派

電気はカラスの見た夢だよ派

カラスは電気を盗んでる宇宙生命だよ派

電気をおこしてるのがカラスだよ派

電線を流れてるのがカラスだよ派

感電してるけど気づいてないよ派

カラスはすでに死んでるよ派

<keygen>

keygen要素は、鍵ペア生成コントロールを表します。コントロールのフォームがサブミットされるとき、その秘密鍵はローカルの鍵ストアに蓄積され、公開鍵はパッケージされてサーバーに送信されます。

challenge属性を指定することができます。その値は、サブミットされる鍵でパッケージされます。

keytype属性は列挙属性です。次表は、この属性のキーワードと状態を一覧にしたものです。左側のカラムにあるキーワードは、そのキーワードと同じ行の 2 番目のカラムのセルに挙げた状態に対応します。ユーザーエージェントは、これらの値をサポートする必要はありませんが、自身がサポートするアルゴリズムに対応する値のみは認識しなければいけません。

キーが発行される場合には、秘密キーと公開キーがペアで発行されます。秘密キーはローカル環境に保存され、公開キーはサーバーに送信されます。この仕組みにより、クライアント認証がより確実となり、情報送信の安全性が高まるでしょう。

尚、keytype属性では、暗号化の種類を指定することができますが、HTML5の仕様ではブラウザがサポートするべき暗号方式は決められていません。ブラウザによっては、どの暗号方式もサポートされていないこともありえます。

keytype属性で指定できる可能性のある値としては、rsaなどが挙げられます。RSAとは、公開鍵暗号方式の標準として普及している暗号アルゴリズムの名称です。RSAでは、巨大な数の素因数分解が困難なことを利用してデータを暗号化します。

WEB制作でお困りのあなたに朗報

属性

autofocus属性
オートフォーカスする
challenge属性
送信されるキーと一緒にパッケージする値を指定する
disabled属性
キーを操作不能にする
form属性
<form>要素と関連付ける
keytype属性
暗号化の種類を指定する(rsaなど、指定できる値はブラウザによる)
name属性
キーに名前を付ける