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要素は別のところで記載。

2018-11-17

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

HTML5

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

メタデータ

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

title要素

カテゴリ：
メタデータコンテンツ
コンテンツモデル：
空白文字以外のテキスト
コンテンツ属性：
グローバル属性

head要素内に記述
head要素内に１つだけ記述できる
ドキュメントのタイトルや名前を表す
ユーザ履歴やブックマーク、検索結果に利用されるため、ドキュメントを識別できるtitleをつける必要がある

base要素

カテゴリ：
メタデータコンテンツ
コンテンツモデル：
なし
コンテンツ属性：
グローバル属性、href属性(ドキュメントのbaseURL)、target属性(デフォルトのブラウジングコンテキスト((ユーザの閲覧環境のこと。_blankや_selfなどを指定する。)))

head要素内に記述
head要素内に１つだけ記述できる
ドキュメントのbaseURLを指定
base要素には、hrefかtarget属性どちらか１つは必ず指定する必要がある

link要素

カテゴリ：
メタデータコンテンツ
body要素に記述が許可されている場合：フローコンテンツ、フレージングコンテンツ
コンテンツモデル：
なし
コンテンツ属性：
グローバル属性、
href … ハイパーリングのアドレス
crossorigin … 別オリジンのリソースに対する処理の設定
rel … このドキュメントとターゲットリソースとの関係性
rev … このドキュメントとターゲットリソースとの関係性を逆で見た場合
media … メディアクエリの設定
nonce … Content Security Policyで利用される暗号の設定
hreflang … リンク先リソースの言語指定
type … MIMEタイプの設定
referrerpolicy … リクエストに適用するリファラーポリシー
sizes … アイコンのサイズ

head要素内に記述。またはhead要素内のnoscript要素の子要素として記述。またはフレージングコンテンツを配置できる場所に記述。
他リソースを記述。

続きは次回の記事で。

2018-11-11

HTML5の基礎知識～全体構造～

HTML5

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

HTMLの全体構造について

基本は、

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 中身は省略 -->
</head>
<body>
<!-- 中身は省略 -->
</body>
</html>

DOCTYPE宣言

DOCTYPE宣言については以下で。
chooringo.hatenablog.com

html要素

カテゴリ：なし
コンテンツモデル：head要素と続けてbody要素
コンテンツ属性：グローバル属性、manifest属性

HTMLドキュメントのルート要素(最上位、頂点)。すべての要素の親要素。
lang属性の指定が推奨されている。(なぜなら、音声ツールの発音や翻訳ツールのルールで利用されるから。)
manifest属性が指定可能だが、将来的にはWebプラットフォームから削除される予定なので、使用しないことを推奨。
- manifest属性…アプリケーションキャッシュの機能を使うときに利用するもので、キャッシュしたいファイルを記載した設定ファイルを指定する。
- その代わりにservice workersの利用を推奨。
html要素内の先頭にコメントがなければ、開始タグは省略可能。
html要素の終了タグの直後にコメントがなければ、終了タグは省略可能。

head要素

カテゴリ：なし
コンテンツモデル：iframeのsrcdoc指定または上位プロトロコルからタイトル情報を取得できる場合は、0個以上のメタデータコンテンツ。
その他の場合は、1個以上のメタデータコンテンツで、そのうち1つはtitle要素にする。
コンテンツ属性：グローバル属性

メタデータコンテンツを入れる要素。
head要素内の先頭が要素であるか内容が空であれば、開始タグは省略可能。
head要素の終了タグの直後に空文字やコメントがなければ、終了タグは省略可能。

body要素

カテゴリ：セクショニング・ルート
コンテンツモデル：フローコンテンツ
コンテンツ属性：グローバル属性、onafterprint、onbeforeprint、onbeforeunload、onhashchange、onlanguagechange、onmessage、onoffline、ononline、onpagehide、onpageshow、onpopstate、onrejectionhandled、onstorage、onunhandledrejection、onunload

ドキュメントのコンテンツを入れる要素。
body要素内の内容が空ならば、開始タグは省略可能。
body要素内の先頭が、空文字・コメント・ meta・link・script・style・template 以外ならば、開始タグは省略可能。
body要素の終了タグの直後にコメントがなれけば、終了タグは省略可能。

2018-11-05

HTML5の基礎知識～グローバル属性～

HTML5

素人が書く備忘録(基本的にはHTML5.2を元に記載。

グローバル属性

すべての要素に共通で指定できる属性。

accesskey: 要素を実行またはフォーカスを当てるキーボードショートカットを指定する。印刷可能な文字を1つ指定可能。
class: クラス名を指定。要素が属する種類を表すトークンを設定する。スペース区切りで複数指定可。
contenteditable: trueまたは空文字ならば要素の編集が可能、falseならば編集不可能。(列挙型属性)
dir: 要素のテキストの方向を指定。ltrは左から右、rtlは右から左、autoは自動判別。(列挙型属性)※autoは本当に不明な場合にのみ使用することを推奨。
draggable: 要素がドラッグ可能かどうかを指定。trueはドラッグ可能、falseはドラッグ不可能。(列挙型属性)
hidden: 現在の状態に直接関連がない、または、存在しないもの、または、ページの他の部分でコンテンツが再利用されることを宣言するために指定。(論理属性)
id: 要素の一意の識別子を指定。空白文字は使用できず1文字以上指定する必要がある。
lang: 要素の言語の種類を指定。有効なBCP 47言語タグまたは空文字列を指定。
spellcheck: スペルチェックの有効無効を指定。trueは有効、falseは無効。(列挙型属性)
style: インラインのスタイルの指定。
tabindex: Tabキーによる選択順序を指定。
title: 補助的な情報を指定。
translate: 翻訳を可能か不可能かを指定。trueは翻訳可能、falseは翻訳不可能。(列挙型属性)

参照元：
https://www.w3.org/TR/html52/dom.html#global-attributes

チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo（ちょうりんご）

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

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

p要素

address要素

hr要素

pre要素

blockquote要素

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

セクション関連

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

header要素

fotter要素

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

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

article要素

section要素

nav要素

aside要素

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

メタデータ

meta要素

style要素

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

メタデータ

title要素

base要素

link要素

HTML5の基礎知識～全体構造～

HTMLの全体構造について

DOCTYPE宣言

html要素

head要素

body要素

HTML5の基礎知識～グローバル属性～

グローバル属性