2019-01-20

HTML5のテキストレベルセマンティクス～その１～

HTML5

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テキストレベルセマンティクス関連

テキストのマークアップに用いるタグ

a要素

a要素がhref属性を持っている場合、ハイパーリンクを表す。
a要素がhref属性を持っていない場合、プレースホルダーを表し、target、download、rel、rev、hreflang、type、およびreferrerpolicy属性を省略しなければならない。

<nav>
<ul>
<li><a href="https://XXXXXXXX">XXX</a></li>
<li><a href="https://YYYYYYYY">YYY</a></li>
<li><a>ZZZ</a></li>
</ul>
</nav>

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・href属性がある場合、インタラクティブコンテンツ
・プルパブルコンテンツ

コンテンツモデル
・トランスペアレント(インタラクティブコンテンツとaタグを除く)

コンテンツ属性
・グローバル属性
・href - ハイパーリンクアドレス
・target - ブラウジングコンテキスト
・download - ダウンロードするように指定。ダウンロード時のファイル名も指定できる。
・rel - 現在のドキュメントとリンク先リソースとの関係を表す
・rev - リンク先リソースから見た現在のドキュメントとの関係を表す
・hreflang - リンク先言語
・type - 参照先リソースのMIMEタイプ
・referrerpolicy - リファラの送信

タグの記載場所
・フレージングコンテンツを配置できる場所

2019-01-05

HTML5のグルーピングコンテンツ～その３～

HTML5

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

グルーピングコンテンツ関連

figure要素

自己完結型で、通常はメインフローから参照されるコンテンツを表す。
イラスト、図、写真、コードリストなどに注釈を付けることができる。

<p>コードを表示する</p>
<figure>
    <figcaption>とりあえずvarで宣言</figcaption>
    <pre><code>
    var chocopai='';
    chocopai = 'tabeta';
    </code></pre>
</figure>

カテゴリ
・フローコンテンツ
・セクショニングルート
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ
・figcaption要素

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

figcaption要素

親要素のfigureタグのキャプションや凡例を表す。

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・figure要素の子要素

main要素

ドキュメントまたはアプリケーションのbody要素のメインコンテンツを表す。
セクショニングコンテンツではないのでアウトラインには影響ない。
ドキュメントに固有のコンテンツが含まれ、サイトナビゲーションリンク、著作権情報、サイトロゴ、バナー、検索フォームなど、一連のドキュメントで繰り返されるコンテンツは含めない。

<header>
....
</header>
<main>
<p>メインなコンテンツを書くよ</p>
</main>
<fotter>
.....
</fotter>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツ( article, aside, footer, header, nav要素の中では使用不可)

div要素

他に適切な要素がない場合に用いる。div要素の代わりにより適切な要素を用いることでアクセシビリティが向上する。
スタイル上の目的やセクション内の複数の段落を折り返す場合などに使用される。

<div class="style1">
    <p>何か食べたいなー</p>
</div>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・dl要素の子要素の場合：1つ以上のdt要素とそれに続くdd要素(必要に応じてscript、template要素を含む)
・dl要素の子要素ではない場合：フローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所
・dl要素の中

2018-12-22

HTML5のグルーピングコンテンツ～その２～

HTML5

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

グルーピングコンテンツ関連

ol要素

項目のリストを表し、順序付けられているものに使用する。

<p>好きな焼き鳥ランキング</p>
<ol>
    <li>ねぎま</li>
    <li>ぼんじり</li>
    <li>軟骨</li>
    <li>皮(ぱりっぱりのやつ)</li>
    <li>かしら</li>
</ol>

カテゴリ
・フローコンテンツ
・子要素としてli要素が1つ以上含まれる場合は、パルパブルコンテンツ

コンテンツモデル
・ゼロまたは1つ以上のli要素
・script要素、template要素

コンテンツ属性
・グローバル属性
・reversed - 降順(ブール属性。あれば降順、なければ昇順。)
・start - 開始番号(有効な整数値を指定)
・type - リストマーカーの種類(1、a、A、i、Iのいずれかを指定。CSSプロパティ「list-style-type」で表示を変えることも可能。)

タグの記載場所
・フローコンテンツが配置できる場所

ul要素

項目のリストを表し、順序が重要ではないものに使用する。

<p>好きな焼き鳥</p>
<ul>
    <li>ねぎま</li>
    <li>ぼんじり</li>
    <li>軟骨</li>
    <li>皮(ぱりっぱりのやつ)</li>
    <li>かしら</li>
</ul>

カテゴリ
・フローコンテンツ
・子要素としてli要素が1つ以上含まれる場合は、パルパブルコンテンツ

コンテンツモデル
・ゼロまたは1つ以上のli要素
・script要素、template要素

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

li要素

リスト項目を表す。

<p>好きな焼き鳥ランキング</p>
<ul>
    <li value="3">軟骨</li>
    <li value="2">ぼんじり</li>
    <li value="1">ねぎま</li>
</ul>

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性
・ul要素の子要素でなければvalue - リストの番号指定。

タグの記載場所
・ol要素またはul要素の内部

dl要素

0個以上の説明リストを表す。
名前と定義、質問と回答、カテゴリとトピック、またはその他の用語説明ペアのグループなどを表す。

<dl>
    <dt>りんご</dt>
    <dd>赤や青の丸い果物</dd>
    <dt>ぶどう</dt>
    <dl>紫や黄緑色の粒がたくさんぶらさがった果物</dl>
</dl>

カテゴリ
・フローコンテンツ
・1つ以上の名前と値のグループがある場合、パルパブルコンテンツ

コンテンツモデル
・ゼロまたは1つ以上のdt要素とそれに続く1つ以上のdd要素からなるグループを0個以上。(必要に応じてscript要素またはtemplate要素)
または、
・ゼロまたは1つ以上のdiv要素(必要に応じてscript要素またはtemplate要素)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

dt要素

説明リストの用語を表す。

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ(header要素、footer要素、セクショニングコンテンツ、ヘッディングコンテンツを除く)

コンテンツ属性
・グローバル属性

タグの記載場所
・dl要素内のdtまたはdd要素の前

dd要素

説明リストの説明部分を表す。

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・dl要素内のdtまたはdd要素の後

2018-12-15

HTML5のグルーピングコンテンツ～その１～

HTML5

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

グルーピングコンテンツ関連

p要素

段落を表すタグ。p要素ごとに上下に余白が入る。

<p>汁なし担々麵がおいしすぎる件・・・</p>
<p>醤油ラーメンがおいしすぎる件・・・</p>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

address要素

人や人々、組織への問い合わせ先を表す。
物理的またはデジタルな場所や、連絡先情報、人や組織を識別できる情報を入れる必要がある。

<address>      
組織名をもじゃもじゃ<br>
Tel: XXX-XXXX-XXXX | Fax: XXX-XXXX-XXXX
</address>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ(ヘッディングコンテンツ、セクショニングコンテンツ、 header要素, footer要素, address要素を除く)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

hr要素

段落レベルの区切りを表す。例えば、ストーリー内で場面が切り替わるときや別のトピックに変わるときに使用する。
ドキュメントのアウトラインには影響しない。
あくまでもセマンティクスな観点で使う。見た目のデザインならばCSSを使用。

<p>あるところにおじいさんとおばあさんがいました。・・・</p>
<hr>
<p>あくる日、金色に輝くりんごが置いてありました。・・・</p>

カテゴリ
・フローコンテンツ

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

pre要素

書式設定されたテキストのブロックを表す。
電子メール、空白行で囲まれた段落、箇条書きで始まる行で示されるリスト、プログラムコード、ASCIIアートなどの表示に使用する。
プログラムコードを表す時は、code要素やsamp要素、kbd要素を併用して使用する。

<pre><code>
var favorieFood = '汁なし担々麵'
echo favorieFood;
</code></pre>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

blockquote要素

別のソースから引用されたコンテンツを表す。
footerまたはcite要素に含まれる引用を必要に応じて使用できる。

<blockquote>
  <p>引用している内容を表すよ</p>
</blockquote>

カテゴリ
・フローコンテンツ
・セクショニングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性
・cite - 引用元へのリンク

タグの記載場所
・フローコンテンツが配置できる場所

2018-12-08

HTML5のセクション～セクション関連のタグ～

HTML5

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

セクション関連

以下のタグをセクショニングコンテンツ内で使用した場合、それらのセクション内の情報として認識され、
セクショニングコンテンツがないところで使用した場合、ドキュメント全体の情報として認識される。

h1 h2 h3 h4 h5 h6要素(ヘッディング要素)

それぞれのセクションの見出しを表す。
最上位の見出しはh1で最下位の見出しはh6となる。
見出しを使用してドキュメントのアウトラインを生成する。

セクショニングコンテンツのないヘッディング要素があった場合、暗黙のセクションが生成される。
セクショニングコンテンツ内にある最初のヘッディング要素は、そのセクションの見出しとなる。
2つ目以降のヘッディング要素が1つ目のヘッディング要素と同じか上位ランクのヘッディング要素ならば、新しい暗黙のセクションが生成される。
2つ目以降のヘッディング要素が1つ目のヘッディング要素より下位ランクのヘッディング要素ならば、暗黙のサブセクションが生成される。
2つ目以降のヘッディング要素がセクショニングコンテンツに囲われていたら、ランクに関係なくサブセクションとなる。

セクショニングルート内にある最初のヘッディング要素は、そのセクショニングルートの見出しとなる。

<body>
<h1>body要素の見出しh1</h1>
<section>
    <h2>body要素の1つ目のサブセクションの見出しh2</h2>
    <p>もじゃもじゃもあじゃもじゃ</p>
</section>
<section>
    <h2>body要素の2つ目のサブセクションの見出しh2</h2>
    <p>あばばばばばばばば</p>
</section>
<blockquote>
    <h2>blockquote要素(body要素からは独立して)の見出しh2※body要素のアウトラインには影響しない</h2>
</blockquote>
</body>

カテゴリ
・フローコンテンツ
・ヘッディングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所

header要素

最も近い祖先のmain要素またはセクショニングコンテンツまたはセクショニングルートのヘッダー情報を表す。

<body>
    <header>body要素のヘッダー情報だよ</header>
    <article>
        <header>article要素のヘッダー情報だよ</header>
    </article>
</body>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ(main要素や、セクショニングコンテンツ内にないheader要素やfotter要素は子孫として持つことができない)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所

fotter要素

最も近い祖先のmain要素またはセクショニングコンテンツまたはセクショニングルートのフッター情報を表す。
著者や関連文書へのリンク、著作権データなどのセクションに関する情報や、
付録、索引、ライセンス情報などのドキュメント全体の情報をマークアップすることもできる。

<body>
・・・・・・・省略
    <article>
        <fotter>article要素のフッター情報だよ</fotter>
    </article>
    <fotter>body要素のフッター情報だよ</fotter>
</body>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ(main要素や、セクショニングコンテンツ内にないheader要素やfotter要素は子孫として持つことができない)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所

2018-12-01

HTML5のセクション～セクショニングコンテンツのタグ～

HTML5

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

セクショニングコンテンツのタグ

article要素

<article>
    <header>
        <h2>記事のタイトルだよん</h2>
     </header>
     <p>記事の内容だよんだよんだよん</p>
</article>

カテゴリ
・セクショニングコンテンツ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・main要素を除いたフローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所
　

雑誌、新聞、技術または学術論文、エッセイまたはレポート、ブログ、または他のソーシャルメディアの投稿のようなそれだけで完結しているコンテンツをマークアップする。

section要素

<section>
    <h2>りんご</h2>
    <p>りんごは美味しいよねーー！！</p>
</section>
<section>
    <h2>いちご</h2>
    <p>いちごは美味しいよねーー！！</p>
</section>

カテゴリ
・セクショニングコンテンツ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所
　

ドキュメントやアプリケーションの一般的なセクションのコンテンツをマークアップする。
完結型のコンテンツはarticle要素でマークアップすることが推奨されている。
それぞれのセクションは、section要素の子要素としてヘッディング要素含めて識別すべきである。

nav要素

<nav>
    <ul>
        <li><a href="/">TOP</a></li>
        <li><a href="/page1/">page1</a></li>
        <li><a href="/page2/">page2</a></li>
    </ul>
</nav>

カテゴリ
・セクショニングコンテンツ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・main要素を除いたフローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所
　

外部ページへのリンクやナビゲーションのコンテンツをマークアップする。

aside要素

<aside>
    <h2>広告とか</h2>
    <p>広告の内容だよん</p>
</aside>

カテゴリ
・セクショニングコンテンツ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・main要素を除いたフローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所
　

関連情報やメインコンテンツから分離させたいコンテンツをマークアップする。
本文からの抜粋を使ったリード文やサイドバー、広告、nav要素のグループなどに使うことができる。

2018-11-24

HTML5の基礎知識～メタデータその２～

HTML5

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

メタデータ

head要素内にメタデータコンテンツに属する要素を記載する。

meta要素

カテゴリ：
メタデータコンテンツ

コンテンツモデル：
なし

コンテンツ属性：
・グローバル属性
・name属性 — メタデータの名前を指定(keywordやdescriptionなど)。
・http-equiv属性 — プラグマディレクティブ。
・content — 値を指定。
・charset — エンコードを指定(UTF-8など)。

タグの記載場所：
・charset属性が存在する場合またはhttp-equiv属性が存在していてエンコーディングが指定されている場合は、head要素内に記載。
・http-equiv属性が存在するがエンコーディングの指定がない場合は、head要素内またはhead要素の子要素であるscript要素に記載。
・name属性が存在する場合、メタデータコンテンツを配置できる場所に記載。
　

ドキュメントの文字コードや概要などの情報を記載。
title、base、link、style、およびscript要素で指定できないものを記載。
name、http-equiv、charset属性のいずれか1つを指定しなければならない。
nameまたはhttp-equiv属性が指定された場合、content属性を指定しなければならない。それ以外では省略しなければならない。
charset属性は1ドキュメントに1つのみ指定可能。

ex.
<meta name="keywords" content="chocopai">

style要素

カテゴリ：
メタデータコンテンツ

コンテンツモデル：
type属性に依存

コンテンツ属性：
・グローバル属性
・media … メディアクエリ
・nonce … Content Security Policyの暗号ノンスの設定
・type … 埋め込むリソースの種類
・title … 代替スタイルシートの名前

タグの記載場所：
・メタデータコンテンツを配置できる場所に記載。
・head要素の子要素として存在するscript要素内に記載。
・body要素内では、フローコンテンツが配置可能な場所に記載。
　

内部スタイルシート(埋め込み)を書くことができる。
type属性が存在する場合、有効なMIMEタイプを指定する。
type属性が省略された場合、デフォルト値の"text/css"が設定される。

ex.
<style>
div {
    margin: 0;
}
</style>

script、noscript、template要素は別のところで記載。