ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs(Mozilla)
「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ(空白)」を表示する方法【XML】サイトマップ作り方
「HTML」の基礎知識
「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon(ファビコン)」の作り方他のページに移行する「リンク」の作り方 表の作り方Webページに画像の埋め込む方法動画を埋め込む方法音声ファイルを埋め込む方法地図を埋め込む方法入力フォームの作り方
「HTML」タグ
【DOCTYPE】「HTML」の「DOCTYPE宣言」【html】すべての「HTMLタグ」の親要素「html」タグ【head】「Webページ」の付属情報を設定する場所【meta】「Webページ」の設定をする「HTMLタグ」【title】「Webページ」の「タイトル」を設定する「HTMLタグ」【link】外部ファイルとの関係定義や読み込みをする方法【script】「Javascript」を実行する方法【div】レイアウトの枠として使う方法【p】文章の段落ごとに区分する方法【li】リスト(箇条書き)で表示をする方法【table】表の作り方【br】「HTML」での「改行」の仕方【a】リンクの作り方【h1-h6】Webページの見出しの設定方法【img】画像を表示する方法【span】文字列の一部を装飾する方法【ruby】「ルビ」をふるための要素
SEO(Search Engine Optimization)
「SEO対策」の具体的な方法「検索エンジン」に登録する方法「SEO対策」に有効な「ページタイトル」の記述方法「SEO対策」に有効な「キーワード」の記述方法「SEO対策」に有効な「ディスクリプション」の記述方法





【HTML】「head」タグ - 「Webページ」の付属情報(ヘッダー部分)を設定する

【HTML】
「head」タグ
「Webページ」の付属情報を設定する場所




「Webページ」の説明書的な役割を持つ「head」タグ。
記述内容は、
必須のものが多く、
記載を忘れると、
「Webページ」が表示されないこともある。

他の外部ファイルへのリンクを記述する場所でもあるので、
重要な役割を持つ範囲となっている。



詳しくは、
下記をご参照ください。



「head」タグとは


「head」タグは、
「Webページ」の付属情報などを記述する範囲を示す「HTMLタグ」。

「head」タグの範囲内では、

・タイトル
・ページの説明
・キーワード
・文字コード
・「CSS」外部ファイルへのリンク
・「Javascript」外部ファイルへのリンク
・「Javascript」の記述
・オリジナルファビコンの設定

などの情報を設定することができます。


「head」タグに記述される内容は、
「Webページ」を表示するのに、
「必須」の情報ばかり。


Back

「head」タグの書式


「Webページ」の付属情報を記述する
「head」タグは、
「html」タグの中に記述する。 コンテンツ内容を記述する「body」タグの上に、
必ず記述するようになっている。

簡単に言えば、
「Webページ」の説明書なので、
「body」タグより前に記述すべき内容ばかりを
「head」タグに記述している。



「head」タグの基本書式


<!DOCTYPE html>
<html>
<head>
「タイトル」「Webファイルの情報」を記載する場所
</head>
<body>
「Webページ」の「コンテンツ内容」を記述する場所
</body>
</html>



Back

画像を先読み込みする方法


大きな画像を表示するなどをするには、少し時間がかかります。
なので、前もって、画像を「preload(先読み込み)」しておくと、
画像の表示や切り替えがスムーズになる。
表示のズレなどの防止にもなる。


画像を先読み込みする書式

<html>
<head>
<link rel="preload" href="../Images/BackgroundImages/BG_001.jpg" as="image">
<link rel="preload" href="../Images/BackgroundImages/BG_002.jpg" as="image">
<head>
<body>
</body>
</html>


Back