• フォーム『form要素』
• 水平線『hr要素』(Horizontal Rule)
• アンカー『a要素』(Anchor)
• 画像『img要素』(IMaGe)
• 改行『br要素』(BReak)
• 強調『em要素』(EMphasis)と『strong要素』
• 削除『del要素』(DELete)と追加『ins要素』(INSert)
• 汎用インライン要素『span要素』

お問合せフォームやアンケートフォームなど、ユーザーに入力や選択させる場合に使用します。

フォームコントロール(フォームに含む様々なパーツ)には、type属性でパーツの種類(テキスト入力欄、送信ボタン、チェックボタンなど)を指定する『input要素』、セレクトメニューに使用する『select要素』、複数行のテキストに使用する『textarea要素』、汎用ボタンとして使用する『button要素』があります。また、これらをグループ化するための『fieldset要素』、グループ名を指定するための『legend要素』、個々のパーツのラベルテキストを指定するための『label要素』を使用することで、フォームをさらに詳細に構造化することができます。

<form name="form1" id="form1" action="../contact.cgi" method="post">

<input type="hidden" name="need" value="お名前 電話番号 メールアドレス 性別 お問合せ内容" />

<input type="hidden" name="need" value="メールアドレス メールアドレス2" />

<table summary="お問合せフォーム" cellpadding="0" cellspacing="0" id="formTable">

<tr>

<th><label for="name">お名前</th>

<td><input type="text" name="お名前" id="name" value="" size="35" />

</tr>

<tr>

<th><label for="tel">電話番号</th>

<td><input type="text" name="電話番号" id="tel" value="" size="35" />

</tr>

<tr>

<th><label for="email">メールアドレス</th>

<td><input type="text" name="メールアドレス" id="email" value="" size="35" />

</tr>

</tr>

<tr>

<th><label for="email2">メールアドレス(再度入力)</th>

<td><input type="text" name="メールアドレス2" id="email2" value="" size="35" />

</tr>

<tr>

<th>性別</th>

<td><input type="radio" name="性別" id="sex1" value="男" />男

<td><input type="radio" name="性別" id="sex2" value="女" />女

</tr>

<tr>

<th><label for="inquiry">お問合せ内容</th>

<td><textarea name="お問合せ内容" id="inquiry" cols="50" rows="10" wrap="soft"></textarea></td>

</tr>

</table>

<div id="formButton">

<input type="submit" id="submit" value="送信" />

<input type="reset" id="reset" value="リセット" />

</div>

</form>

ページ内で区切りをあらわす罫線を引く場合に使用します。

<hr />

アンカー(クリックしたら別の場所へ飛ぶ、いわゆる「リンク」)を定義する場合に使用します。

href属性をつけた場合にはリンク先への始点となり、name属性をつけた場合には別の場所からの終点となります。

<a href="http://www.helios-j.com/">オリジナルTシャツショップ&nbsp;Helios</a>

<a href="mens/index.html">メンズ</a>

<a href="index.html#brightest">Brightest</a>

画像を埋め込む場合に使用し、src属性やalt属性と必ず一緒に記述します。

src属性では画像ファイルのURLを、alt属性では画像が表示されなかった場合の代替テキストを指定します。

width属性やheight属性で幅や高さを指定することもできます。画像を安定的に表示させるのならば、必ず指定してください。

<img src="image/helios.jpg" alt="ヘリオスティーシャツの写真" width="150" height="240" />

テキストの途中で改行する場合に使用します。本来テキストは領域幅に合わせて自動的に折り返されますが、任意の場所で改行させる場合に使用します。

<p>数多くあるオリジナルTシャツショップの中から“オリジナルTシャツショップ Helios”へ<br />

ご来店頂きまして誠にありがとうございます!!</p>

テキストに強調という意味を与える場合に使用し、『em要素』は通常の強調で、『strong要素』は『em要素』より強い強調を意味します。なおブラウザでは、『em要素』は斜体で表示され、『strong要素』は太字で表示されます。

<p>数あるTシャツショップの中から<em>Helios</em>へご来店頂きまして誠にありがとうございます!!</p>

<p>数あるTシャツショップの中から<strong>Helios</strong>へご来店頂きまして誠にありがとうございます!!</p>

テキストを削除したことを表す場合には『del要素』を使用し、テキストを追加したことを表す場合には『ins要素』を使用します。なおブラウザでは、『del要素』には取り消し線が表示され、『ins要素』には下線が表示されます。

<p>このタイミングで<del>水性</del><ins>油性</ins>インクを流し込みます。</p>

この要素自身には特に意味はなく、CSS(Cascading Style Sheets)を適用するために使用するのが一般的です。

<p>数あるTシャツショップの中から<span class="fwB">Helios</span>へご来店頂きまして誠にありがとうございます!!</p>