HTMLフレームによって，文書作成者は，独立のウィンドウ又はサブウィンドウであってよい，複数のビューで文書を表示することができる。複数のビューは，設計者に，ある情報を見えるように保ち，その一方で，他のビューはスクロールされる又は置換されるといった方法を提供する。例えば，同じウィンドウ内で，最初のフレームが静的バナーを表示し，2番目のフレームがナビゲーションメニューを表示し，3番目のフレームが2番目のフレームにおけるナビゲーションでスクロールされる又は置換される主文書を表示するかもしれない。
簡単なフレーム文書を次に示す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<P>This frameset document contains:
<UL>
<LI><A href="contents_of_frame1.html">Some neat contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
このフレーム文書は，次のようなフレームレイアウトを生成するかもしれない。
--------------------------------------- | | | | | | | Frame 1 | | | | | | | | |---------| | | | Frame 3 | | | | | | | | | | | Frame 2 | | | | | | | | | | | | | | ---------------------------------------
利用者エージェントがフレームを表示できない，又は表示しないように構成されている場合は，NOFRAMES要素の内容をレンダリングする。
フレームレイアウトを記述するHTML文書は，フレーム集合文書と呼ばれるが，フレームのないhtml文書とは異なる構成をもつ。一つの標準的な文書は，一つのHEADセクション及び一つのBODYをもつ。一つのフレーム集合文書は，一つのHEADをもち，一つのFRAMESETをBODYの代わりにもつ。
文書のFRAMESETセクションは，主たる利用者エージェントウィンドウにおけるビューのレイアウトを指定する。さらに，FRAMESETセクションは，NOFRAMES要素を包含し，フレームをサポートしない又はフレームを表示しないように構成されている利用者エージェントのために，代替内容を提供することができる。
最初のFRAMESET要素の前に，通常はBODY要素に置かれる要素が出現してはならない。出現した場合には，そのFRAMESETは無視する。
<![ %HTML.Frameset; [ <!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision--> <!ATTLIST FRAMESET %coreattrs; -- id, class, style, title -- rows %MultiLengths; #IMPLIED -- list of lengths, default: 100% (1 row) -- cols %MultiLengths; #IMPLIED -- list of lengths, default: 100% (1 col) -- onload %Script; #IMPLIED -- all the frames have been loaded -- onunload %Script; #IMPLIED -- all the frames have been removed -- > ]]>
属性定義
FRAMESET要素は，長方形の部分空間を使って，主たる利用者ウィンドウのレイアウトを指定する。
rows属性を設定することによって，フレーム集合における水平方向の部分空間(子領域)の個数を定義する。cols属性を設定することによって，上下方向の部分空間(子領域)の個数を定義する。格子を生成するために，両属性を同時に設定してもよい。
rows属性が設定されない場合は，各列はページの全体の長さに達する。cols属性が設定されない場合は，各行はページ全体の幅に達する。いずれの属性も設定されない場合は，フレームはちょうどページのサイズと一致する。
フレームは，列に対しては左から右に，行に対しては上から下に生成される。両属性とも指定される場合は，表示は，一番上の行で左から右に，2番目の行で左から右に，などと生成される。
最初の例は，画面を上下方向に2分割，すなわち，上半分及び下半分に分割される。
<FRAMESET rows="50%, 50%"> ...the rest of the definition... </FRAMESET>
次の例は，列を三つ生成する。2番目の列は，250画素の固定幅をもつ。これは，例えば，既知のサイズで画像を保持するのに有用となる。最初の列は，(固定幅を除いた)残りの空間の25%となり，3番目の列は，同じ残りの空間の75%となる。
<FRAMESET cols="1*,250,3*"> ...the rest of the definition... </FRAMESET>
次の例は，部分空間から成る2x3の格子を生成する。
<FRAMESET rows="30%,70%" cols="33%,34%,33%"> ...the rest of the definition... </FRAMESET>
次の例に対しては，ブラウザウィンドウが現在1000画素の高さと仮定する。最初のビューには，高さ全体の30%，すなわち，300画素が割り当てられる。2番目のビューは，ちょうど400画素の高さに指定される。これによって，300画素が残るが，それを他の二つのフレームに分割する。4番目のフレームの高さは"2*"と指定されている。これは，3番目のフレームの高さの2倍を示す。3番目のフレームの高さは，単に"*"(1*と等価)となっている。そこで，3番目のフレームの高さは100画素となり，4番目は200画素となる。
<FRAMESET rows="30%,400,*,2*"> ...the rest of the definition... </FRAMESET>
合計が実際に利用可能な空間の100%とはならない絶対的な長さは，利用者エージェントによって調整されることが望ましい。100%に足りない場合は，残りの空間は，各ビューに比例して割り当てるのがよい。100%を超える場合は，空間全体の指定割合に従って，各ビューを削減するのがよい。
フレーム集合は，どのレベルまでも入れ子にしてよい。
次の例では，外側のFRAMESETが，利用可能な空間を3列に均等分割する。内側のFRAMESETは，その後，2番目の領域を2行に分割するが，高さは均等とはしない。
<FRAMESET cols="33%, 33%, 34%">
...contents of first frame...
<FRAMESET rows="40%, 50%">
...contents of second frame, first row...
...contents of second frame, second row...
</FRAMESET>
...contents of third frame...
</FRAMESET>
文書作成者は，一つのOBJECT要素を介してデータを取り込むことによって，幾つかのフレーム間でこのデータを共有してよい。文書作成者は，OBJECT要素をフレーム集合文書のHEAD要素に含め，id属性を用いてそれに名前を付けることが望ましい。フレーム集合におけるフレームの内容となる任意の文書は，この識別子を参照してよい。
次の例は，フレーム集合全体に対して定義されたOBJECT要素をスクリプトが参照する方法を示している。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE>This is a frameset with OBJECT in the HEAD</TITLE>
<!-- This OBJECT is not rendered! -->
<OBJECT id="myobject" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
<FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>
<!-- In bianca.html -->
<HTML>
<HEAD>
<TITLE>Bianca's page</TITLE>
</HEAD>
<BODY>
...the beginning of the document...
<P>
<SCRIPT type="text/javascript">
parent.myobject.myproperty
</SCRIPT>
...the rest of the document...
</BODY>
</HTML>
<![ %HTML.Frameset; [ <!-- reserved frame names start with "_" otherwise starts with letter --> <!ELEMENT FRAME - O EMPTY -- subwindow --> <!ATTLIST FRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #IMPLIED -- link to long description (complements title) -- name CDATA #IMPLIED -- name of frame for targetting -- src %URI; #IMPLIED -- source of frame content -- frameborder (1|0) 1 -- request frame borders? -- marginwidth %Pixels; #IMPLIED -- margin widths in pixels -- marginheight %Pixels; #IMPLIED -- margin height in pixels -- noresize (noresize) #IMPLIED -- allow users to resize frames? -- scrolling (yes|no|auto) auto -- scrollbar or none -- > ]]>
属性定義
他の箇所で定義される属性
FRAME要素は，単一フレームの内容及び見かけを定義する。
src属性は，フレームが含む初期文書を指定する。
HTML文書の例を次に示す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/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 | | | | | | | | | | | ------------------------------------------
これによって，利用者エージェントは，各ファイルを分離されたビューにロードすることになる。
フレームの内容は，フレームの定義と同じ文書の中に存在してはならない。
不当な例
次のフレーム集合定義は，正当なHTMLではない。これは，2番目のフレームの内容が，フレーム集合と同じ文書の中に存在することによる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/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>
次の例は，装飾的なFRAME属性の使用を示す。フレーム1はスクロールバーを許容しないように指定している。フレーム2は，その内容(初期値は画像ファイル)の周囲に空白を残し，そのフレームはサイズ変更可能ではない。フレーム3とフレーム4との間には枠線が描かれていない。デフォルトで，フレーム1，2及び3の間には，それぞれ枠線が描かれる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contents_of_frame1.html" scrolling="no">
<FRAME src="contents_of_frame2.gif"
marginwidth="10" marginheight="15"
noresize>
</FRAMESET>
<FRAME src="contents_of_frame3.html" frameborder="0">
<FRAME src="contents_of_frame4.html" frameborder="0">
</FRAMESET>
</HTML>
備考 フレームのターゲットを決定する際の現在の実際的方法に関する情報については，附属書のフレームに関する備考を参照すること。
属性定義
認識されるフレーム名に関する情報については，ターゲットフレーム名を参照すること。
次の例は，ターゲットがフレームの内容の動的な修正を許容する方法を示す。ここでは，まず，文書frameset.htmlの中でフレーム集合を定義する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET rows="50%,50%"> <FRAME name="fixed" src="init_fixed.html"> <FRAME name="dynamic" src="init_dynamic.html"> </FRAMESET> </HTML>
次に，init_dynamic.htmlの中で，"dynamic"と命名されたフレームにリンクする。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>A document with anchors with specific targets</TITLE>
</HEAD>
<BODY>
...beginning of the document...
<P>Now you may advance to
<A href="slide2.html" target="dynamic">slide 2.</A>
...more document...
<P>You're doing great. Now on to
<A href="slide3.html" target="dynamic">slide 3.</A>
</BODY>
</HTML>
いずれかのリンクを活動化することによって，"dynamic"と命名されたフレームの中の新しい文書を開く。その一方で，"fixed"という他のフレームがその初期内容を保持する。
備考 フレーム集合定義は決して変化しないが，フレーム集合定義の複数フレームの一つの内容は変化できる。一度フレームの初期内容が変化すると，フレーム集合定義は，そのフレームの現在の状態を反映しなくなる。
現在のところ，一つのURIにおけるフレーム集合の全状態を符号化する方法は存在しない。そのため，利用者エージェントの多くは，利用者がブックマークをフレーム集合に割り当てることを許可していない。
同じ文書の中のリンクの多くが同じターゲットを指し示す場合，一度そのターゲットを指定して，各要素のtarget属性を用いずに済ますことが可能である。これは，BASE要素のtarget属性を設定することで行える。
先の例に戻る。この場合は，ターゲット情報を，BASE要素で定義し，A要素からは削除することによって，簡単化している。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>A document with BASE with a specific target</TITLE>
<BASE href="http://www.mycom.com/Slides" target="dynamic">
</HEAD>
<BODY>
...beginning of the document...
<P>Now you may advance to <A href="slide2.html">slide 2.</A>
...more document...
<P>You're doing great. Now on to
<A href="slide3.html">slide 3.</A>
</BODY>
</HTML>
利用者エージェントは，次の優先順位に従って，リンク資源をロードするターゲットフレームを決定することが望ましい。ただし，優先順位の高いものから低いものへと列挙する。
利用者エージェントは，target属性を上書きする機構を利用者に提供してもよい。
文書作成者は，フレームをサポートしないか，又はフレームを表示しないように構成されている利用者エージェントに代替内容を提供することが望ましい。
<![ %HTML.Frameset; [ <!ENTITY % noframes.content "(BODY) -(NOFRAMES)"> ]]> <!ENTITY % noframes.content "(%flow;)*"> <!ELEMENT NOFRAMES - - %noframes.content; -- alternate content container for non frame-based rendering --> <!ATTLIST NOFRAMES %attrs; -- %coreattrs, %i18n, %events -- >
NOFRAMES要素は，フレームが表示されていない場合にだけ，表示することが望ましい内容を指定する。フレームをサポートする利用者エージェントは，フレームを表示しないように構成されている場合には，NOFRAMES宣言の内容だけを表示しなければならない。フレームをサポートしない利用者エージェントは，いかなる場合でも，NOFRAMESの内容を表示しなければならない。
NOFRAMESはフレーム集合文書のFRAMESETセクションで使用できる。
例を次に示す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40">
<HTML>
<HEAD>
<TITLE>A frameset document with NOFRAMES</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="main.html">
<FRAME src="table_of_contents.html">
<NOFRAMES>
<P>Here is the <A href="main-noframes.html">
non-frame based version of the document.</A>
</NOFRAMES>
</FRAMESET>
</HTML>
longdesc属性によって，文書作成者は，非視覚的利用者エージェントを使用する人間にフレーム文書をよりアクセスし易くすることができる。この属性は，フレームの長記述を提供する資源を指定する。文書作成者は，フレームに関連する長記述が，フレームの内容ではなく，フレームに添付される点に注意するほうがよい。内容は，時間が経つと変化することがあるので，初期の長記述がフレームの時間が経った後の内容に適切でなくなることも多い。特に，文書作成者は，フレームの唯一の内容として画像を取り込まない方がよい。
次のフレーム集合文書は，二つのフレームを記述している。左のフレームは目次を含み，右のフレームは最初はダチョウの画像を含んでいる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>A poorly-designed frameset document</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich.gif" longdesc="ostrich-desc.html"> </FRAMESET> </HTML>
画像がどのHTML要素にも非依存にフレームに含まれている点に注意すること。そのため，文書作成者は，longdesc属性を介する以外に代替テキストを指定する方法をもたない。右フレームの内容が変わる場合，例えば，利用者が目次からガラガラヘビを選択する場合，利用者は，フレームの新しい内容へのテキスト形式のアクセスをもたない。
そこで，文書作成者は，フレームの中に直接に画像を置かないほうがよい。代わりに，画像を分離したHTML文書の中に指定し，そこで適切な代替テキストを用いて注記をつけることが望ましい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>A well-designed frameset document</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich-container.html"> </FRAMESET> </HTML>
<!-- In ostrich-container.html: --> <HTML> <HEAD> <TITLE>The fast and powerful ostrich</TITLE> </HEAD> <P> <OBJECT data="ostrich.gif" type="image/gif"> These ostriches sure taste good! </OBJECT> </HTML>
<!ELEMENT IFRAME - - (%flow;)* -- inline subwindow --> <!ATTLIST IFRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #IMPLIED -- link to long description (complements title) -- name CDATA #IMPLIED -- name of frame for targetting -- src %URI; #IMPLIED -- source of frame content -- frameborder (1|0) 1 -- request frame borders? -- marginwidth %Pixels; #IMPLIED -- margin widths in pixels -- marginheight %Pixels; #IMPLIED -- margin height in pixels -- scrolling (yes|no|auto) auto -- scrollbar or none -- align %IAlign; #IMPLIED -- vertical or horizontal alignment -- height %Length; #IMPLIED -- frame height -- width %Length; #IMPLIED -- frame width -- >
属性定義
他の箇所で定義される属性
行内に挿入される情報は，この要素のsrc属性によって指定される。一方で，IFRAME要素の内容は，フレームをサポートしないか，又はフレームを表示しないように構成される利用者エージェントだけが表示するのがよい。
フレームをサポートする利用者エージェントに対して，次の例は，テキストの中央に枠線によって囲まれた行内フレームを置く。
<IFRAME src="foo.html" width="400" height="500"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
<A href="foo.html">the related document.</A>]
</IFRAME>
行内フレームはサイズ変更されない。そこで，noresize属性をとらない。