HTML辞典 base要素、link要素、script要素、style要素、noscript要素、template要素の解説

基準URLを設定する<base>タグ、外部リソースと関連付ける<link>タグ、スタイル情報を記述する<style>タグ、スクリプトコードを埋め込む<script>タグ、スクリプトが無効な環境に対して警告する<noscript>タグ、スクリプトによる挿入・複製が可能なHTMLのテンプレートを定義する<template>タグの使用方法について掲載

HTML5

対応ブラウザ

カテゴリー・コンテンツモデル

要素	カテゴリー	コンテンツモデル
base要素	メタデータコンテンツ	空
link要素		空
style要素		スタイルシートの記述
script要素	フレージングコンテンツフローコンテンツメタデータコンテンツ	src属性が指定されていない場合、type属性の値と一致するスクリプト src属性が指定されている場合は空、もしくはJavaScriptにおけるコメントテキスト
noscript要素	フレージングコンテンツフローコンテンツメタデータコンテンツ	トランスペアレントコンテンツ HTML文書でhead要素の中にある場合は0個以上のlink要素、0個以上のstyle要素、0個以上のmeta要素を任意の順番で記述 HTML文書でhead要素の外にある場合はトランスペアレント。ただし、子孫要素にnoscript要素がないこと
template要素	スクリプト支援要素フレージングコンテンツフローコンテンツメタデータコンテンツ	メタデータコンテンツフローコンテンツ ol要素、及びul要素の内容モデル dl要素の内容モデル figure要素の内容モデル ruby要素の内容モデル object要素の内容モデル video要素、およびaudio要素の内容モデル table要素の内容モデル colgroup要素の内容モデル thead要素、tfoot要素、及びtbody要素の内容モデル tr要素の内容モデル fieldset要素の内容モデル select要素の内容モデル

HTML共通で指定できるグローバル属性について

base要素

書式・概要

<base 属性="属性値">

base要素は、相対パスの基準になるURLになります。<link>タグよりも前に指定する必要があります。また、href属性、target属性のいずれか、もしくは両方を指定しなければなりません。

なお、スタイルシートファイル内のURLパス指定には機能しません。

使用できる属性

href

他のリソースに対するパスの基準となる絶対URLを指定します。絶対パス、相対パスで記述された外部リソースの読み込みや、ハイパーリンクの移動、フォーム送信などは、すべて指定されたURL基準で行われます。

<base href="https://kcfran.com/">

target（ターゲット）

データ送信後の応答画面を表示する対象を以下の値で指定します。

_blank	リンクは新しいブラウジングコンテキストに展開されます。
_parent	リンクは現在のブラウジングコンテキストの１つの上位のブラウジングコンテキストを対象に展開されます。
_self	リンクは現在のブラウジングコンテキストに展開されます。
_top	リンクは現在のブラウジングコンテキストの最上位のブラウジングコンテキストを対象に展開されます。

使用方法

<base>タグを使用することで、サーバー上のファイルをローカルにダウンロードせず、リモート先のスタイルシートなどを使用することができます。「./styles.css」はローカルパスを示しますが、その前にbaseが設定されているため、「https://kcfran.com/styles.css」と同じになります。

なお、スタイルシートファイル内のURLパス指定には機能しません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8">
    <base href="https://kcfran.com/">
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
      <img src="./pic1.jpg" width="300" height="300" alt="休日の京都古都の散策">
  </body>
</html>

link要素

書式・概要

<link href="属性値" rel="属性値" その他の属性="属性値">

使用できる属性

href

参照する外部ファイルのURL

<base href="https://kcfran.com/">

rel

href属性で指定したファイルの用途を指定します。

属性値	説明
stylesheet	外部のスタイルシートファイルを読み込むときに指定する
icon	ブックマークしたときなどに表示されるアイコンファイルを指定する
canonical	現在のHTML文書と似た内容のページのURLを正規化することができる。適切に使うことで検索エンジンからの評価が分散しなくなる
alternate	現在のHTML文書と同じ内容のページが存在するときに使う。スマートフォンページとPCページのURLが分かれている場合や多言語ページなど検索エンジンからは不正を疑う。alternateを指定することでURLを一本化できる
index	指定したURLが、現在のHTML文書に対する索引であることを示す
next	次のページのリンクを指定
prev	前のページのリンクを指定
author	作者へのリンク
license	著作権ライセンスに関する文書へのリンクを指定する
pingback	pingbackサーバーのアドレスを指定

type

参照するファイルのMIMEタイプを指定します。rel属性の属性値ごとに初期値があり指定を省略が可能です。rel=stylesheetのとき、type=”text/css”は省略可能です。

media

読み込む外部リソースが、どのメディアに適用するか指定します。この属性を指定しない場合は「all」となります。カンマ区切りで複数指定することが可能です。

属性値
all	すべてのデバイス
screen	パソコン、スマートフォンなどお一般的なWebブラウザすべてが対象。特定のサイズの画面を対象にしたい場合は、media=”screen and (max-width:600px)”とする
print	プリンタでの印刷時、プレビュー画面
aural	音声合成装置
braille	点字出力デバイス
handheld	携帯電話など画面が小さいデバイス
projection	プロジェクター
tty	テレタイプ端末。表示文字幅が固定されたデバイス
tv	テレビのような解像度や色数に制限があるデバイス

crossorigin

CORS（Cross-Origin Resource Sharing クロスドメイン通信）を設定できる属性です。サードパーティーから読み込んだ画像を、canvas要素で利用できるようになります。

anonymous	CookieやクライアントサイドのSSL証明書、HTTP認証などのユーザー認証情報は不要です。
use-credentials	ユーザー認証情報を求めます。

sizes

ユーザーの使用しているディスプレイサイズに合わせて画像ファイルを指定します。srcset属性と併せて使用します。

title

外部リソースのタイトルを指定します。

外部のスタイルシートファイルを読み込む

<head>
    <link rel="stylesheet" href="https://kcfran.com/styles.css">
</head>

Webブラウザのサイズに応じてファイルを追加で読み込む

外部ファイルの「styles.css」を読み込み、スマートフォンなどのWebブラウザサイズが767px以下の場合は、「sp_styles.css」を追加で読み込みます。

<head>
    <link rel="stylesheet" href="https://kcfran.com/styles.css">
    <link rel="stylesheet" href="https://kcfran.com/sp_styles.css" media="screen and (max-width: 767px)">
</head>

文書の関連性を指定する

ページネーションを使ったような記事など、複数のURLにわかれる場合があります。その場合は、rel属性の「next」、「prev」属性値を指定することでHTML文書の関係性を指定し、検索エンジンに適切に重要なページのみを表示させることができます。

diary-2022-05-01-page1.html

<head>
    <link rel="next" href="https://kcfran.com/diary-2022-05-01-page2.html">
</head>

diary-2022-05-01-page2.html

<head>
    <link rel="prev" href="https://kcfran.com/diary-2022-05-01-page1.html">
    <link rel="next" href="https://kcfran.com/diary-2022-05-01-page3.html">
</head>

diary-2022-05-01-page3.html

<head>
    <link rel="prev" href="https://kcfran.com/diary-2022-05-01-page2.html">
</head>

ファビコンを設置する（サイトアイコン）

<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">

style要素

<style 属性="属性値">～</style>

HTML文書に直接スタイルシート情報を記述します。

使用できる属性

media

スタイルシートを適用するメディアタイプを指定します。

type

スタイルシートのMIMEタイプを指定します。

scoped

特定の範囲のみにスタイルを指定する

scoped属性の使用例

style要素で指定されたスタイルは、親要素内のみに適用されます。

一般的なブラウザでは対応していません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8">
    <style>
          p{ color: #ffff00; }
    </style>
  </head>
  <body>
  <div>
      <style scoped="scoped">
          p{ color: #ff8800; }
      </style>
      <p>この部分にスタイルが適用されます。</p>
  </div>
  </body>
</html>

script要素

<script>～</script>
<script src="URL">～</script>

script要素は、クライアントサイドスクリプトのコードを埋め込んで実行します。外部ファイルとして用意したJavaScriptをsrc属性で読み込んで実行できるほか、script要素内に直接コードを埋め込むこともできます。

使用できる属性

src

JavaScriptの外部リソースのURLを指定します。

async

埋め込まれたスクリプトの実行タイミングを指定します。src属性が指定されている場合のみ指定可能です。文書を読み込むとき、この属性が指定されたスクリプトが実行可能になったときに実行します。

defer

【論理属性】

埋め込まれたスクリプトの実行タイミングを指定します。src属性が指定されている場合のみ指定可能です。文書が読み込み完了した時点で実行します。

async属性と同時指定された場合は、対応しているブラウザではasyncが有効になり、対応していないブラウザでは、defer属性が有効となる

type

埋め込まれる外部リソースのMIMEタイプ

charset

埋め込まれたスクリプトの文字コードを指定します。読み込む文書の文字コードと外部スクリプトの文字コードが異なる場合の文字化けを防止します。

type

埋め込まれる外部リソースのMIMEタイプ

noscript要素

スクリプトが無効な環境に対して表示する内容を記述します。セキュリティ上、クライアントサイドスクリプトを無効にしている場合があるので、JavaScriptを利用しているサイトでは、ユーザーに注意喚起する目的で使用しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxx"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-xxxxxxxxx');
   </script>
  </head>
  <body>
  <noscript>JavaScriptが無効になっています。ブラウザのJavaScriptを有効にしてください。</noscript>
  </body>
</html>

実行結果

template要素

template要素は、スクリプトによる文書への挿入・複製が可能なHTMLの断片を定義します。template要素で表の一部をテンプレート化し、JavaScriptからデータを挿入しています。データベースからデータを取得して動的にページを生成するときに役に立ちます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
     <table>
         <tbody>
             <template id="template_table">
             <tr><td></td><td></td></tr>
             </template>
         </tbody>
     </table>
  </body>
  <script>
  if ('content' in document.createElement('template')) {

    // 既存の HTML tbody と template の行を使ってtable をインスタンス生成します。
    var tbody = document.querySelector("tbody");
    var template = document.querySelector('#template_table');

    // 新しい行を複製して表に挿入します。
    var clone = template.content.cloneNode(true);
    var td = clone.querySelectorAll("td");
    td[0].textContent = "山田太郎";
    td[1].textContent = "男性";

    tbody.appendChild(clone);

    // 新しい行を複製して表に挿入します。
    var clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "山田花子";
    td[1].textContent = "女性";

    tbody.appendChild(clone2);

  } else {
    // HTML の template 要素に未対応処理
  }
  </script>
</html>

chrome 実行サンプル

カテゴリー:HTML辞典WEB基本構造

タグ:フレージングコンテンツフローコンテンツメタデータコンテンツ