HTML5の資格を取った時のメモ ①HTML

2017年に受験した時の記録です。

HTML5の資格を取った時のメモ
1. [HTML](https://qiita.com/krsm/items/99dc39ae95412bc7b0b2) ←この記事
2. [CSS](https://qiita.com/krsm/items/dad429f65b4a64c54195)
3. [その他範囲、試験対策](https://qiita.com/krsm/items/f98a791de22a0cbfce75)
4. [サンプルコード、問題](https://qiita.com/krsm/items/d997a994b3155c8da110)

***

レベル1の申し込み、本を買う。
[HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版](https://www.amazon.co.jp/dp/4839962677/)

目次などを除いて約270ページ。
出題範囲の比率は
・HTML：5
・CSS：3
・その他：2

1日目
目標：土日でHTMLを一通り見る
結果：40ページぐらい読んだ。所用時間２時間程度。
本のボリュームは多いけど読むところは少ない＋ほぼ読み流し。
明日の目標：80ページ＋演習問題。
土日でHTMLパートを終わらせれば合格射程内に入りそう。

2日目
HTMLパート読了
食事、洗濯、昼寝に5時間ぐらい費やしたので所要時間2hぐらい。
演習問題が簡単すぎるので他の問題集も欲しい。
一回の読了で理解度は実感的に2割ぐらい、勉強するための素地が少し固まったという程度。
imgあたりは別途勉強が必要。

## 1章
#### 1-2-1 HTML5.1の要素とカテゴリー
従来のインライン要素＝フレージングコンテンツ

http://scene-live.com/page.php?page=7
カテゴリーは、その要素がどこのカテゴリーに属しているか示したもので、
コンテンツ・モデルは、その要素がどのカテゴリーの要素を含んでよいか

#### 1-2-2 HTMLの全要素
参考サイト

- [HTML 4.01 Specification (ja)](http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html)
- [HTML5日本語訳](https://momdo.github.io/html5/Overview.html)
- [HTML Standard 日本語訳](https://momdo.github.io/html/)

### 1-3 グローバル属性
列挙属性／論理属性

#### 1-3-6 dir属性

dir属性 →右寄せ
`<bdo>`タグ →文章を右から始める（dirと違う）

#### 1-3-7 tabindex属性
指定するとインタラクティブコンテンツに成る

#### 1-3-8 カスタムデータ属性（data-*）
英大文字は使えない

#### 1-4-5 meta要素
http-equiv【equivalent】(同等)

##### タグ一覧

ルート要素
`<html>`【HyperText Markup Language】 文書のルート要素

文書のメタデータ
`<head>` メタデータの集まりを表す
`<title>` 文書にタイトルを付ける
`<base>` 相対リンクの基準となるURLを指定する
`<link>` 別の文書類と関連付ける
`<style>` スタイルシートを指定する
`<meta>` 文書に関する様々なメタデータを表す

セクション
`<body>` 文書の本体を表す
`<article>` 自己完結したセクションを表す
`<section>` 一般的なセクションを表す
`<nav>`【navigation links】 ナビゲーションを表す
`<aside>` 補足的なセクションを表す
`<h1>-<h6>`【heading*】 見出しを付ける
`<hgroup>`【heading group】 見出しをグループ化する （廃止）
`<header>` ヘッダを表す
`<footer>` フッタを表す
`<address>` 連絡先を表す

コンテンツのグループ化
`<p>`【paragraph】 段落を表す
`<hr>`【horizontal rule】 テーマの区切りを表す
`<pre>`【preformatted text】 整形済みのテキスト
`<blockquote>` 引用セクションを表す
`<ol>`【ordered list】 順序付きのリストを作る
`<ul>`【unordered list】 順不同のリストを作る
`<li>`【list item】 リストの項目を表す
`<dl>`【description list】 記述リストを作る
`<dt>`【description term】 記述リストの名前部分を表す
`<dd>`【description description】 記述リストの値部分を表す
`<figure>` 参照される図版を表す
`<figcaption>` 図版にキャプションを付ける
`<main>` 文書のメインコンテンツを表す
`<div>`【division】 特定の範囲をグループ化する

テキストの意味
`<a>`【anchor】 リンクを設定する
`<em>`【emphasis】 強調を表す
`<strong>` 重要性を表す
`<small>` 細目のような注釈を表す
`
`【strike】 すでに正確ではない内容を表す
`<cite>`【citation】(引用) 作品のタイトル・著者名・URLを表す
`<q>`【quotation】 引用フレーズを表す
`<dfn>`【definition】 定義される用語を表す
`<abbr>`【abbreviation】(略語) 略語や頭字語を表す
`<code>` ソースコードを表す
`<var>` 変数を表す
`<samp>`【sample】 プログラムの出力サンプルを表す
`<kbd>`【keyboard】 ユーザーが入力する内容を表す
`<data>` コンピュータ向けのデータを指定する
`<sub>`【subscript】(添字) 下付き文字を表す
`<sup>`【superscript】 上付き文字を表す
`<time>` 日付や時刻を表す
`<i>`【italic】 他と区別されるテキストを表す（思考・専門用語 等）
`<b>`【bold】 他と区別されるテキストを表す（キーワード・製品名 等）
`<u>`【underline】 軽めのラベル付け
`<mark>` テキストのハイライト表示
`<ruby>` ルビ（ふりがな）を振る
`<rb>`【ruby base】 ルビの対象テキストを表す
`<rt>`【ruby text】 ルビテキストを表す
`<rtc>`【ruby text container】 ルビテキストのコンテナ（※rbc(ruby body container)はHTML5で廃止）
`<rp>`【ruby parentheses】 ルビテキストを括弧で囲む
`<bdi>`【bi-directional isoration】 隔離されたテキストを表す
`<bdo>`【bi-directional override】 書字方向を指定する
`<span>`【span】(幅、架橋) 特定の範囲をグループ化する
`<br>`【break】 改行する
`<wbr>`【word break】 改行位置の候補を表す

訂正
`<ins>` 追加された部分を表す
`<del>` 削除された部分を表す

コンテンツの埋め込み
`<img>` 画像を表示する
`<picture>` レスポンシブイメージ（画像内容の最適化） （HTML 5.1）
`<iframe>` インラインフレームを作る
`<embed>` プラグインデータを埋め込む
`<object>` 外部リソースを埋め込む
`<param>` パラメータを指定する
`<video>` プラグインを使わずに動画を再生する
`<audio>` プラグインを使わずに音声を再生する
`<track>` 動画・音声と同期するテキストトラック
`<source>` メディアリソースの候補を指定する
`<map>` イメージマップを作る
`<area>` イメージマップのリンク領域を設定する

テーブル
`<table>` 表を作る
`<caption>` 表にキャプションを付ける
`<colgroup>` 表の列をグループ化する
`<col>` 表の列を表す
`<tbody>` 表の行をグループ化する（本体部分）
`<thead>` 表の行をグループ化する（ヘッダ部分）
`<tfoot>` 表の行をグループ化する（フッタ部分）
`<tr>`【table row】 表の行を表す
`<td>`【table data cell】 データセルを表す
`<th>`【table header cell】 見出しセルを表す

フォーム
`<form>` 入力フォームを作る
`<fieldset>` フォーム部品をグループ化する
`<legend>`【legend】(凡例(可算名詞)) 部品グループにキャプションを付ける
`<label>` フォーム部品とラベルを関連付ける
`<input>` 入力欄・選択肢・ボタンを作る
`<select>` プルダウンメニューを作る
`<option>` プルダウンメニューや入力候補の選択肢を作る
`<optgroup>` プルダウンメニューの選択肢をグループ化する
`<textarea>` 複数行のテキスト入力欄を作る
`<button>` 内容を持つボタンを作る
`<datalist>` 入力候補のリストを作る
`<keygen>` 暗号鍵を生成する （廃止予定）
`<output>` 計算結果の出力欄を作る
`<progress>` 作業の進捗状況を示す
`<meter>` 特定範囲内の数量や割合を示す

スクリプティング
`<script>` JavaScriptを埋め込む
`<noscript>` スクリプトが利用できない環境用の内容
`<template>` スクリプトで利用するHTMLコードのテンプレート
`<canvas>` スクリプト使ってグラフィックスを描く

インタラクティブ
`<details>` リクエストに応じて詳細情報を提供する （HTML 5.1）
`<summary>` 詳細情報のキャプションや要約を表す （HTML 5.1）
`<menu>` ポップアップメニューを表す （HTML 5.1）
`<menuitem>` ポップアップメニューの項目を表す （HTML 5.1）
`<command>` コマンドを表す （廃止）