HTML5プロフェッショナル認定試験レベル1 1-4全体構造とメタ情報

前回に引き続きHTML5の学習を再開していく

 

inuwanhime.hatenablog.com

inuwanhime.hatenablog.com

inuwanhime.hatenablog.com

inuwanhime.hatenablog.com

①html要素

1-4全体構造とメタ情報のタイトル画像

定義:HTML文書のルート(DOMツリーの頂点/要素全体の先祖)となる要素

html要素と切っても切れない縁のlang属性。本書記載のlang属性に関しては「1-3グローバル属性」でも言及したため割愛

 

[補足]開始・終了タグの省略について

<html> 要素内の最初にあるものが要素 or 要素内容が空のとき可能

</html> 直後にコメント or 空白文字がないとき可能

 

(注)

HTML5以降には、HTML構文とXML構文があるが、省略可能なのはHTML構文だけ

②head要素

定義:HTML文書のメタデータ(Metadata conent)を入れるための要素

通常のHTML文書では、head要素内にtitle要素を1つ入れる必要あり

base要素は入れても入れなくてもいいが、1つまで

 

(注)title要素の省略に関して

  • iframe要素のsrcdoc属性で指定されるHTML文書
  • 上位のプロトコルでタイトルの情報が得られる場合に限り

 

[補足]開始・終了タグの省略に関して

<head> 要素内の最初にあるものが要素 or 要素内容が空のとき可能

</head> 直後にコメント or 空白文字がないとき

③body要素

定義:HTML文書のコンテンツを入れるための要素

 

[補足]開始・終了タグの省略

<body> 要素内の先頭が次のものでない場合省略OK{コメント、空白文字、meta, link, script, style, template} + body要素内容が空である場合もOK

</body> 直後にコメントがなければOK

④title要素

定義:HTML文書のタイトルまたは名前であることを示す要素

 

[ルール]

必ずhead要素の中で使う

要素内容として入れられるのはテキストだけ

 

(注)

1つのHTML文書につき1つしか配置できない点に注意

 

[補足]

HTML文書のタイトル≒ページ全体に対する見出しの内容

上記の方程式はそうなのだが、タイトルには多少の補足が必要

理由は「検索結果の一覧やブラウザの履歴、ブックマーク(お気に入り)などで単独で使用されるから」

⑤meta要素

定義:他のメタデータコンテンツ(Metadata conent)ではあらわせない様々な種類のメタデータを指定できる空要素

 

[用語解説]☞ メタデータ

あるデータに関するデータのコト。HTMLのhead要素内に入れられる要素は、基本的にすべてメタデータと言える

 

[ルール]

charset

name       どれか1つの属性を必ず指定  

http-equiv

itemprop 

赤字の2つはcontent属性とセットで使う

 

(注)

HTML Living Standardは文字コードを必ずUTF-8にする必要性あり

charsetの値もutf-8のみ

大・小文字どちらでも可

 

[用語解説]☞ プログマディレクティブ/プラグマ指示子

HTML文書の状態や挙動を指示する命令のこと

例えば、ブラウザの再読み込みや他文書への移動の命令など

 

⑥link要素

定義:HTML文書と別の文書やファイルなどを関連づけるための空要素

 

[主要属性]

href

rel

media

hreflang

type

sizes

crossorigin

 

[rel属性に指定できるキーワード]

alternate

author   

bookmark

help  

icon

license

next

nofollow

norefferer

preload

prev

search

stylesheet

tag

 

※rel属性は、a要素, area要素でも指定できるが指定可能なキーワードは要素によって異なる

⑦base要素

定義:HTML文書内で指定される相対URLの基準にするURLを設定するための空要素

 

[書き方]

<!DOCTYPE html>

<html lang="ja">

<head>

<base href="アドレスを記入">

</head>

<body>

 <h2>大谷翔平が球場内の人間を驚嘆させた打球</h2>

<p><a href="相対URL">その映像がこちら</a></p>

</body>

</html>

</body>

 

最初は定義だけを読んでも理解できず思考迷路にさまよった。しかし本書の該当箇所の熟読+ネット検索を講じて何とか85%は理解できた。

HTML文書内に指定される相対URLの基準を指定できるのがbase要素。base要素のhref属性の値にアドレス先を指定する。するとbody内に指定した相対URLの基準がbaseで指定したURLになる。

1-4全体構造とメタ情報を学習した総括

各要素の規則や素質を学習したが理解度は60%あるのかどうか自分でもわからないが止まらずに学習内容を進めていく。しかしbase要素の定義は最初に理解に及んでいなかっただけに理解した瞬間からは忘れようがなくなった。

ウェブサイト上に表示されるコンテンツを制作していきたいというモチベーションは依然として変わらないし、変えようがない。

キーボードを使う頻度が高いからPCのものではなく外部接続のキーボードに切り替えるほどに意欲が高まっている。

ところで、ノートにまとめた1-4を少し振り返って次の1-5に向かっていく。

「小説風なブログを描きたいんだよ」 - にほんブログ村