Difference between revisions of "Help:HTML"

MyWikiBiz, Author Your Legacy — Saturday November 23, 2024
Jump to navigationJump to search
 
 
(2 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
----
 
----
 
This page gives you information about using permitted [[HTML]] code within [[Directory:Wikimedia Foundation/MediaWiki|MediaWiki]].
 
This page gives you information about using permitted [[HTML]] code within [[Directory:Wikimedia Foundation/MediaWiki|MediaWiki]].
 +
 +
==Permitted HTML==
 +
The following [[HTML element|HTML element]]s are currently permitted:
 +
       
 +
{| border="0" cellpadding="5"
 +
| valign="top"|
 +
* [[HTML_element#Official|<b>]]
 +
* [[HTML_element#Official|<big>]]
 +
* [[HTML_element#General_block_elements|<blockquote>]]
 +
* [[HTML_element#Images_and_objects|<br>]]
 +
* [[HTML_element#Tables|<caption>]]
 +
* [[HTML_element#Official|<center>]]
 +
* [[HTML_element#General_phrase_elements|<cite>]]
 +
* [[HTML_element#Computer_code_phrase_elements|<code>]]
 +
* [[HTML_element#Lists|<dd>]]
 +
* [[HTML_element#Other_containers|<div>]]
 +
* [[HTML_element#Lists|<dl>]]
 +
* [[HTML_element#Lists|<dt>]]
 +
* [[HTML_element#General_phrase_elements|<em>]]
 +
* [[HTML_element#Official|<font>]]
 +
* [[HTML_element#Headings|<h1>]]
 +
| valign="top"|
 +
* [[HTML_element#Headings|<h2>]]
 +
* [[HTML_element#Headings|<h3>]]
 +
* [[HTML_element#Headings|<h4>]]
 +
* [[HTML_element#Headings|<h5>]]
 +
* [[HTML_element#Headings|<h6>]]
 +
* [[HTML_element#General_block_elements|<hr>]]
 +
* [[HTML_element#Official|<i>]]
 +
* [[HTML_element#Lists|<li>]]
 +
* [[Ordered list|<ol>]]
 +
* [[HTML_element#General_block_elements|<p>]]
 +
* [[HTML_element#Other_containers|<pre>]]
 +
* [http://www.w3.org/TR/1999/WD-ruby-19990322/ <rb>]
 +
* [http://www.w3.org/TR/1999/WD-ruby-19990322/ <rp>]
 +
* [http://www.w3.org/TR/1999/WD-ruby-19990322/ <rt>]
 +
* [http://www.w3.org/TR/1999/WD-ruby-19990322/ <ruby>]
 +
| valign="top"|
 +
* [[HTML_element#Official|<s>]]
 +
* [[HTML_element#Official|<small>]]
 +
* [[HTML_element#Official|<strike>]]
 +
* [[HTML_element#General_phrase_elements|<strong>]]
 +
* [[HTML_element#Special_inline_elements|<sub>]]
 +
* [[HTML_element#Special_inline_elements|<sup>]]
 +
* [[HTML_element#Tables|<table>]]
 +
* [[HTML_element#Tables|<td>]]
 +
* [[HTML_element#Tables|<th>]]
 +
* [[HTML_element#Tables|<tr>]]
 +
* [[HTML_element#Presentational_markup|<tt>]]
 +
* [[HTML_element#Presentational_markup|<u>]]
 +
* [[Ordered list|<ul>]]
 +
* [[HTML_element#Computer_code_phrase_elements|<var>]]
 +
* [[HTML_element#HTML_Comment|<!-- ... -->]]
 +
|}
 +
 +
For many HTML elements, more convenient wikitext code is available, see [[Help:Editing]]. On the other hand, HTML tags allow an id that can be referenced in one's [[Help:User style|user style]] css, and allows the tag to be used as link target.
 +
<br clear="all"><!-- stop floating navbox before pre -->
 +
<pre>
 +
/* private */ function removeHTMLtags( $text )
 +
{
 +
wfProfileIn( "OutputPage::removeHTMLtags" );
 +
$htmlpairs = array( # Tags that must be closed
 +
"b", "i", "u", "font", "big", "small", "sub", "sup", "h1",
 +
"h2", "h3", "h4", "h5", "h6", "cite", "code", "em", "s", "span",
 +
"strike", "strong", "tt", "var", "div", "center",
 +
"blockquote", "ol", "ul", "dl", "table", "caption", "pre",
 +
"ruby", "rt" , "rb" , "rp"
 +
);
 +
$htmlsingle = array(
 +
"br", "p", "hr", "li", "dt", "dd"
 +
);
 +
$htmlnest = array( # Tags that can be nested--??
 +
"table", "tr", "td", "th", "div", "blockquote", "ol", "ul",
 +
"dl", "font", "big", "small", "sub", "sup"
 +
);
 +
$tabletags = array( # Can only appear inside table
 +
"td", "th", "tr"
 +
);
 +
 +
$htmlsingle = array_merge( $tabletags, $htmlsingle );
 +
$htmlelements = array_merge( $htmlsingle, $htmlpairs );
 +
 +
$htmlattrs = array( # Allowed attributes--no scripting, etc.
 +
"title", "align", "lang", "dir", "width", "height",
 +
"bgcolor", "clear", /* BR */ "noshade", /* HR */
 +
"cite", /* BLOCKQUOTE, Q */ "size", "face", "color",
 +
/* FONT */ "type", "start", "value", "compact",
 +
/* For various lists, mostly deprecated but safe */
 +
"summary", "width", "border", "frame", "rules",
 +
"cellspacing", "cellpadding", "valign", "char",
 +
"charoff", "colgroup", "col", "span", "abbr", "axis",
 +
"headers", "scope", "rowspan", "colspan", /* Tables */
 +
"id", "class", "name", "style" /* For CSS */
 +
);
 +
</pre>
 +
 +
For example, the anchor element "a" is not allowed, so the wikitext
 +
 +
: <code><nowiki><a href="http://meta.wikimedia.org/wiki/Main_Page">Main Page</a></nowiki></code>
 +
 +
is treated like the wikitext
 +
 +
: <code><nowiki>&amp;lt;a href="http://meta.wikimedia.org/wiki/Main_Page"&amp;gt;Main Page&amp;lt;/a&amp;gt;</nowiki></code>
 +
 +
and is therefore displayed as
 +
 +
: <a href="http://meta.wikimedia.org/wiki/Main_Page">Main Page</a>
 +
 +
which is unlikely to be what the editor intended. Instead of using the anchor element (&lt;a&gt;) the wiki markup for external reference is recommended (enclosed in square brackets with the URL separated from the contents by a single space):
 +
 +
: <code><nowiki>[http://meta.wikimedia.org/wiki/Main_Page Main Page]</nowiki></code>
 +
 +
displays as:
 +
 +
: [http://meta.wikimedia.org/wiki/Main_Page Main Page]
 +
 +
==Span==
 +
 +
<code><nowiki><span></nowiki></code>, a generic inline text container, is now allowed on default MediaWiki installations (as of version 1.5). Span can be ID'd, classed, or styled:
 +
 +
<nowiki>This is <span style="color:red">red</span> text.</nowiki>
 +
 +
<nowiki>This is <span id="randomfooid">identified</span> text.</nowiki>
 +
 +
<nowiki>This is <span class="importantmessage">classed</span> text.</nowiki>
 +
produces:
 +
 +
<blockquote>
 +
 +
This is <span style="color:red">red</span> text.
 +
 +
This is <span id="randomfooid">identified</span> text.
 +
 +
This is <span class="importantmessage">classed</span> text.
 +
 +
</blockquote>
 +
 +
IDs and classes are used in conjunction with stylesheets to give a piece of text a descriptive class (or unique identifier) and to refer to that in a stylesheet.
 +
 +
Note that in most cases, one can use a more descriptive tag, for instance, <strong><nowiki><strong></nowiki></strong> (which can be classed, identified, and styled, as well) to indicate an important piece of text, or <em><nowiki><em></nowiki></em> (subject to the same things as strong) to indicate an emphasized piece of text. For instance, the above might be better reformulated as
 +
 +
<nowiki>This is <em style="color:red;font-style:normal">red</em> text.</nowiki>
 +
 +
<blockquote>This is <em style="color:red;font-style:normal">red</em> text.</blockquote>
 +
 +
This not only draws the user's attention to the text, but can also alert those who are using nonvisual browsers or have sight impairments, etc. to the fact that that is <em>emphasized text</em>.
 +
 +
Using {{timc|H:title}}, <nowiki>"a height of {{h:title|6.1 km|20000 ft}} above sea level"</nowiki> gives "a height of {{h:title|6.1 km|20000 ft}} above sea level" (note the hover box over "20000 ft").
 +
 +
==Font==
 +
 +
''Note: This element is [[Deprecation|deprecate]]d (should not be used) in favor of [[#Span|<nowiki><span></nowiki>]].''
 +
 +
For some attributes, like color, one can also use
 +
 +
<pre>
 +
a <font color="red">red</font> word.
 +
</pre>
 +
 +
giving
 +
 +
a <font color="red">red</font> word
 +
 +
It's pointless to combine the legacy tag <tt>&lt;font&gt;</tt>
 +
with inline CSS; legacy browsers would ignore the CSS, while
 +
modern browsers support <tt>&lt;span&gt;</tt> (see above).
 +
 +
==Div==
 +
 +
E.g. to assign the class "red" to a text one can put
 +
 +
&lt;div class="red">example text&lt;/div>
 +
 +
which gives <div class="red">example text</div> which is in red if the css line
 +
 +
.red {color:red}
 +
 +
is applicable.
 +
 +
This is suitable if the color is specifically intended to be red; if it is just for emphasis a more general term for the class would be more appropriate, because css allows the user to choose another method of emphasis (another color, bold, enlarged, etc.).
 +
 +
Note that many readers will not have their own css with such lines as ".red {color:red}", so one cannot refer to "the red text above", etc.
 +
 +
==MediaWiki namespace==
 +
In some pages in the MediaWiki namespace HTML does not work, and e.g. &lt;span id=abc&gt; produces the HTML &amp;lt;span id=abc&amp;gt; rendered by the browser as &lt;span id=abc&gt;.
 +
 +
==Style pages==
 +
CSS and JS pages (see [[Help:User style]]) are not interpreted as wikitext, and therefore can have arbitrary HTML.

Latest revision as of 16:21, 19 February 2007

Help:Contents

This page gives you information about using permitted HTML code within MediaWiki.

Permitted HTML

The following HTML elements are currently permitted:

For many HTML elements, more convenient wikitext code is available, see Help:Editing. On the other hand, HTML tags allow an id that can be referenced in one's user style css, and allows the tag to be used as link target.

	/* private */ function removeHTMLtags( $text )
	{
		wfProfileIn( "OutputPage::removeHTMLtags" );
		$htmlpairs = array( # Tags that must be closed
			"b", "i", "u", "font", "big", "small", "sub", "sup", "h1",
			"h2", "h3", "h4", "h5", "h6", "cite", "code", "em", "s", "span",
			"strike", "strong", "tt", "var", "div", "center",
			"blockquote", "ol", "ul", "dl", "table", "caption", "pre",
			"ruby", "rt" , "rb" , "rp"
		);
		$htmlsingle = array(
			"br", "p", "hr", "li", "dt", "dd"
		);
		$htmlnest = array( # Tags that can be nested--??
			"table", "tr", "td", "th", "div", "blockquote", "ol", "ul",
			"dl", "font", "big", "small", "sub", "sup"
		);
		$tabletags = array( # Can only appear inside table
			"td", "th", "tr"
		);

		$htmlsingle = array_merge( $tabletags, $htmlsingle );
		$htmlelements = array_merge( $htmlsingle, $htmlpairs );

		$htmlattrs = array( # Allowed attributes--no scripting, etc.
			"title", "align", "lang", "dir", "width", "height",
			"bgcolor", "clear", /* BR */ "noshade", /* HR */
			"cite", /* BLOCKQUOTE, Q */ "size", "face", "color",
			/* FONT */ "type", "start", "value", "compact",
			/* For various lists, mostly deprecated but safe */
			"summary", "width", "border", "frame", "rules",
			"cellspacing", "cellpadding", "valign", "char",
			"charoff", "colgroup", "col", "span", "abbr", "axis",
			"headers", "scope", "rowspan", "colspan", /* Tables */
			"id", "class", "name", "style" /* For CSS */
		);

For example, the anchor element "a" is not allowed, so the wikitext

<a href="http://meta.wikimedia.org/wiki/Main_Page">Main Page</a>

is treated like the wikitext

&lt;a href="http://meta.wikimedia.org/wiki/Main_Page"&gt;Main Page&lt;/a&gt;

and is therefore displayed as

<a href="http://meta.wikimedia.org/wiki/Main_Page">Main Page</a>

which is unlikely to be what the editor intended. Instead of using the anchor element (<a>) the wiki markup for external reference is recommended (enclosed in square brackets with the URL separated from the contents by a single space):

[http://meta.wikimedia.org/wiki/Main_Page Main Page]

displays as:

Main Page

Span

<span>, a generic inline text container, is now allowed on default MediaWiki installations (as of version 1.5). Span can be ID'd, classed, or styled:

This is <span style="color:red">red</span> text.

This is <span id="randomfooid">identified</span> text.

This is <span class="importantmessage">classed</span> text.

produces:

This is red text.

This is identified text.

This is classed text.

IDs and classes are used in conjunction with stylesheets to give a piece of text a descriptive class (or unique identifier) and to refer to that in a stylesheet.

Note that in most cases, one can use a more descriptive tag, for instance, <strong> (which can be classed, identified, and styled, as well) to indicate an important piece of text, or <em> (subject to the same things as strong) to indicate an emphasized piece of text. For instance, the above might be better reformulated as

This is <em style="color:red;font-style:normal">red</em> text.

This is red text.

This not only draws the user's attention to the text, but can also alert those who are using nonvisual browsers or have sight impairments, etc. to the fact that that is emphasized text.

Using Template:Timc, "a height of {{h:title|6.1 km|20000 ft}} above sea level" gives "a height of Template:H:title above sea level" (note the hover box over "20000 ft").

Font

Note: This element is deprecated (should not be used) in favor of <span>.

For some attributes, like color, one can also use

a <font color="red">red</font> word.

giving

a red word

It's pointless to combine the legacy tag <font> with inline CSS; legacy browsers would ignore the CSS, while modern browsers support <span> (see above).

Div

E.g. to assign the class "red" to a text one can put

<div class="red">example text</div>

which gives

example text

which is in red if the css line

.red {color:red}

is applicable.

This is suitable if the color is specifically intended to be red; if it is just for emphasis a more general term for the class would be more appropriate, because css allows the user to choose another method of emphasis (another color, bold, enlarged, etc.).

Note that many readers will not have their own css with such lines as ".red {color:red}", so one cannot refer to "the red text above", etc.

MediaWiki namespace

In some pages in the MediaWiki namespace HTML does not work, and e.g. <span id=abc> produces the HTML &lt;span id=abc&gt; rendered by the browser as <span id=abc>.

Style pages

CSS and JS pages (see Help:User style) are not interpreted as wikitext, and therefore can have arbitrary HTML.