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

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動: 案内検索
ようこそ - ガイドブック - チュートリアル - 早見表 - FAQ - ヘルプ - 用語集 - 利用案内 - 質問

このページはメタウィキメディアヘルプ文書のコピーを(一部)もとにしています。


編集の基本
ページの編集
新規ページの作成
記事名チェック
文書の体裁
セクションと目次
箇条書き   表の作り方
脚注 | ISBNのリンク
特殊文字
HTMLタグの使用
画像などの利用
画像の表示
ファイルページ
数式の書き方
リンクする
リンク | URL
パイプ付きリンク
言語間・ウィキ間リンク
ウィキデータ
カテゴリ
リダイレクトソフト
ページの位置づけ
名前空間
サブページ
ミスなどの修正
新規ページのパトロール
以前の版にページを戻す方法
ページの移動
作業の効率化
マジックワード
テンプレート早わかり
テンプレートの制限
条件文 | テンプレートの説明文
ナビゲーションボックス
コミュニケーション
要約欄
細部の編集
ノートページ | 過去ログ
ウィキラブ
ウィキメール | 感謝
その他
編集の競合
ページ名の働き
記事の定義
ページサイズ
音声・動画の作成と利用
棒グラフの書き方
サンドボックス
ウィキポータル
ヘルプの目次へ

ここではウィキテキストウィキペディアの各ページを記述しているソーステキストの中でのHTMLタグの使用について解説します。

基本的にHTML要素の大部分はMediaWiki専用のマークアップ言語(ウィキテキスト言語)で書いたほうが便利です。ウィキペディアで使用しているマークアップについてはHelp:ページの編集などをご覧ください。一方で HTML タグを使えば、例えば id属性 を利用してリンク先として指定するなどウィキテキスト言語でカバーできていないこともできます(Help:セクション#セクションへのリンクを参照のこと)。ただし、これらの HTML タグは完全にそのまま生成されるHTMLソースに組み込まれるのではなく、MediaWikiに一定の HTMLタグを生成するように命令する、いわば一種のウィキマークアップです。従って、HTMLソースを直接記述する場合とは一部振るまいが違いますので注意してください。

使用できるHTML[編集]

ウィキペディアの利用しているソフトウエアMediaWikiでは、Sanitizer.php で指定されているHTML要素・属性のみが使用できます。以下は Sanitizer.php からの抜粋で、現在どの要素・属性を使用できるかを示しています。ここにあげられていない要素は、HTMLコードの生成時に開始タグ(及び終了タグ)の<および>文字参照とされます。

$htmlpairsStatic = array( # Tags that must be closed
	'b', 'bdi', 'del', 'i', 'ins', 'u', 'font', 'big', 'small', 'sub', 'sup', 'h1',
	'h2', 'h3', 'h4', 'h5', 'h6', 'cite', 'code', 'em', 's',
	'strike', 'strong', 'tt', 'var', 'div', 'center',
	'blockquote', 'ol', 'ul', 'dl', 'table', 'caption', 'pre',
	'ruby', 'rt', 'rb', 'rp', 'p', 'span', 'abbr', 'dfn',
	'kbd', 'samp', 'data', 'time', 'mark'
);
$htmlsingle = array(
	'br', 'wbr', 'hr', 'li', 'dt', 'dd'
);
$htmlsingleonly = array( # Elements that cannot have close tags
	'br', 'wbr', 'hr'
);
if ( $wgAllowMicrodataAttributes ) {
	$htmlsingle[] = $htmlsingleonly[] = 'meta';
	$htmlsingle[] = $htmlsingleonly[] = 'link';
}
$htmlnest = array( # Tags that can be nested--??
	'table', 'tr', 'td', 'th', 'div', 'blockquote', 'ol', 'ul',
	'li', 'dl', 'dt', 'dd', 'font', 'big', 'small', 'sub', 'sup', 'span',
	'var', 'kbd', 'samp', 'em', 'strong', 'q', 'ruby', 'bdo'
);
$tabletags = array( # Can only appear inside table, we will close them
	'td', 'th', 'tr',
);
$htmllist = array( # Tags used by list
	'ul', 'ol',
);
$listtags = array( # Tags that can appear in a list
	'li',
);

以下で上記のHTML要素について簡単に解説します。

  • 見出し…ウィキテキスト言語の = を使用した見出し付けにほぼ相当。違いなどについて詳しくは下記#見出しの節参照。
    • <h1> 見出し </h1> …「ページ名」とおなじレベルの見出しが生成されますので実際には使用しないでください
    • <h2> 見出し </h2>== 見出し == に相当。
    • <h3> 見出し </h3>=== 見出し === に相当。
    • <h4> 見出し </h4>==== 見出し ==== に相当。
    • <h5> 見出し </h5>===== 見出し ===== に相当。
    • <h6> 見出し </h6>====== 見出し ====== に相当。
  • 文字装飾
    • <em> 文字列 </em> …弱い強調(サンプル)。
    • <strong> 文字列 </strong> …強い強調(サンプル)。
    • <i> 文字列 </i> …イタリック体。''文字列'' に相当(サンプル)。
    • <b> 文字列 </b> …ボールド体。'''文字列''' に相当(サンプル)。
    • <tt> 文字列 </tt> …タイプライター体(サンプル)。
    • <big> 文字列 </big> …サイズを大きく(サンプル)。
    • <small> 文字列 </small> …サイズを小さく(サンプル)。
    • <sub> 文字列 </sub> …下付き文字(サンプル)。
    • <sup> 文字列 </sup> …上付き文字(サンプル)。
    • <del> 文字列 </del> …抹消部分の表示。古いブラウザや一部の読み上げブラウザでは未対応(サンプル)。
    • <s> 文字列 </s> または <strike> 文字列 </strike> …取り消し線を引く。非推奨(代わりとなるCSS:{text-decoration:line-through}サンプルサンプル)。
    • <ins> 文字列 </ins> …挿入部分の表示。古いブラウザや一部の読み上げブラウザでは未対応(サンプル)。
    • <u> 文字列 </u> …下線を引く。非推奨(代わりとなるCSS:{text-decoration:underline}サンプル)。Template:Uを使用するとよい。)
    • <font> 文字列 </font> …フォントの指定。非推奨(サンプル)。
    • <code> 文字列 </code> …ソースの表示に使用(サンプル)。
    • <var> 文字列 </var> …変数表示に使用(サンプル)。
    • <pre> 文字列 </pre> …生成前のソースのまま表示。ウィキテキスト中の先頭が空白で始まる行にほぼ相当。違いについては下記#Preの節参照(
      サンプル
      
      )。
  • レイアウト
    • <p> 文字列 </p> …パラグラフ。ウィキテキスト中の2回改行に相当。
    • <span> 文字列 </span> …指定部分を改行せずにスタイル指定。class や CSS の style などと併用。
    • <div> 文字列 </div> …指定部分を改行してスタイル指定。class や CSS の style などと併用。
    • <br> …強制改行。なお、<br> <br/> <br />MediaWikiによって HTML ソースが生成される際に、すべて <br /> となりますので、どれを利用しても結果は同じです。[1]
    • <center> 文字列 </center> …テキストの中央揃え。非推奨(代わりに <div> と CSS を組み合わせるのが望ましい)。
    • <blockquote> 文字列 </blockquote> …段落の引用に使用。
    • <cite> 文字列 </cite> …行中の引用に使用。
    • <hr> …水平行を引く。---- に相当。
  • リスト・箇条書き
    • <dl> 文字列 </dl> …定義リスト。次の <dt> とあわせて ; に相当。
    • <dt> 文字列 </dt> …定義リストの項目指定。
    • <dd> 文字列 </dd> …定義リストの定義内容指定。: に相当。
    • <ol> 文字列 </ol> …番号付き箇条書き。<li> とあわせて # に相当。
    • <ul> 文字列 </ul> …番号なし箇条書き。<li> とあわせて * に相当。
    • <li> 文字列 </li> …箇条書きの各項目指定。
  • ルビ(HTML5では有効ですが、Wikipedia:表記ガイドでは非推奨となっています。)
    • <ruby> 文字列 </ruby> …ルビの開始。
    • <rb> 文字列 </rb> …ルビをかける文字列を指定。
    • <rt> 文字列 </rt> …ルビ文字列を指定。
    • <rp> 文字列 </rp> …ルビ表示未対応の際に後続の括弧内にいれて表示する文字列を指定。
    • <table> 表 </table> …表の開始。{| に相当。
    • <th> 文字列 </th> …表内の見出し。! に相当。
    • <tr> 文字列 </tr> …列を作成。|- に相当。
    • <td> 文字列 </td> …セルを作成。| に相当。
    • <caption> 文字列 </caption> …表のキャプション。|+ に相当。
  • コメントアウト
    • <!-- 文字列 -->文字列 の部分をコメントアウト。

例えば、アンカー要素 <a> は使用できません。したがって

<a href="http://meta.wikimedia.org/">メタウィキメディア・メインページ</a>

のようにすると

&lt;a href="http://meta.wikimedia.org/"&gt;メタウィキメディア・メインページ&lt;/a&gt;

と認識され、結果として

<a href="http://meta.wikimedia.org/">メタウィキメディア・メインページ</a>

と表示されてしまい、(恐らく)執筆者の意図とは異なる結果となります。外部リンクのためには、アンカー要素(<a>)のかわりに大括弧1つで囲むウィキテキスト言語のマークアップを用いてください。

[http://meta.wikimedia.org/ メタウィキメディア・メインページ]

これは次のように生成されます。

メタウィキメディア・メインページ

個別の注意[編集]

見出し[編集]

<h1> から <h6> を利用した見出しは = を使用したウィキテキスト言語の見出しのマークアップとほぼ同じ結果を生成します。

<h4>サンプルの見出し(4レベル)</h4>
<h5>サンプルの見出し(5レベル)</h5>
<h6>サンプルの見出し(6レベル)</h6>

は次のようになります。

サンプルの見出し(4レベル)

サンプルの見出し(5レベル)
サンプルの見出し(6レベル)

= を使用するのと同様、目次に表示されます。= を使うのと違うのは、「[編集]」リンクが付属していないことです。これを利用することで、特定のセクションではセクション編集ができないようにすることが可能です。

スタイル指定[編集]

<span> は行中で使用して、テキストのスタイルなどを指定する要素です。

<font> も似た効果をもつ要素ですが World Wide Web Consortium により非推奨となっていますので、<span> を使うようにしてください。

例えば

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

は、次でも同じ結果が得られます。

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

<font> をインラインでの CSS 指定と併用するのは無意味です。CSS 未対応のブラウザでは CSS は無視されますし、対応ブラウザでは <span> を認識します。

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

なお多くの場合、 <div><span> を使って複雑なスタイル指定をせずとも指定の内容を明示している要素で用が足りますし、その方が利用者に対して親切です。例えば、文中で強調を使用したいときには文字の太さや色を直接指定するよりも、その文字列が強調されていることを明示する <strong> 要素や <em>(emphasized = 強調されたの略)要素を使えば、未対応の古いブラウザや読み上げブラウザを使用している場合などでも、執筆者の強調の意図が伝わります。

Pre[編集]

ウィキテキスト中の <pre> 要素はウィキテキスト言語の <nowiki> と 標準的なHTML要素の <pre> を組み合わせて生成します。したがって、<pre> 要素で囲まれたテキストは改行や空白などがソース通りに維持され、かつタグなども展開されないウィキテキスト通りのソースとして表示されます。タグ等は展開しつつ HTML 標準の <pre> 要素のように改行や空白などをソース通りに維持したテキストを表示させたければ、行頭に半角スペースを入れてください。例えば、

<pre>This word is <b>bold</b>.    [[ウィキペディア]]の URL は[http://ja.wikipedia.org] です。{{PAGENAME}} </pre>
 This word is <b>bold</b>.    [[ウィキペディア]]の URL は[http://ja.wikipedia.org] です。{{PAGENAME}} 

は次のように生成されます。

This word is <b>bold</b>.    [[ウィキペディア]]の URL は[http://ja.wikipedia.org] です。{{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 はJavScriptのコードからHTML要素を参照するときにも使えます。例として{{Link FA}}があります。

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

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

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

海抜20000 ft

例外[編集]

MediaWiki名前空間にあるページの一部(ボタンのラベルなど)では HTML 言語が使えません。このため、例えば <button type=button>ボタン</button> というマークアップは <button type=button>ボタン</button>&lt;span id=abc&gt; というHTMLコードを生成し、ブラウザ上では <button type=button>ボタン</button> と表示されることになります。他方で純粋なHTML コードとして認識されるものもあり、その場合 HTML 言語しか使えず、ウィキテキスト言語はHTMLに変換されません。

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

似て非なる要素[編集]

HTML 要素以外にも、MediaWikiで使える< >で囲んだ要素があります。以下に代表的なものを紹介します。

nowiki[編集]

<nowiki> 文字列 </nowiki>

タグなどを全て無効化する要素です。

ref[編集]

<ref> 文字列 </ref>

脚注を生成する要素です。<references />とセットで使います。Help:脚注参照。

includeonly, noinclude, onlyinclude[編集]

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

gallery[編集]

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

画像などを並べたギャラリーを生成する要素です。Help:画像の表示参照。

poem[編集]

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

<poem> 文字列 </poem>

syntaxhighlight / source[編集]

GeSHi 構文ハイライト機能を利用してプログラミング言語などをみやすく表示するタグです。長らく <source> が使われてきましたが、このタグを使用するプログラミング言語を表示する際に不都合なため、同じ意味を持つ要素 <syntaxhighlight> が追加されました(rev:50696)。 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=で指定できる言語は2009年6月現在以下の通りです(() 内が指定コード)。最新情報は編集画面に <syntaxhighlight></syntaxhighlight> と打ち込めば表示されます。

lang=言語名 のほかに次のパラメータがあります。

  • line と書くとソースの行番号が出力されます。
  • start=整数 は開始行番号を指定します。
  • highlight=整数 は強調する行を指定します。
  • enclose= は囲みのスタイルを指定します。値には "none", "div", "pre" のいずれかが指定できます。"pre" がデフォルトです。ただし、拡張機能の更新に伴い、枠線が表示されなくなりました(bugzilla:10967bugzilla:19416参照)。 "none" は地の文に埋め込み、"div" はテキストを折り返します。
  • strict と書くと厳密モード (strict mode) で出力されます。

下の例は <syntaxhighlight lang="html5" line start="3" highlight="1, 5"> と指定したものです。

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

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

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

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

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

なお、MediaWiki:Geshi.css にて専用のクラスを指定できます。また、ユーザーCSS では div と span (enclose=none にしている場合用) に "mw-geshi" のクラスが使用できます。

より詳しくはmw:Extension:SyntaxHighlight GeSHiを参照してください。

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

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

脚注[編集]

[ヘルプ]
  1. ^ <br><br /> になおすだけの編集や、他の利用者に対して <br> でなく <br /> を使うように注意することはまったく無意味ですのでやめてください。(気になる人は、Wikipedia:サンドボックス
    <br><br/><br />
    
    と書き込み、生成された HTML ソースをブラウザの「ソースを表示」機能で確認してみてください。)

関連項目[編集]