Help:ウィキテキストにおけるHTML

ウィキペディア日本語版のヘルプページです。元文書はメタウィキのヘルプです。

---

記事編集時のウィキテキストの中でのHTMLの使用について解説します。HTMLにおけるHTML要素・属性のうち許容されている一部が使えます。それ以外ではそのまま表示されてしまいます。ウィキペディアでは一部の要素はHTMLの仕様とは振る舞いが異なります。またウィキペディアでは、出典を示すのに用いるref要素など独自のウィキテキスト言語の要素が用意されています。

HTMLを使えば、ウィキテキスト言語でカバーできていないこともできます。id属性を利用してリンク先として指定したりといったこともできます。

一方で、ウィキペディアではHTML要素の大部分をウィキテキスト言語で簡易的に記述できます。ウィキペディアで使用しているウィキテキスト言語によるマークアップ（ウィキマークアップ）についてはHelp:ページの編集などをご覧ください。

使用できるHTML

次のHTML要素のみが使用できます。

• abbr
• b
• bdi
• bdo
• blockquote
• br
• caption
• cite
• code
• data
• dd
• del
• dfn
• div
• dl
• dt
• em
• h1
• h2
• h3
• h4
• h5
• h6
• hr
• i
• ins
• kbd
• li
• mark
• ol
• p
• pre
• q
• rb
• rp
• rt
• ruby
• s
• samp
• small
• span
• strong
• sub
• table
• td
• th
• time
• tr
• u
• var
• wbr

上記のHTML要素について簡単に解説します。「〇〇に相当」と書かれている部分はウィキマークアップです。他の編集者との共同作業を円滑にするため、通常はHTMLではなくウィキマークアップを用いてください。

見出し

セクション編集ができないなど、違いについては#見出し節を参照。

<h1>見出し</h1>

「ページ名」と同じレベルの見出しが生成されますので実際には使用しないでください。

<h2>見出し</h2>

== 見出し == に相当。

<h3>見出し</h3>

=== 見出し === に相当。

<h4>見出し</h4>

==== 見出し ==== に相当。

<h5>見出し</h5>

===== 見出し ===== に相当。

<h6>見出し</h6>

====== 見出し ====== に相当。

文字装飾

<em>文字列</em>

内容を強調する（強調により文のニュアンスが変わる場合に用いる）。（sampleサンプル）。

<strong>文字列</strong>

内容の強い重要性を示す。ボールド体。（sampleサンプル）。

<i>文字列</i>

他と区別したい文字。イタリック体。''文字列'' に相当。（sampleサンプル）。

<b>文字列</b>

他と区別したい文字。(太字にする)ボールド体。'''文字列''' に相当。（sampleサンプル）。

<small>文字列</small>

細目。サイズを小さく（代替：<span style="font-size: smaller;">文字列</span>）。{{small|文字列}}でも同様。なるべく代替記法を検討してください（Help:ページの編集#文字の大きさを参照）。（sampleサンプル）。

<sub>文字列</sub>

下付き文字。（_{sampleサンプル}）。

<sup>文字列</sup>

上付き文字。（^{sampleサンプル}）。

<del>文字列</del>

削除部分を示す。（sampleサンプル）。

<s>文字列</s>

正しくなくなったことを示す。（sampleサンプル）。

<ins>文字列</ins>

挿入部分を示す。（sampleサンプル）。

<u>文字列</u>

下線を引く。非推奨（代替：<span style="text-decoration:underline">文字列</span>）。{{U|文字列}}を使用するとよい。（sampleサンプル）。

<code>文字列</code>

ソースコードを示す。{{code|文字列}}でも同様。（sampleサンプル）。

<var>文字列</var>

変数を示す。{{var|文字列}}でも同様。（sampleサンプル）。

<pre>文字列</pre>

整形済みテキスト。ソースのまま表示する。ウィキテキスト中の先頭が空白で始まる行にほぼ相当。HTMLとの違いについては#Pre節を参照。

レイアウト

<p>文字列</p>

パラグラフ。ウィキテキスト中の2回改行に相当。

<span>文字列</span>

インラインについてスタイル指定や言語の指定。class ・ CSS の style や lang などと併用。

<div>文字列</div>

ブロックについてスタイル指定。class や CSS の style などと併用。

<br />

強制改行。主に表中での改行に使用する。なお、<br></br><br/> <br /> は HTML ソースが生成される際にすべて <br /> となりますので、どれを利用しても結果は同じです。これをどちらかに直すだけの編集はお控えください。

<blockquote>文字列</blockquote>

段落の引用。

<cite>文字列</cite>

出典・参照先。

<q>文字列</q>

行中の引用。

<hr />

セクション内での話題の区切りを示す。水平線。---- に相当。

リスト・箇条書き

<dl>dt, dd</dl>

説明/定義リスト。次の <dt>文字列</dt> とあわせて ; に相当。

<dt>文字列</dt>

説明/定義する語。

<dd>文字列</dd>

説明/定義する内容。: に相当。

<ol>項目li</ol>

番号付き箇条書き。<li>文字列</li> とあわせて # に相当。

<ul>項目li</ul>

番号なし箇条書き。<li>文字列</li> とあわせて * に相当。

<li>文字列</li>

箇条書きの各項目。

ルビ

Wikipedia:表記ガイドではこれらの要素の使用は、表組みや情報テンプレート、囲みの引用文などの限られた状況下でのみ認めています。これら以外の場合は丸括弧を使って「漢字（かんじ）」とそのまま入力するか、{{読み仮名}}・{{読み}}を使ってください。

<ruby>文字列</ruby>

ルビの開始/終了。

<rb>文字列</rb>

ルビの対象文字列。HTML5では不要。

<rt>文字列</rt>

ルビ。

<rp>記号</rp>

ルビ表示未対応の環境においてインラインに表示するルビを囲む記号。

表

<table>以下の要素</table>

表の外枠。開始は{|、終了は|} に相当。

<caption>文字列</caption>

表のキャプション。|+ に相当。

<tr>セルth, td</tr>

横1列を定義する。|- に相当。

<th>文字列</th>

見出しセル。! に相当。

<td>文字列</td>

データセル。| に相当。

コメントアウト

<!-- 文字列 -->

文字列 の部分をコメントアウト。

使用できないHTML

#使用できるHTML節で挙げられた以外のHTML要素はそのまま表示されます。

例えば、A要素（アンカー）を使った外部リンクは使用できません。以下のようになります。

マークアップ	<a href="https://meta.wikimedia.org/">メタウィキメディア・メインページ</a>
表示結果	<a href="https://meta.wikimedia.org/">メタウィキメディア・メインページ</a>
生成されるソースコード	&lt;a href="<a class="external free" href="https://meta.wikimedia.org/">https://meta.wikimedia.org/</a>"&gt;メタウィキメディア・メインページ&lt;/a&gt;</td>

おそらく執筆者の意図と異なる結果となります。これはソースコードでおそらく上記のように変換されてしまうためです。

外部リンクのためには、かわりに角括弧で囲むウィキテキスト言語のマークアップを用います。

ウィキペディアにおける正しいマークアップ

マークアップ	[https://meta.wikimedia.org/ メタウィキメディア・メインページ]
表示結果	メタウィキメディア・メインページ
生成されるソースコード	<a class="external text" href="https://meta.wikimedia.org/">メタウィキメディア・メインページ</a>

廃止された要素

次の要素はHTML5の仕様書から削除されました。代替のテンプレートを使うようにしてください。

廃止された要素は、引き続きブラウザでサポートされていますが、いつまでもサポートされる保証がありません。またMediaWiki上ではLintエラーとなります。

big

<big>...</big>はテキストを大きくするために使用されていました。

代替テンプレート：

{{Large}} – テキストを大きく表示するテンプレートです。{{Resize|large|...}}のエイリアスですのでどちらを使っても同じ結果が得られます。

スタイルシート：

font-size: larger;

center

<center>...</center>はテキストを中央揃えするために使用されていました。

代替テンプレート：

{{Center}}

スタイルシート：

text-align: center;

font

<font>...</font>はフォントのサイズや文字色などのスタイル変更に使用されていました。

代替テンプレート：

{{Color}} – <font color="">...</font>の代わりに使えるテンプレート。

{{Font}} – fontタグのように扱えるテンプレート。

{{Fontsize}} – <font size="">...</font>の変更だけを行うテンプレート。

strike

<strike>...</strike>はテキストの上に取り消し線を引くために使用されていました。
通常ウィキペディアの記事で取り消し線を扱うことはありません。

→「Wikipedia:アクセシビリティ § 打ち消し線」も参照

代替タグ：

<s>...</s>

tt

<tt>...</tt>は等幅フォントでテキスト表示するために使われていました。

代替テンプレート：

{{Mono}}

スタイルシート：

独自構成されたフォントファミリーを用いるべきではありません。

個別の注意

見出し

<h1>から<h6>までの見出し要素は、ウィキテキスト言語における=を使用したマークアップと同じほぼ表示結果となります。また同様に目次にも表示されます。違いは、「[編集]」リンクが付属していないことです。これを利用することで、特定のセクションからはセクション編集ができないようにすることが可能です。

以下のように記述すると、

<h4>サンプルの見出し（4レベル）</h4>

表示結果は次のようになります。

スタイル指定

<span> は行中のテキストのスタイルなどを指定する要素で、この要素の使用が推奨されます。古くからある要素の<font> も同様の効果がありましたが、現在では HTML5 の仕様を策定している Web Hypertext Application Technology Working Group (WHATWG) により廃止されました。

例えば以下2つの記述は、同じ表示結果が得られます。

<span style="color:red">赤い</span>文字

<font color="red">赤い</font>文字

<div> はブロック単位でスタイルを指定する要素です。

なお多くの場合には <div> や <span> を使ってスタイル指定をせずとも、既に用意された要素を使うほうが利用者に対して親切です。スタイルの指定に対応していない古いブラウザや、読み上げソフトを使用している場合などでも、執筆者の強調の意図が伝わります。

例えば、文中の言葉を強調したいときには、その文字列が強調されていることを明示する <strong> や <em>といった要素が用意されています。

ウィキテキスト言語では '''で囲むことで強調要素が作成されます。見栄えも統一されるため、最初にウィキテキスト言語でも記述できないか考慮してください。

Pre

ウィキテキスト中の <pre> 要素は、HTMLとは異なった振る舞いをします。要素で囲まれたテキストは、HTMLのように改行や空白が維持されますが、かつタグも見た通りに表示されます。これは、ウィキペディアでは、処理の途中でウィキテキスト言語の <nowiki> が組み合わさるためです。

以下のように記述すると、結果はその次のようになります。

<pre>This word is <b>bold</b>.    [[ウィキペディア]]の URL は[https://ja-two.iwiki.icu] です。{{PAGENAME}} </pre>

表示結果（注・囲いなどウィキペディアによるスタイルの指定も反映され表示されたものが実際の表示結果です）:

This word is <b>bold</b>.    [[ウィキペディア]]の URL は[https://ja-two.iwiki.icu] です。{{PAGENAME}}

HTMLの <pre> 要素のような表示結果を得たい場合には、ウィキペディアでは行頭に半角スペースを入れてください。タグなどは展開しつつ改行や空白などをソース通りに維持したテキストを表示させたい場合です。以下のように記述します。

 This word is <b>bold</b>.    [[ウィキペディア]]の URL は[https://ja-two.iwiki.icu] です。{{PAGENAME}}

表示結果（上の表示結果の注に同じ）:

This word is bold.    ウィキペディアの URL は[1] です。ウィキテキストにおけるHTML

コメント

ウィキテキスト中で <!-- ... --> を使ったHTMLのコメントは、生成されたHTMLコード中にはいっさい現れません。

属性

大部分の要素には style 属性があります。例えば

<div style="font-size:80%">
これは<span style="color:red">赤い</span>テキストです。
</div>

は次を生成します。

これは赤いテキストです。

また大部分の要素は、クラス（class）と ID を指定できます。クラスはスタイルシートと連動して、指定部分のスタイルを指定します。例えば

<div class="infobox">インフォボックスの例</div>

インフォボックスの例

は右のように生成されます。これは、 infobox クラスが Mediawiki:Common.css の記述によって右端揃えの浮動ボックスとして定義されているからです。

クラスと ID はJavaScriptのコードからHTML要素を参照するときにも使えます。例として{{UserName}}があります。

他にも、例えば title 属性が利用できます。

海抜<span title="6.1 km" style="border-bottom:1px dotted">20000 ft</span>

は次のように生成されます（点線の下線部の上にカーソルを置いた時のポップアップを指定しています）。

海抜20000 ft

例外

MediaWiki名前空間にあるページの一部（ボタンのラベルなど）ではHTMLが使えません。タグがそのまま表示されます。

他方で純粋なHTML コードとして認識されるものもあり、その場合 HTMLしか使えず、ウィキテキスト言語はHTMLに変換されません。

サイト全体の CSS および JS スタイルシートおよび利用者指定の CSS や JS スタイルシート（Help:外装の詳細設定を参照）のページを表示すると、自動的に <pre> タグで囲まれているような体裁で表示されます。

ウィキペディア独自の要素

HTML 要素以外にも、MediaWikiで使える< >で囲んだ要素があります。以下に代表的なものを紹介します。ここにないものは英語版「Help:HTML_in_wikitext#Parser_and_extension_tags」を参照。

ref

<ref> 文字列 </ref>

脚注を作ります。<references />とセットで使います。Help:脚注参照。

nowiki

<nowiki> 文字列 </nowiki>

HTMLタグ、ウィキマークアップを全て無効化します。

gallery

<gallery> 画像ファイル名|文字列 </gallery>

画像を並べて描画します。横幅は自動的に折り返され閲覧環境に依存しません。Help:画像の表示#ギャラリーを参照。

imagemap

画像をクリックした位置によって異なるリンク先を指定できます。Help:画像の表示#クリッカブル画像を参照。

poem

<poem> 文字列 </poem>

詩や歌詞などの引用に用います。HTMLソース生成の際、<div class="poem"></div>で囲まれ、ウィキテキストの各行毎に自動的に<br />が付加されます。

score

楽譜を描画します。Help:Scoreを参照してください。

math, math chem, chem

数式や化学式を描画します。en:Help:Displaying a formula（英語）あるいはm:ヘルプ:数式の書き方を参照してください。かつて化学式の要素には<ce>が使われていましたが、この要素名は短すぎて意味が分かりづらいという指摘があったため、2017年3月から<chem>が使用可能になりました。

timeline

時系列の図を描画します。mw:Extension:EasyTimelineです。

includeonly, noinclude, onlyinclude

テンプレート呼び出しをする時に呼び出し部分や非呼び出し部分を指定する要素です。Help:テンプレートを参照。

syntaxhighlight

→詳細は「mw:Extension:SyntaxHighlight」を参照

Pygments を利用してプログラミング言語などをみやすく表示する要素です。MediaWiki 1.16以前では、<source> が使われてきましたが、このタグを使用するプログラミング言語を表示する際に不都合なため、非推奨になりました。代わりに、<syntaxhighlight> を使うべきです。 lang= 言語を指定して使います。

例：

<syntaxhighlight lang="Java">
public class HelloWorld
  {
  public static void main (String [] args)
    {
    // Java言語の HelloWorld プログラム
    System.out .println ("Hello, World.") ;
    }
  }
</syntaxhighlight>

結果：

public class HelloWorld
  {
  public static void main (String [] args)
    {
    // Java言語の HelloWorld プログラム
    System.out .println ("Hello, World.") ;
    }
  }

lang= で指定できるプログラミング言語の一覧はこちらにあります。サポートされていない言語を指定した場合、または言語指定がない <syntaxhighlight> を使用した場合、使用したページがCategory:構文ハイライトエラーがあるページへ登録されます。最新情報は編集画面に <syntaxhighlight></syntaxhighlight> と打ち込めば表示されます。

ほかに次のパラメータが指定できます。

• line と書くとソースの行番号が出力されます。
• start=整数 は開始行番号を指定します。
• highlight=整数 は強調する行を指定します。
• inlineと書くと、地の文に埋め込むように表示されます。
• strict と書くと厳密モード (strict mode) で出力されます。

下の例は <syntaxhighlight lang="html" line start="3" highlight="2-4, 6"> と指定したものです。

<div style="font-size:80%">
これは<span style="color:red">赤い</span>テキスト<br />です。
これは<span style="color:red">赤い</span>テキスト<br />です。
これは<span style="color:red">赤い</span>テキスト<br />です。
</div>
<hr />

下の例は <syntaxhighlight lang="html"> と指定したものです。

<div style="font-size:80%">
これは<span style="color:red">赤い</span>テキスト<br />です。
これは<span style="color:red">赤い</span>テキスト<br />です。
これは<span style="color:red">赤い</span>テキスト<br />です。
</div>
<hr />

下の例は <syntaxhighlight lang="html" inline> と指定したものです。

<div style="font-size:80%"> これは<span style="color:red">赤い</span>テキスト<br />です。 これは<span style="color:red">赤い</span>テキスト<br />です。 これは<span style="color:red">赤い</span>テキスト<br />です。 </div> <hr />

また、専用のテンプレートである{{Syntaxhighlight}}が用意されています。

テンプレート引数をタグで囲むためには

テンプレートの引数をXML風タグで囲んでテンプレート呼び出しをするとうまく機能しません。この時には {{#tag:}} を使用することで、この問題を回避できます。

関連項目

• 特別:テンプレートを展開