src

src 属性 (HTML)

[1] HTML 系マーク付け言語では一般に、 埋込みリンク要素でリンクされる (埋め込まれる) 資源の URI参照を書く属性です。

[2] >>1 HTML の要素で src 属性を持つものの例としては、 img, embed, input, script, audio, video, source, track, frame, iframe などがあります。

目次

  1. 仕様書
  2. img 要素 src 属性 (HTML, XHTML 1)
    1. 属性値
    2. Mozilla の内部画像
      1. 実装
      2. 歴史
    3. 不思議解釈
      1. 参考文献
      2. メモ
    4. 安全性
    5. メモ
  3. input 要素 src 属性 (HTML, XHTML 1)
    1. 属性値
    2. メモ
  4. embed 要素 src 属性
  5. frame 要素、iframe 要素 src 属性 (HTML, XHTML 1)
    1. 仕様書
    2. 意味
    3. 属性値
    4. 応用
    5. 関連
    6. 歴史
  6. script 要素 src 属性
  7. src 大域属性 (XHTML2)
    1. 歴史
  8. atom:content 要素 src 属性 (Atom 1.0)
    1. 仕様書
    2. 属性値
    3. 処理モデル
    4. 関連
  9. メモ

仕様書#

img 要素 src 属性 (HTML, XHTML 1)#

[4] HTMLimg 要素の src 属性は、 画像資源の位置を指定します。

[5] 仕様書:

属性値#

[6] この属性値の値は %URI です。 SGML 的には CDATA です。

[48] 稀に、 URI 参照の前後に改行が含まれていることがあります。 HTML 4 によれば、 UA は CDATA 属性値の前後の空白を無視しても構いません HTML4CDATA。 主要な Web ブラウザは無視するようですが、 無視しない利用者エージェントもあります。 HTML 4 は属性値の前後に空白を入れるべきではないとしています。

[7] この属性は必須です。

Mozilla の内部画像#

[8] src 属性の値は本来 URI 参照ですが、 mosaic 系 UA の中には特定の値を指定すると内部組込みの特定の画像を表示することがあります。

[9] 存在が知られている組込み画像

src
internal-gopher-menu
internal-gopher-sound
internal-gopher-movie
internal-gopher-telnet
internal-gopher-text
internal-gopher-audio
internal-gopher-binary
internal-gopher-find
internal-gopher-image
internal-gopher-index

[10] 相対URI と区別できないのであんまりよくないと思いますが。。。

実装#

[31] NC 4.01 で internal-gopher-audiointernal-gopher-find が表示できないみたい。

[11] GeckoMozilla では NN4 以前より表示できる数が少ないようです。 特に、 Netscape 6 くらいの古い Gecko Mozilla ではどれも表示できません。 (ということは、わざわざその後復元されたということです。)

resource:///res/html/gopher-*.gif が使われているみたいです。

[23] >>11 勝手にファイルを追加したも反映はされないみたいです。

[13] >>12 によれば IBMWebExplorer も一部対応しているそうです。 また、 WebExplorer には internal 属性があって、こちらに組込み画像名を指定する方法も使えるそうです。

歴史#

[16] 由来は Mosaic までさかのぼります: "internal-gopher-image"?!? http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q4.messages/819.html

不思議解釈#

[51] (img 要素について)

画像を表示させるタグです。画像には「jpg(jpeg)」「gif」「png」 があります。拡張子も記載しないと表示されません。オンマウス (マウスを画像の上に乗せること)で説明文を表示させたい場合は 「alt属性」を記載します。

出典: 画像/アオゾラウェブデザイン[Aozora Web Design] http://www.aozoraweb.com/design/html/image.shtml (2005年4月現在)

拡張子がないと不都合が出る利用者エージェントが存在することは疑いないが、 文脈的に著者がそこまで配慮してこの引用文を書いたとは思えない。 不思議解説者はこのように脳内の妄想をさも真理であるかのように書くのだ。

参考文献#

メモ#

[15] ところでなぜだかわかりませんが、 この隠し機能を説明している文書はほとんどが非英語の欧州語です。なぜでしょ。

[20] Mozilla で、 CSSbackground-image: url(internal-gopher-text) とかしてみたけど流石に駄目でした。

[55] EMail Msg <9307040959.AA09910@wintermute.ncsa.uiuc.edu> (2007-07-01 04:37:40 +09:00 版) http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q3.messages/43.html (名無しさん)

安全性#

[49] img 要素型の安全性の項もご覧下さい。

メモ#

[60] はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記 ( 版) http://d.hatena.ne.jp/amachang/20081126/1227700830

Firefox での JavaScript による img.src の設定が激重なのです。

input 要素 src 属性 (HTML, XHTML 1)#

[3] HTMLinput 要素の src 属性は、 図形的提出ボタンを飾る画像を指定します。

この属性は、 type 属性が image の時使えます。

[40] 仕様書:

[50] HTML 4 DTD の注釈 (参考) には for fields with images と説明があります。 (名無しさん [sage])

属性値#

[41] この属性の値は %URI です。 SGML 的には CDATA です。

[42] この属性は省略可能です。

メモ#

[43] image 制御子の説明もご覧ください。

[21] Softbank allows <input type=submit src> [SOFTBANK] 3.12.2.

embed 要素 src 属性#

[26] embed 要素src 内容属性は、埋め込まれる資源番地を指定するものです >>25

[27] 属性値は、 valid non-empty URL potentially surrounded by spaces でなければなりません >>25

[28] itemprop 属性が指定されている場合、 本属性も指定しなければなりません >>25

[30] HTMLEmbedElement インターフェイスsrc IDL属性は、 src 内容属性反映しなければなりません >>25URL として反映します。

[29] Webブラウザーの処理については、 embed を参照。

frame 要素、iframe 要素 src 属性 (HTML, XHTML 1)#

[32] HTMLframe 要素・ iframe 要素の src 属性は、そのフレームの初期内容の場所を指定します。

仕様書#

意味#

[18] src 属性は、 要素入れ子閲覧文脈含む (contain) ページ番地を指定するものです >>17

属性値#

[19] 属性値は、valid non-empty URL potentially surrounded by spaces でなければなりません >>17

[35] この属性は省略可能です。

[22] iframe 要素itemprop 属性が指定されている場合は、 src 属性も指定しなければなりません >>17

[24]属性が指定されなかった場合、 srcdoc 属性が使われます (両方あればそちらが使われます)。どちらもなければ、 about:blank が使われます。

応用#

[39] >>38 より、実装は直接再帰状態を扱う必要がありません。 しかし、間接的に再帰状態なのは陽に禁止されてはいません。 (意味が無いのでするべきではないでしょう。)

直接にせよ間接にせよ、実装は自分自身を参照していないかチェックするべきでしょう。 (しかし必死でレンダリングを繰り返す哀れなブラウザも少なくないのが事実です。)

関連#

[53] iframe 要素には srcdoc 属性もあります。 src 属性srcdoc 属性の一方のみ指定します。

歴史#

[33] 仕様書:

[34] この属性の値は %URI です。 SGML 的には CDATA です。

[38] 但し、フレームの定義と同じ文書の内容を参照することはできません HTML 4 16.2.2.1

仕様書の例 (>>37) は noframes にある要素を参照していますが、 自分自身 (フレーム集合文書) そのものを指すことも当然できないのでしょう。

#

[36] 4つのフレームがあるフレーム集合文書の例 HTML 4 16.2.2.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contents_of_frame1.html">
      <FRAME src="contents_of_frame2.gif">
  </FRAMESET>
  <FRAME src="contents_of_frame3.html">
  <FRAME src="contents_of_frame4.html">
</FRAMESET>
</HTML>

レンダリング例:

 ------------------------------------------
|Frame 1     |Frame 3       |Frame 4       |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
-------------|              |              |
|Frame 2     |              |              |
|            |              |              |
|            |              |              |
 ------------------------------------------

それぞれのフレームに src で指定された資源をレンダリングしたのが初期状態です。

[37] 同じ文書を参照する違法な例 HTML 4 16.2.2.1、改

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
  <FRAME src="contents_of_frame1.html">
  <FRAME src="#ANCHOR_IN_SAME_DOCUMENT">
  <NOFRAMES>
  ...some text...
  <H2><A name="ANCHOR_IN_SAME_DOCUMENT">Important section</A></H2>
  ...some text...
  </NOFRAMES>
</FRAMESET>
</HTML>

この例では、2つ目の frame素片識別子だけの URI参照を指定しています。つまり、 noframes 要素内にある、指定された名前の a 要素を参照しているのですが、このような指定は違法とされています。

script 要素 src 属性#

[86] <script src> 参照。

src 大域属性 (XHTML2)#

[69] XHTML2大域属性 src は、埋め込み資源URL を表すものでした。従来 imgobject のような特定の要素でしか外部資源埋め込みはできませんでしたが、 この属性によって任意の要素で埋め込めるようになりました。

歴史#

[70] 大域属性としての srcXHTML2 の2つ目の作業原案で追加されました。

atom:content 要素 src 属性 (Atom 1.0)#

[61] Atom 1.0atom:content 要素src 属性は、リンクされる内容URL を表します。

[62]

要素
atom:content
属性名
src (「source」 (「出典」) より)
データ型
IRI参照
既定値
(要素内容)

仕様書#

属性値#

[64] 属性値RFC 3987 IRI参照でなければなりません RFC 3987 4.1.3.2.

[65] RELAX NG スキーマ (参考) では atomUri となっています RFC 3987 4.1.3.

処理モデル#

[67] Atom処理器は、 src 属性を次のように使って構いません RFC 3987 4.1.3.2.

関連#

[66] src 属性が存在する場合には、 atom:content 要素でなければなりません RFC 3987 4.1.3.2.

[68] src 属性がある場合、 type 属性もあるべきです。更に、 その属性値MIME 媒体型でなければなりません (texthtmlxhtml であってはなりません) RFC 3987 4.1.3.2.。 この場合の type 属性値はヒントであって、 内容と共に媒体型の情報も提供する場合にはそちらが権威を持ちます RFC 3987 4.1.3.2.

メモ#

[57] SSIならぬクライアントサイドインクルード(CSI)を実現できる「sprinkle.js」:phpspot開発日誌 (2007-09-23 18:21:15 +09:00 版) http://phpspot.org/blog/archives/2007/09/ssicsisprinklej.html (名無しさん)

[58] div 要素に src 属性はちょっと、、 | WWW WATCH ( 版) http://hyper-text.org/archives/2007/09/sprinkle_js.shtml

[59] SMIL 3.0 Tiny Profile ( 版) http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-tiny-profile.html#smilTinyNs-ServerPL-support (informative)

<?wsx version="1.0"?>
<smil>
<seq>
<media src="c:\wmpub\wmroot\audio1.wma" clipBegin="2:42" />
<media src="c:\wmpub\wmroot\audio2.wma" clipBegin="0:00" />
<media src="c:\wmpub\wmroot\audio3.wma" clipBegin="2min" />
<media src="c:\wmpub\wmroot\audio4.wma" clipBegin="0h" dur="30" />
</seq>
</smil>

[71] XForms 1.1 ( 版) http://www.w3.org/TR/2009/REC-xforms-20091020/#structure-attrs-link

[72] XForms 1.1 ( 版) http://www.w3.org/TR/2009/REC-xforms-20091020/#structure-model-instance

[73] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#src

[74] Web Applications 1.0 r7809 Define frame.src as reflecting as URL. Also, typo fixes. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7808&to=7809

[75] RDFa Core 1.1 - Second Edition ( ( 版)) http://www.w3.org/TR/rdfa-core/#A-src

[76] RDFa Core 1.1 - Second Edition ( ( 版)) http://www.w3.org/TR/rdfa-core/#h4_use-of-curies-in-specific-attributes

[77] HTML+RDFa 1.1 ( ( 版)) http://www.w3.org/TR/2013/REC-html-rdfa-20130822/#extensions-to-the-html5-syntax

[78] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#src

[79] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#src0

[80] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#src1

[81] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#src2

[82] Web Applications 1.0 r2566 Make <img src=> a special case. (credit: bz)]] ( ( 版)) http://html5.org/tools/web-apps-tracker?from=2565&to=2566

[83] HTML Speech Incubator Group Final Report ( ( 版)) http://www.w3.org/2005/Incubator/htmlspeech/XGR-htmlspeech-20111206/#dfn-src

[85] URLs are parsed and produce records · whatwg/html@30bc255 ( 版) https://github.com/whatwg/html/commit/30bc2557105ad62881ec9670f253febbc9761b44

[44] Clarify image display when src is an empty string (mwenge著, ) https://github.com/whatwg/html/commit/fdd60d3cfe925856f51c804717f7878d9deda966

[45] Clarify image display when src is an empty string, again (mwenge著, ) https://github.com/whatwg/html/commit/50c65e0c896a8fff2ed499cb3a1e325c56e61411

[46] Treatment of fallback image on <img src=> · Issue #3280 · whatwg/html]] () https://github.com/whatwg/html/issues/3280

[47] Clarify image display when src is an empty string by mwenge · Pull Request #3320 · whatwg/html () https://github.com/whatwg/html/pull/3320

[52] Editorial: nested browsing context is a member, not a type (annevk, , ) https://github.com/whatwg/html/commit/6b737bbc428facf34ec3728c0912cf9e172d0ea4