【HTML5プロフェッショナル認定試験レベル1】試験勉強まとめ（HTMLの基本構造）

HTML5プロフェッショナル認定試験レベル1の試験勉強まとめ（HTMLの基本構造）です。

基本構造
メタ情報（head要素内）

基本構造

<!DOCTYPE html>
<html lang="ja">
    <head>
        <!-- メタデータコンテンツ -->
    </head>
    <body>
        <!-- コンテンツ -->
    </body>
</html>

html要素

HTML文書の元となる要素。

lang属性の指定（推奨）
開始/終了タグとも直後にコメントがなければ省略可能

head要素

メタデータコンテンツをいれる要素。

title要素は１つ必須 ※省略可能な場合あり
base要素は０or１つ
開始タグは直後が要素なら省略可能
終了タグは直後にコメントがなければ省略可能

body要素

htmlコンテンツをいれる要素。

開始タグは直後が以下でない、またはbody要素の内容が空でないなら省略可能
- コメント
- 空白文字
- link要素
- script要素
- style要素
- template要素
終了タグは直後にコメントがなければ省略可能

メタ情報（head要素内）

title要素

HTML文章のタイトルまたは名前を示す要素。

１つだけ配置可

meta要素

メタデータ（HTML文書自身に関する情報）の指定をする空要素。

指定可能な属性	用途	備考
name	メタデータの名前
content	メタデータの値	charaset, http-equiveを使う場合セットで使用
charaset	文字コードの指定
http-equiv	プラグマディレクティブ（HTML文書の状態や挙動を指示する命令）	content-type,default-style, refresh など

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Keywords" content="mobile backend, モバイルバックエンド, スマートフォンアプリ, スマホアプリ, アプリ, アプリ開発, クラウド, mbaas,">
    ・・・・
</head>

link要素

関連文書やファイルの読み込む空要素。

指定可能な属性	用途	備考
href	関連文書やファイルのアドレス	必須（空文字指定不可）
rel	元文書との関係	キーワード指定必須
rev	逆方向から見た元文書との関係（↔︎rel）	キーワード指定
media	適用するメディア	メディアクエリ
hreflang	関連文書やファイルの言語
type	関連文書やファイルのMIMEタイプ
sizes	rel="icon"の場合のアイコンのサイズ	「幅（数）x（エックスの小文字）高さ（数）」の書式のテキストまたはany
crossorigin	元文書とは異なるオリジンからデータを取得する場合の認証設定	crossorigin="anonymous" または "use-credentials"

rel属性、rev属性に指定できるキーワードはlink要素とa要素、area要素とで異なる

<link href="style.css" rel="stylesheet"> <!-- CSSのスタイルシート -->
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">

base要素

相対URLの基準URLを設定する空要素。

１つまでしか配置できない

|指定可能な属性|用途|備考| |:--|:--|:--| |href|相対URLの基準URL（絶対URL）|| |target|リンク先などを表示するときのデフォルトの開き方（ブラウジングコンテキスト）|ブラウジングコンテキスト名またはキーワード| ※少なくともどちらか１つ必須

<base href="https://mbaas.nifcloud.com/" target="_blank">

*1:ニフクラ mobile backend サイトTopより

Oimo のお勉強ノート

勉強したことのメモを残す