HTML5.1の基礎知識 | HTML5プロフェッショナル認定試験レベル1(ver.2.0)試験対策

HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験対策の備忘録。

今回は、試験範囲でもある「HTML5.1の基礎知識」のまとめ。

ちなみに、2014年10月28日にW3Cによって「HTML5」が勧告され、2016年11月1日には「HTML5.1」へ、そして2017年12月14日には「HTML5.2」が勧告されました。2019年5月になって、W3CとWHATWGは“HTML Living standard”をHTML技術仕様の唯一の標準規格とすると合意しました。これにより現在は、WHATWGによって策定された「HTML Living standard」が「HTML5/5.1/5.2」に代わるHTML技術仕様の標準規格となっているが、2021年04月現在「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験範囲のHTMLのバージョンは「HTML5.1(※5.0については、5.1で非奨励になったものも一部出題される可能性がある)」だそうなので、「HTML5.1」をもとに書いています。

実際に受験してきた時の結果と感想はこちら↓をご覧ください。

関連記事

先日、「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の認定試験を受験してきました。   これまで20年以上、Webサイト制作の仕事に携わってきた私ですが、今回受験してみた率直な感想は... 「[…]

HTML5プロフェッショナル認定試験レベル1(ver.2.0)認定シール

基本的な書式とタグについて

HTMLは、テキストのコンテンツの各部分をタグで囲って、その部分が文書の構成要素として何であるかを示すタイプの言語。この文書内の各構成要素のことをHTMLでは要素(Element)と言い、要素の前につけるタグを開始タグ(Start Tag)、後につけるタグを終了タグ(End Tag)と言う。<〇〇〇>の〇〇〇の部分にはタグ名または要素名と呼ばれ、終了タグにはスラッシュ(/)が入る。

 

要素
<h1> HTMLの要素の説明 </h1>
開始タグ 終了タグ

省略可能なタグ

HTML5の要素の中には、
・終了タグを省略できるもの
・開始タグと終了タグの両方を省略できるもの
がある。ただし、タグが省略可能な要素においても、条件によって省略できない。

要素名 開始タグ
の省略
終了タグ
の省略
条件
html ・XHTML構文では省略できない。
・開始タグはhtml要素内の先頭にコメントがなければ省略可能。
・終了タグはその直後ににコメントがなければ省略可能。
head ・開始タグは、要素内の最初にあるものが要素であるか、または要素内容が空である場合に省略可能。
・終了タグは、直後にコメントまたは空白文字が入っていなければ省略可能。
body ・開始タグは、要素内の先頭が「コメント/空白文字/meta要素/link要素/script要素/style要素」でない場合に省略可能。
・また開始タグは、body要素の要素内容が空である場合にも省略可能。
・終了タグは、直後にコメントが入っていなければ省略可能。
li ・直後に他の<li>が続いている場合
・親要素(<ul>や<ol>)内に、もうそれ以降コンテンツが無い場合
dt ・直後に別の<dt>または<dd>が続く場合
dd ・直後に別の<dd>または<dt>が続く場合
・親要素(<dl>)内に、もうそれ以降コンテンツが無い場合
p ・直後に、address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1〜h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, ul が続く場合
・<a>以外の親要素のとき、親要素にもうそれ以降コンテンツがない場合
rb
rt ・直後に<rt>または<rp>が続いている場合
・親要素(<ruby>)内に、もうそれ以降コンテンツが無い場合
rtc
rp ・直後に<rp>または<rt>が続いている場合
・親要素(<ruby>)内に、もうそれ以降コンテンツが無い場合
optgroup ・直後に他の<optgroup>が続いている場合
・親要素(<select>)内に、もうそれ以降コンテンツが無い場合
option ・直後に他の<option>か<optgroup>が続いている場合
・親要素(<select>)内に、もうそれ以降コンテンツが無い場合
colgroup 直後に空白スペースやコメントが続いていない場合
thead ・直後に<tbody>か<tfoot>が続いている場合
tbody ・直後に他の<tbody>か<tfoot>が続いている場合
・親要素(<table>)内に、もうそれ以降コンテンツが無い場合
tfoot ・直後に<tbody>が続いている場合
・親要素(<table>)内に、もうそれ以降コンテンツが無い場合
tr ・直後に他の<tr>が続いている場合
・親要素(<table>または<thead><tbody><tfoot>)内に、もうそれ以降コンテンツが無い場合
td ・直後に他の<td>か<th>が続いている場合
・親要素(<tr>)内に、もうそれ以降コンテンツが無い場合
th ・直後に他の<th>か<td>が続いている場合
・親要素(<tr>)内に、もうそれ以降コンテンツが無い場合

空要素(Void Element)

要素の中には、タグで囲うコンテンツがなく、その存在を開始タグだけで示す要素もあり、そのような要素は空要素(Void Element)と呼ぶ。空要素には終了タグを指定できない。

ただ、HTML5では、空要素のタグの「>」の直前にスラッシュ「/」を入れることもできる。HTML4では非奨励だったがHTML5ではどちらの書き方をしても問題ない。

<br>
<br />

br, hr, img, input, meta, area, base, col, embed, keygen, link, param, source

属性

要素の開始タグの後には、空白文字(半角スペース、タブ、改行[CR, LF, FF]をまとめて空白文字という。)で区切って属性(Attribute)を指定できる。基本的には「〇〇=”△△”」といった書式であらわされ、順不同で複数指定することができる。「〇〇」部分は属性名(Attribute Name)、「△△」部分は属性値(Attribute Value)と言う。

※HTML5では、仕様書に特に明記されている場合を除き、属性値として指定できる文字に制限はない。値を空にしてもOK

※HTML5では、属性を指定する際、「=」の前後に空白文字を入れることができ、属性値を囲う引用符(「”」または「’」)は省略することが可能。ただし、引用符を省略できるのは、その文書がHTML構文で、かつ属性値に空白文字のほか「=, “, ‘, <, >, `」を含んでいない場合に限る。また、属性値が空の場合は省略できない。

HTML5の全体構造

HTML文書の先頭には、DOCTYPE宣言(文書型宣言)を配置する必要がある。DOCTYPE宣言のあとにはhtml要素を配置し、その中にはhead要素body要素を順に1つずつ配置する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>HTML5の全体構造</title>
  </head>
  <body>
    ・・・
    ブラウザで表示させるコンテンツ
    ・・・
  </body>
</html>

※文書のタイトルを示すtitle要素は、head要素の中に必ず1つ入れる必要がある。(※例外あり)

※厳密に言うと、HTML5文書の先頭には、オプションでBOM(バイトオーダーマーク)を入れることができ、DOCTYPE宣言html要素の前後コメントと空白文字を入れることができる。

DOCTYPE宣言

HTML5には、実際のところDOCTYPE宣言は不要だが、ブラウザの表示モードを「標準モード」にする目的で指定することになっている。

現在普及しているブラウザのほとんどは、HTMLの文法が無視されていた古い時代(テーブルレイアウト)のページを表示させるための「後方互換モード」と、HTMLの標準仕様に準拠したページを表示させるための「標準モード」という2つの表示モードを持っている。「後方互換モード」は昔のブラウザの独自仕様に合わせた表示モードでもあるため、HTML5で書かれた文書を正しく表示させることができない。

これらのモードはDOCTYPE宣言がどのように書かれているかによって自動的に切り替えられるが、DOCTYPE宣言が書かれていない場合、現在のブラウザは無条件に「後方互換モード」にしてしまう。それを避ける目的で、HTML5では必要最低限の短いDOCTYPE宣言を配置することになっている

DOCTYPE宣言は、大文字でも小文字でもかまわない。ただし、「html」の前後に空白文字を入れることはできるが、「<!DOCTYPE」の部分はそのまま続けて書く必要がある。

 <!DOCTYPE html>
 <!doctype HTML>
 <!DOCTYPE html >
× < !DOCTYPE html>
× <! DOCTYPE html>

オーサリングツールの中には、HTML5の短いDOCTYPE宣言が出力できないものもある。そのようなソフトウェアでのHTML5文書の作成を可能にし、さらに古いバージョンのHTML/XHTMLからHTML5への移行を促進する目的で、HTML5では「<!DOCTYPE html」の後に次の表で示した文字列も追加できる仕様となっている。つまり、HTML5であってもHTML4.01 StrictやXHTML1.0 StrictなどのDOCTYPE宣言がそのまま使用できるということ

HTML5で使用が許可されているDOCTYPE宣言

<!DOCTYPE html>

<!DOCTYPE html SYSTEM “about:legacy-compat”>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0//EN”>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0//EN” “http://www.w3.org/TR/REC-html40/strict.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

html要素

html要素は、HTML文書のルート(DOMツリーの頂点/要素全体の先祖)となる要素。すべての要素は、この要素の中に記述する。

html要素は、グローバル属性であるlang属性を指定してその文書で使用されている言語の種類を示すことが推奨されている。

※HTML5で登場したhtml要素のmanifest属性は、HTML5.1で廃止された。

head要素

head要素は、HTML文書のメタデータコンテンツ(Metadata content)を入れるための要素

通常のHTML文書の場合、head要素内にはtitle要素を1つ入れる必要があるbase要素は入れても入れなくてもよいが、1つまでしか入れられない

※iframe要素のsrcdoc属性で指定されているHTML文書である場合や、上位のプロトコルでタイトルの情報が得られる(HTMLメールなど)場合に限り、title要素は省略することが可能。

※HTML4.01やXHTML1.0ではprofile属性が指定できたが、HTML5では廃止。

head要素の子要素として定義できる要素

base / meta / style / title / link

title要素

title要素は、それがHTML文書のタイトルまたは名前であることを示す要素。必ずhead要素の中で使用し、1つのHTML文書につき1つしか配置できない。要素内容として入れられるのはテキストだけ

meta要素

meta要素は、他のメタデータコンテンツではあらわせない様々な種類のメタデータを指定できる空要素

meta要素には、
charset属性
name属性
http-equiv属性
のうちのどれか1つを必ず指定する必要がある。

属性名 値の示すもの 指定可能な値 補足
charset 文書の文字コード 文字コード(エンコーディング)
name メタデータの名前 テキスト content属性とセットで使用。
http-equiv プラグマディレクティブ
(プラグマ指示子)・ブラウザへの再読み込み
・他文書への移動
・デフォルトのスタイルシート、スクリプト言語設定など
content-language
content-type
default-style
refresh
content属性とセットで使用。
content

charset属性

<meta charset=”UTF-8″>

name属性

keywords

<meta name=”keywords” content=”HTML5,プロフェッショナル,認定試験,ver.2.0″>

name=”keywords”は、そのHTML文書がどのような内容を示したものかキーワードで指定します。 複数のキーワードを指定する場合には、半角カンマ(,)区切りで指定します。

description

<meta name=”description” content=”HTML5.1の基礎知識 | HTML5プロフェッショナル認定試験レベル1(ver.2.0)試験対策”>

name=”description”は、その文書の説明を短文で指定します。 ここで指定する値は、Googleの検索結果に表示されるなど、多くの検索エンジンで利用されるので慎重に言葉を選んでください。

robots

<meta name=”robots” content=”noindex,nofollow”>

また、name=”robots” content=”noindex,nofollow”は、検索エンジンのクローラ(ロボット)に対して URLをインデックスしないように(noindex)、 文書内のリンクをたどらないように(nofollow)知らせるための指定です。 この指定はすべての検索エンジンに対して有効ではなく、 この情報を参照する検索エンジンに対してのみ有効となる指定なので注意してください。 検索エンジン対策として一般的に利用されていますが、W3Cの仕様には記載されていません。

author

<meta name=”author” content=”アルカモ日記”>

name=”author”は、その文書の作者を示す際に指定します。

generator

<meta name=”generator” content=”Frontweaver 8.2″>

name=”generator”は、文書作成に使用したツールやソフトウェアを示すものです。 これは、ツールやソフトウェアを使用してウェブページが自動生成された際に、 そのツール自身がウェブページを出力する際にhead要素内に挿入するものです。 手作りしたウェブページに使用するものではないので注意してください。

application-name

<meta name=”application-name” content=”Gmail”>

HTML5では、name属性の値として”application-name”が追加されています。 name=”application-name”は、ウェブアプリケーションの名前を示すものです。 これはウェブアプリケーションを作成する場合に利用する値であり、 ページがウェブアプリケーションでない場合には使用してはいけません。 また、使用する場合には一つの文書に一つだけ指定します。

viewport

ビューポート」とはブラウザの表示領域のこと。Webブラウザでの閲覧時は、ビューポート(ブラウザの表示領域)のサイズを元にコンテンツが表示される。ビューポート(ブラウザの表示領域)デバイスの幅や高さとは異なることが多く、たとえばiPhone(3GS)のデバイスの横幅は320pxだが、デフォルトのビューポート(ブラウザの表示領域)は980pxとなっている。

つまり、PCでブラウザの横幅を980pxにしたときの見た目を横幅320pxになるように縮小したものが、iPhoneのブラウザで表示される。小さいサイズの画面で、かつ縮小されるため、コンテンツによっては非常に見づらくなってしまう。

このように、スマートデバイスでは、ビューポートを意識しないと意図通りにコンテンツが表示されないことがあるので注意が必要となる。

このビューポートは、meta要素から設定を変更することが可能。

/* 例)ビューポートの横幅をデバイスのもと同じに設定 */
<meta name="viewport" content="width=device-width">

上記だと、初期の倍率を指定していないため、端末の向きを縦から横に変えた際に画面表示がそのまま拡大されるだけとなる可能性がある。これを回避し画面サイズに合わせたCSSを適用させたい場合は、初期倍率を1.0倍に指定する「initial-scale=1.0」を追加する。

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=1">
viewportで使用可能なプロパティ
プロパティ 値の示すもの 指定可能な値
width ビューポートの幅 10,000までの正の数。特別な値として「device-width」を指定可能
height ビューポートの高さ 10,000までの正の数。特別な値として「device-height」を指定可能
initial-scale 表示倍率の初期値 0.1~10までの数
minimum-scale 表示倍率の最小値 0.1~10までの数
maximum-scale 表示倍率の最大値 0.1~10までの数
user-scalable ユーザーによる拡大縮小の可否 yes / no
または
1 / 0

http-equiv属性

content-language

<meta http-equiv=”content-language” content=”ja”>

http-equiv=”content-language”は、文書の主言語を指定します。 言語はcontent属性で指定します。例えば、日本語ならcontent=”ja”、英語ならcontent=”en”となります。 その他の主な言語には、 zh(中国語)、ko(韓国語)、de(ドイツ語)、fr(フランス語)、it(イタリア語)、es(スペイン語)、ru(ロシア語)、ar(アラビア語) などがあります。

content-type

<meta http-equiv=”content-type” content=”text/html” charset=”UTF-8″>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>

http-equiv=”content-type”は、ファイルタイプや文字エンコーディングを指定します。 ファイルタイプを指定する場合には、例えばHTML文書ならcontent=”text/html”と指定します。 また、文字エンコーディングを指定すれば、charset属性の代わりとして機能します。

content-security-policy

<meta http-equiv=”content-security-policy” content=””>

default-style

<meta http-equiv=”default-style” content=”default.css”>

http-equiv=”default-style”は、デフォルトスタイルを指定します。 具体的には、例えば、content=”default.css”のように記述して、デフォルトスタイルとなるCSSファイルのURIを指定します。 この指定をすると、link要素で複数のCSSファイルを指定している場合に、 その中で優先して利用するCSSファイルをブラウザに伝えることができます。

refresh

<meta http-equiv=”refresh” content=”5; url=news.html”>

<meta http-equiv=”refresh” content=”300″>

http-equiv=”refresh”は、別のURLへのリダイレクトや現在ページの再読み込みを指定します。 content属性の値には何秒後にリフレッシュするかと、 ジャンプ先のURLを指定します。

W3Cによれば、 meta要素によるrefreshを多用しているウェブサイトは、検索エンジンのリストから削除されることがあるようです。 それを避けたい場合には、代わりに301リダイレクトを使用すると良いとのことです。

base要素

base要素は、HTML文書内で指定されている相対URLの基準にするURLを設定するための空要素。

<base>タグは、相対パスの基準URIを指定する際に使用します。 <base>タグを使用する場合には、一つの文書に一つだけ<head>~</head>の中に配置します。 一つの文書内で複数の<base>を指定することはできません。

<base>タグを使用する場合には、href属性target属性のどちらか、または、両方を指定する必要があります。 href属性には基準URIを、target属性にはリンク先ターゲットを指定します。

base要素にhref属性を指定する場合、他の要素でURLが指定されているものより前に記述する必要があります。 ただし、HTML要素は除きます。

属性名 値に示すもの 指定可能な値
href 相対URLの基準とするアドレス(絶対URL) URL
target リンク先やフォームの送信結果を表示させる際のデフォルトのブラウジングコンテキスト ブラウジングコンテキスト名またはキーワード

ブラウジングコンテキスト・・・
HTML5の仕様書では、HTML文書を表示させるウィンドウやタブ、インライン・フレームなどのことを指す。

link要素

link要素は、関連する別の文書やファイルなどを示すための空要素href属性rel属性は必ず指定する必要がある

link要素に指定できる属性
属性名 値の示すもの 指定可能な値
href 関連を示す文書やファイルのアドレス URL(空文字は不可)
rel 元文書との関係(元文書から見て、先方の文書またはファイルは何か) キーワード(空白文字区切り)
rev 逆方向から見た元文書との関係(先方の文書またはファイルから見て、元文書は何か) キーワード(空白文字区切り)
type 先方のMIMEタイプ MIMEタイプ
media 先方のファイル(CSSなど)を適用するメディア メディアクエリ
hreflang 先方の言語(日本語や英語など)の種類 言語コード(ja, enなど)
 sizes rel=”icon”の場合のアイコンのサイズ 「32x32」のような「幅x高さ」の書式のテキストまたは「any」
crossorigin 元文書とは異なるオリジンからデータを取得する際の認証に関する設定 crossorigin=”anonymous”
または
crossorigin=”use-credentials”

rel属性rev属性に指定できるキーワードは次のとおり。これらの属性はa要素area要素でも指定できる(area要素rel属性のみ)が、指定可能なキーワードは要素によって異なっている。キーワードは大文字で指定しても小文字で指定してもかまわない。

キーワード link
要素
a
要素
area
要素
意味
alternate 代替文書(別言語の翻訳版など)
author 執筆者に関する情報
help ヘルプ
license 著作権ライセンスに関する文書
next 次の文書
prev 前の文書
search 検索が可能なページ
icon × × この文書のアイコンの画像ファイル
stylesheet × × 読み込んで適用スルスタイルシート
bookmark × このリンクを含む最も近いセクションへのパーマリンク
nofollow × リンク先については保証できないことを示す
noreferrer × リンク先にはリンク元のページを知らせないことを示す
tag × この文章に適用されているタグのページへのリンク

body要素

body要素は、HTML文書のコンテンツを入れるための要素。

文字参照

HTML文書においては、「<」と「>」はタグの一部であると認識されるため、コンテンツの一部としてそのまま書き入れることはできない。このように、特別な役割を持った文字をコンテンツの一部として表示させるためには、文字参照という特別な書式を使用する。

文字参照の書式には、「名前指定文字参照」、「10進数数値文字参照」、「16進数数値文字参照」という3種類がある。いずれも「&」で始まり「;」で終わる。「10進数数値文字参照」は「&# + 10進数のUnicodeの文字コード番号 + ;」で指定する。「16進数数値文字参照」は、「&#x + 16進数のUnicodeの文字コード番号 + ;」で指定する。

表示させる文字 名前指定
文字参照
10進数数値
文字参照
16進数数値
文字参照
< &lt; &#0060; &#x3C;
> &gt; &#0062; &#x3E;
& &amp; &#0038; &#x26;
© &copy; &#0169; &#xA9;
® &reg; &#0174; &#xAE;
&trade; &#8482; &#x2122;
&quot; &#0034; &#x22;
&apos; &#0039; &#x27;

&nbsp;「テキスト テキスト」 ノーブレークスペース。本来は挿入した箇所の前後の改行を禁止する意味。
&ensp; 「テキスト テキスト」 半角スペースより少し広い空白
&emsp;「テキスト テキスト」 全角スペースとほぼ同じ大きさの空白
&thinsp;「テキスト テキスト」 &nbsp;の空白より小さい空白

コメント

コメントとは、ソースコードの中に書き込んでおくことのできるメモのようなもので、ソースコードを直接表示させない限り画面に表示されることはない。HTMLの場合、「<!–」と「–>」で囲んだ範囲がコメントとなる。

<!--コメント-->

<!--
コメント
-->

コメント内部のテキストに連続したハイフン「-」を含むことはできない。
コメント内部のテキストは「>」または「->」で開始できない。
コメント内部のテキストは「-」で終わることもできない。

 

>おとママのお買得商品×美容×好きなもの

おとママのお買得商品×美容×好きなもの

現在子育て中で忙しくしていますが、 自分が好きでいいなと思った物や 私が実際に使っていいと思った物、またセールなどでお得な商品などを紹介しています。よかったらたちよってみてください✨

CTR IMG