HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのheadタグとは？主な要素と使い方をわかりやすく解説

HTMLの<head>タグとは

HTMLの<head>タグは、<title>、<style>、<base>、<link>、<meta>、<script>、<noscript>といった要素を格納するためのコンテナとして機能します。<head>内の内容はブラウザ上に直接表示されませんが、文書のタイトルやメタ情報、スタイル、スクリプトの読み込みなど、ページ全体の動作を制御する重要な役割を担っています。

なお、HTML5では<head>要素を省略してHTML文書を記述することも可能です。

<head>内に<title>を記述する

ここでは、<head>タグを実装し、<title>を追加する例を紹介します。

コード例

<!DOCTYPE html>
<html>
<head>
<title>ドキュメントのタイトル</title>
</head>
<body>
    <h2>デモ見出し</h2>
    <p>これはデモテキストです。</p>
    <p>これはデモテキストです。</p>
    <p>これはデモテキストです。</p>
    <p>これはデモテキストです。</p>
</body>
</html>

このコードを実行すると、<head>要素内に追加したドキュメントのタイトルが、ブラウザのタブなどに表示されます。

<head>内に<base>を記述する

HTMLの<base>タグは、HTML文書におけるベースURL（基準となるURL）を設定するために使用されます。<head>は<base>要素のコンテナとしても機能します。例えば、ベースURLを「https://example.com/tutorials」と設定すると、"/html"、"/java"、"/jquery"などの相対URLは、最終的に以下のようなURLとして解釈されます。

https://example.com/tutorials/html
https://example.com/tutorials/java
https://example.com/tutorials/jquery

注意： <base>タグには終了タグがありません。つまり、</base>で閉じる必要はありません。

<base>タグで使用できる主な属性は以下のとおりです。

  • href：ページ内のすべての相対URLに対するベースURLを設定します。
  • target：すべてのハイパーリンクとフォームのデフォルトのターゲットを指定します。指定できる値は _blank、_parent、_self、_top、framename です。

それでは、<base>要素を実装する例を見てみましょう。

コード例

<!DOCTYPE html>
<html>
<head>
<base href="https://www.example.com/tutorials/">
</head>
<body>
    <h2>チュートリアル一覧</h2>
    <p><a href="java.html">Javaチュートリアル</a></p><p>（https://www.example.com/tutorials/java.html として機能します）</p>
    <p><a href="jquery.html">jQueryチュートリアル</a></p><p>（https://www.example.com/tutorials/jquery.html として機能します）</p>
    <p><a href="blockchain.html">ブロックチェーンチュートリアル</a></p><p>（https://www.example.com/tutorials/blockchain.html として機能します）</p>
    <p><a href="python.html">Pythonチュートリアル</a></p><p>（https://www.example.com/tutorials/python.html として機能します）</p>
</body>
</html>

出力結果

HTMLのheadタグとは？主な要素と使い方をわかりやすく解説

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"