HTMLタグのインライン要素を一覧にしました。インライン要素とは領域を持たないテキスト要素やイメージ要素です。わかりやすい仕様としては改行されません。
テキスト要素
<br>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》文章内での改行。XHTMLの場合は<br />で記述
<!--HTML--> <p>中途半端な箇所で改行しちゃうと文<br> 章がとても読みにくいんだよ</p> <!--XHTML--> <p>中途半端な箇所で改行しちゃうと文<br /> 章がとても読みにくいんだよ</p>
<span>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》範囲の指定、文字効果をつける場合等に
<p><span>WEB制作に</span>便利なテンプレートサイト。</p>
<em>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》強調
<p><em>WEB制作に</em>便利なテンプレートサイト。</p>
<strong>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》より強い強調
<p><strong>WEB制作に</strong>便利なテンプレートサイト。</p>
<q>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》引用文であることを表す用語。短文の引用
<p><q>人生の一瞬に立ち止まり、</q>たそがれたい。何をするでもなく、どこへ行くでもない。南の海辺に、ひとりプロペラ機から下り立った女・タエコ。</p>
<cite>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》文章が引用されている場合、その参照元を表す用語
<p>オレのことについては、<cite>オレのWEBPAD</cite>を参照してください。</p>
<sup>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》上付き文字にする
<p>一坪って何m<sup>2</sup>なのでしょう。</p>
<sub>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》下付き文字にする
<p>H（水素原子）2個とO（酸素原子）1個が結合してできてH<sub>2</sub>Oになる。</p>
<small>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》文字サイズを小さめに表示
<p><small>WEB制作に</small>便利なテンプレートサイト。</p>
<b>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》太字で表示。強調ではない
<p><b>WEB制作に</b>便利なテンプレートサイト。</p>
<i>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》イタリック体で表示
<p><i>WEB制作に</i>便利なテンプレートサイト。</p>
<abbr>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》略語（全般）されている単語であることを表す
<abbr title="オレのWEBPAD">オレPAD</abbr>
<dfn>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》文章に何度も表す単語に対して定義（説明）する用語
<p>オレの<dfn>WEBPAD</dfn>は自分のWEB制作のために準備したWEBのPADだよ。</p>
<code>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》ソースコードをhtml上に表示する
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code>
<var>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》プログラムの変数・引数コードであることを表す
<p>先生、<var>var</var>って何ですかぁ？</p>
<kbd>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》入力する文字であることを表す
<p>PASS：<kbd>4649</kbd>と入力すれば爆発しません。</p>
<samp>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》プログラムの出力サンプルであることを表す
<p>何もしてないのに<samp>不正な処理を行ったので強制終了されます。</samp>と表示されて壊れた。</p>
<bdo>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》書字方向を変更します。デフォルトは左から右
<p><bdo dir="ltr">←←←←</bdo></p> <p><bdo dir="rtl">→→→→</bdo></p>
リンク
<a>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》他のページへ飛ばすリンク・アンカー
<p>オレのWEBPADは<a href="https://webpad.work/">こちら</a></p> <a href="https://webpad.work/" target="_blank" rel="noopener">新規ページで開く</a>
外部ファイル
<img>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》ページに画像を表示させる要素。XHTMLでは/>で閉じる
<!--HTML--> <p><img src="image/orepad.jpg" alt="HTML" height="400" width="250"></p> <!--XHTML--> <p><img src="image/orepad.jpg" alt="XHTML" height="400" width="250" /></p>
<map>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》<img>内に複数のリンクを指定する
<!--a要素で指定した場合--> <img src="map.jpeg" alt="我が社の地図" usemap="#chiz_01"> <map name="chiz_01"> <ul> <li><a shape="rect(四角形)" coords="X,Y,X,Y" href="chiz_01.html">リンク1</a></li> <li><a shape="circle(円形)" coords="X,Y,半径" href="chiz_02.html">リンク2</a></li> <li><a shape="poly(多角形)" coords="X,Y,X,Y,X,Y" href="chiz_03.html">リンク3</a></li> <li><a shape="default(画面全体)" href="chiz_04.html">リンク2</a></li> </ul> </map> <!--area要素で指定した場合--> <img src="map.jpeg" alt="我が社の地図" usemap="#chiz_02"> <map name="chiz_02"> <area shape="rect(四角形)" coords="X,Y,X,Y" href="chiz_01.html" alt="リンク1"> <area shape="circle(円形)" coords="X,Y,半径" href="chiz_02.html" alt="リンク2"> <area shape="poly(多角形)" coords="X,Y,X,Y,X,Y" href="chiz_03.html" alt="リンク3"> <area shape="default(画面全体)" href="chiz_04.html" alt="リンク4"> </map>
<script>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》ページ内でスクリプトを動かすための要素
<!--外部のスクリプトを読み込む-->
<script type="text/javascript" src="example.js"></script>
<!--ページ内に記述-->
<script type="text/javascript">
document.write("ジャバスクリプトとかさ！");
</script>
<object>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》外部ファイルなどのデータを埋め込む場合に使用
<object data="xxxxx.gif" type="image/gif" width=100 height=100>代替内容</object>
<iframe>
| Strict | × | Transitional | ○ |
|---|
《要素の働き》ページ内に外部ページを表示
<iframe src="index_2.html">代替内容</iframe>
フォーム
<input>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》<form>で使用する入力等の反応要素
<form> <!--※入力、選択肢--> <input type="text" value="テキスト入力欄"> <input type="password" value="パスワード入力欄"> <input type="radio" value="ラジオボタン">] <input type="checkbox" value="チェックボックス"> <input type="file" value="ファイル選択"> <!--※ユーザーに隠す--> <input type="hidden" value="隠しデータ"> <!--※ボタン--> <input type="submit" value="送信ボタン"> <input type="reset" value="リセットボタン"> <input type="image" src="button.gif" alt="送信ボタン"> <input type="button" value="汎用ボタン"> </form>
<label>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》<form>のinputに対するラベルの関連付け
<form> <label for="name">名前：</label> <input type="text" name="namae" id="name"> <input type="radio" name="sex" value="男" id="man"> <label for="man" accesskey="y">男</label> <input type="radio" name="sex" value="女" id="woman"> <label for="woman" accesskey="n">女</label> </form>
<select>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》選択肢を表示
<select name="menu"> <option value="選択肢1">ニューゲーム</option> <option value="選択肢2">コンテニュー</option> <option value="選択肢3">ゲーム終了</option> </select>
<textarea>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》テキスト入力欄を表示
<p> <textarea name="名前" cols="横文字数" rows="行数"> 初期値で表示される文章。 </textarea> </p>
<button>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》<input>とは違い、内容を持てるボタン
<p><button type="button" name="名前" value="送信データ">ボタンの内容</button></p>
HTML5で廃止されるタグ（非推奨）
<s>
| Strict | × | Transitional | △ |
|---|
《要素の働き》文字に取り消し線を表示。<strike>と同じ
<p>WEB制作に<s>便利な</s>テンプレートサイト。</p>
<acronym>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》頭文字を使って略語されている単語であることを表す
<acronym title="Play Station Portable">PSP</acronym>
<font>
| Strict | × | Transitional | △ |
|---|
《要素の働き》フォントのサイズ・色・種類を指定
<p><font color="red">WEB制作に</font>便利なテンプレートサイト。</p>
<big>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》文字サイズを大きめに表示
<p><big>WEB制作に</big>便利なテンプレートサイト。</p>
<strike>
| Strict | × | Transitional | △ |
|---|
《要素の働き》文字に取り消し線を表示。<s>と同じ
<p>WEB制作に<strike>便利な</strike>テンプレートサイト。</p>
<u>
| Strict | × | Transitional | △ |
|---|
《要素の働き》文字に下線を表示
<p>WEB制作に便利な<u>テンプレート</u>サイト。</p>
<tt>
| Strict | ○ | Transitional | ○ |
|---|
《要素の働き》等幅フォントで表示される
<p><tt>WEB制作に便利なテンプレートサイト。</tt></p>
<applet>
| Strict | × | Transitional | △ |
|---|
《要素の働き》Javaアプレットの埋め込み
<applet codebase="../applet/" code="webpad.class" height="100" height="50"></applet>
<basefont>
| Strict | × | Transitional | △ |
|---|
《要素の働き》基準となるフォントを指定
<body> <basefont size="4" color="#333333" face="ＭＳ Ｐ明朝,ＭＳ 明朝"> <p>WEB制作に便利なテンプレートサイト。</p> </body>
