インライン要素の早見表 | HTMLタグ

HTMLタグのインライン要素を一覧にしました。インライン要素とは領域を持たないテキスト要素やイメージ要素です。わかりやすい仕様としては改行されません。

HTMLタグのインライン要素に関するリスト

リンク

外部ファイル

HTML5で廃止されるタグ(非推奨)

テキスト要素

<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="http://webpad.felicyle.com/">こちら</a></p>
<a href="http://webpad.felicyle.com/" target="_blank">新規ページで開く</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="MS P明朝,MS 明朝">
<p>WEB制作に便利なテンプレートサイト。</p>
</body>