Help:HTML in wikitext: Difference between revisions

Revision as of 13:02, 11 April 2008

Revision as of 21:02, 16 November 2008

Line 6:

{| border="0" cellpadding="5"

| valign="top"|

* [[w:HTML_element#Official_presentational_markupOfficial presentational markup|<b>]]

* [[w:HTML_element#Official_presentational_markupOfficial presentational markup|<big>]]

* [[w:HTML_element#General_block_elementsGeneral block elements|<blockquote>]]

* [[w:HTML_element#Images_and_objectsImages and objects|<br>]]

* [[w:HTML_element#Tables|<caption>]]

* [[w:HTML_element#Official_presentational_markupOfficial presentational markup|<center>]]

* [[w:HTML_element#General_phrase_elementsGeneral phrase elements|<cite>]]

* [[w:HTML_element#Computer_code_phrase_elementsComputer code phrase elements|<code>]]

* [[w:HTML_element#Lists|<dd>]]

* [[w:HTML_element#Other_containersSpecial inline elements|<divdel>]]

* [[w:HTML_element#Other containers|<div>]]

* [[w:HTML_element#Lists|<dl>]]

* [[w:HTML_element#Lists|<dt>]]

* [[w:HTML_element#General_phrase_elementsGeneral phrase elements|<em>]]

* [[w:HTML_element#Official_presentational_markupOfficial presentational markup|<font>]]

* [[w:HTML_element#Headings|<h1>]]

| valign="top"|

Line 27 ⟶ 28:

* [[w:HTML_element#Headings|<h5>]]

* [[w:HTML_element#Headings|<h6>]]

* [[w:HTML_element#General_block_elementsGeneral block elements|<hr>]]

* [[w:HTML_element#Official_presentational_markupOfficial presentational markup|<i>]]

* [[w:HTML_element#Special inline elements|<ins>]]

* [[w:HTML_element#Lists|<li>]]

* [[w:Ordered list|<ol>]]

* [[w:HTML_element#General_block_elementsGeneral block elements|<p>]]

* [[w:HTML_element#Other_containersOther containers|<pre>]]

* [http://www.w3.org/TR/1999/WD-ruby-19990322/ <rb>]

* [http://www.w3.org/TR/1999/WD-ruby-19990322/ <rp>]

Line 38 ⟶ 40:

* [http://www.w3.org/TR/1999/WD-ruby-19990322/ <ruby>]

| valign="top"|

* [[w:HTML_element#Official_presentational_markupOfficial presentational markup|<s>]]

* [[w:HTML_element#Official_presentational_markupOfficial presentational markup|<small>]]

* [[w:HTML_element#Official_presentational_markupSpan element|<strikespan>]]

* [[w:HTML_element#General_phrase_elementsOfficial presentational markup|<strongstrike>]]

* [[w:HTML_element#Special_inline_elementsGeneral phrase elements|<substrong>]]

* [[w:HTML_element#Special_inline_elementsSpecial inline elements|<supsub>]]

* [[w:HTML_element#Special inline elements|<sup>]]

* [[w:HTML_element#Tables|<table>]]

* [[w:HTML_element#Tables|<td>]]

* [[w:HTML_element#Tables|<th>]]

* [[w:HTML_element#Tables|<tr>]]

* [[w:HTML_element#Presentational_markupPresentational markup|<tt>]]

* [[w:HTML_element#Presentational_markupPresentational markup|<u>]]

* [[w:Ordered list|<ul>]]

* [[w:HTML_element#Computer_code_phrase_elementsComputer code phrase elements|<var>]]

* [[w:HTML_element#HTML_CommentHTML comment|<!-- ... -->]]

|}

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

The following excerpt from [http://svn.wikimedia.org/viewvc/mediawiki/tags/REL1_6_6/phase3/includes/Sanitizer.php Sanitizer.php] additionally shows which attributes are allowed.

:'''Update:''' In 1.4rc1, the removeHTMLtags function is located in Parser.php.

For example, the anchor element <tt>&lt;a></tt> is not allowed, so the wikitext

:'''Update:''' In 1.5, the removeHTMLtags function is now located in Sanitizer.php.

: <code><nowiki><a href="http://meta.wikimedia.org/">Main Page</a></nowiki></code>

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==

<br clear=all><!-- stop floating navbox before pre -->

<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:

The following excerpt from [http://svn.wikimedia.org/viewvc/mediawiki/tags/REL1_6_6/phase3/includes/Sanitizer.php?view=markup Sanitizer.php] additionally shows which attributes are allowed.

<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:

<source lang=php>

<blockquote>

$htmlpairs = array( # Tags that must be closed

'b', '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' );

$htmlsingle = array(

'br', 'hr', 'li', 'dt', 'dd' );

$htmlsingleonly = array( # Elements that cannot have close tags

'br', 'hr' );

$htmlnest = array( # Tags that can be nested--??

'table', 'tr', 'td', 'th', 'div', 'blockquote', 'ol', 'ul',

'dl', 'font', 'big', 'small', 'sub', 'sup', 'span' );

$tabletags = array( # Can only appear inside table

'td', 'th', 'tr' );

</source>

== Tags ==

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

{{mlw|HTML_element|Span element|<code>'''&lt;span>'''</code>}} is a generic inline text container.

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

<code>'''&lt;font>'''</code> is a similar tag which is [[w:Deprecation|deprecate]]d (should not be used) in favor of <nowiki><span></nowiki>.''

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

For example

</blockquote>

<source lang=html4strict>

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

</source>

produces the same result as

<source lang=html4strict>

a <span style="color:red">red</span> word.

</source>

See also {{tim|font size demo}} and {{mlm|Help:Text color}}.

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.

It's pointless to combine the legacy tag <tt>&lt;font&gt;</tt>

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

with inline CSS; legacy browsers would ignore the CSS, while

modern browsers support <tt>&lt;span&gt;</tt> (see above).

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

Note that in most cases, one can use a more descriptive tag, for instance, <strong><nowiki><strong></nowiki></strong> 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.

<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 <nowiki><span></nowiki> as a link target===

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").

The standard way of providing a named anchor as an invisible target (i.e. <code><a name="Foo"></code>) doesn't work (since all <code><a></code> tags are converted), and [http://www.w3.org/TR/html401/struct/links.html an alternative suggested by the W3C], <code><nowiki><hN id="Foo"></hN></nowiki></code>, produces an "[Edit]" link.

==Font==

However, <code><nowiki><span id="Foo"></nowiki></code> does produce a target than can be the destination of a link. Note that it doesn't work everywhere; for instance, in a table, it has to be inside a cell before some browsers will jump to it properly.

''Note: This element is [[w:Deprecation|deprecate]]d (should not be used) in favor of [[#Span|<nowiki><span></nowiki>]].''

===<nowiki><div></nowiki>===

For some attributes, like color, one can also use

<code>'''&lt;div>'''</code> is a generic block container. Rules:

* <nowiki><div></nowiki> should be followed by a newline

* <nowiki></div></nowiki> should be preceded by a newline

*<nowiki></div></nowiki> followed by text on the same line, two newlines and text before <nowiki><div></nowiki> on the same line should be avoided (because the two newlines only produce a space)

Example:

{{xpdplain|

--|--|

|o

p<|div>q<|/div>r

s<|div>|t|

|u|

|v|

|x<|/div>y

s<|div>|t|

|u|

|v|

|x<|/div>y

z|

|--|--|

}}

===HTML comment===

Using {{tim|t}}:

*{{xpd|t}}

*"<code><nowiki>{{subst:xpd|t}}</nowiki>"</code> gives "&lt;!--t-->start-pqr-end", producing HTML code without the comment.

The "Remove comments" option of [[mw:Extension:ExpandTemplates|ExpandTemplates]] selects whether comments are removed, not just in the final result but throughout the expansion process. This affects the result of parser functions: a comment in the expression of #expr or in the condition of #ifexpr gives an error message unless "Remove comments" is on, and comments affect #if and ifeq.

Example:

Wikitext:

----

<pre>

{{#expr:<!--p-->3}}

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

{{#ifeq:<!--p-->3|3|1|0}}

{{#if:<!--p-->|1|0}}

</pre>

----

Result of normal expansion, and of ExpandTemplates with "Remove comments" on:

----

{{#expr:<!--p-->3}}

{{#ifeq:<!--p-->3|3|1|0}}

giving

{{#if:<!--p-->|1|0}}

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

----

Result of full substitution, and of ExpandTemplates with "Remove comments" off:

----

<strong class="error">Expression error: Unrecognised punctuation character ""</strong>

0

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).

1

==Div==

----

Therefore it is typically better to avoid comments in these places, and to put the comment before or after the parser function.

In the case of nested parser functions, to avoid having to put the comments outside the whole, an alternative is <nowiki>{{void|</nowiki>''comment''}}. In the case of substitution of the parser function, "void" has to be substituted too, e.g. in a template allowing multi-level substitution we can put <nowiki>{{{{{subst1|}}}#expr:3*{{{1}}} {{{{{subst1|}}}void|</nowiki> multiply by 3 }}}}.

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

Another alternative is making the comment the name of a parameter (in the likely case that it is unused), with the empty string as default, e.g. <nowiki>{{{ multiply by 3 |}}} or, to recognize the intention, use pseudo comment tags: {{{<!- multiply by 3 ->|}}}, or real ones, if the empty string is not used as parameter: {{{<!-- multiply by 3 -->|}}}</nowiki>.

&lt;div class="red">example text&lt;/div>

See also {{tim|t comment}}.

which gives <div class="red">example text</div> which is in red if the css line

== Attributes ==

.red {color:red}

Most tags can have a <tt>style</tt> attribute. For example

is applicable.

<source lang=html4strict>

<div style="font-size:80%">

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

</div>

</source>

produces:

<blockquote style="border:1px dotted gray; padding-left:20px">

<div style="font-size:80%">

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

</div>

</blockquote>

Most tags can have classes and IDs. They can be 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.

For example

<source lang=html4strict>

<div class="infobox">Example infobox</div>

</source>

<div class="infobox">Example infobox</div>

Produces the box which floats on the right because <tt>infobox</tt> class is already defined in local [[Mediawiki:Common.css]].

<br style=clear:all>

Classes and IDs can also be used by Javascript code, for example see [[:en:Template_talk:Link_FA#How_does_it_work.3F|how {Link FA} works]] in enwiki.

Another attribute example is <tt>title</tt>, for example used in {{tl|H:title}} template: note the hover box over "20000 ft"

<blockquote style="border:1px dotted gray; padding-left:20px">

"a height of {{h:title|6.1 km|20000 ft}} above sea level"

</blockquote>

<!--

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.

-->

== Tags with special effect ==

=== Pre ===

<nowiki><pre></nowiki> tags work as the combination of <nowiki><nowiki></nowiki> and the standard HTML <nowiki><pre></nowiki> tag: the content will preformatted, and it will not be parsed, but shown as in the wikitext source. If you want preformatted but parsed text, use a space in the beginning of the line instead. For example,

<nowiki><pre>This word is <b>bold</b>.</pre>

This word is <b>bold</b>.</nowiki>

will render as

<pre>This word is <b>bold</b>.</pre>

This word is <b>bold</b>.

=== Comments ===

HTML comments in the wikitext (<nowiki><!-- ... --></nowiki>) will not appear in the HTML code at all.

=== Headers ===

Headers (<nowiki><h1>...<h6></nowiki>) will be treated in a similar way as wikicode headers:

<h6>sample header</h6>

Note that it appears in the table of contents and has an accompanying edit link. There are some minor differences though: editing such a section won't prefill the edit summary, and the browser won't jump to the beginning of the section when saving the page. Thus, you should use the wikitext equivalents instead.

==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 pagesExceptions ==

In some pages in the MediaWiki namespace (typically the short messages like button labels) 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;. Some others are interpreted as pure HTML (thus any tag can be used, but wikicode won't be transformed to HTML).

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

User CSS and JS pages (see [[Help:User style]]) are interpreted as if inside a <nowiki><pre></nowiki> block. From MW 1.11 this also goes for sitewide CSS/JS; in earlier versions, you have to manually add <tt><nowiki>/*<pre>*/</nowiki></tt> to the beginning and <tt><nowiki>/*</pre>*/</nowiki></tt> to the end of those pages to avoid strange rendering.

==External links==

== External links ==

* [http://www.w3.org/TR/html401/index/elements.html elements] | [http://www.w3.org/TR/html401/index/attributes.html attributes]

* HTML 4.01 specification: [http://www.w3.org/TR/html401/index/elements.html elements] | [http://www.w3.org/TR/html401/index/attributes.html attributes]

* For customizing the handling of HTML in MediaWiki, see the HTML and Tidy sections in [[mw:Manual:Configuration settings]]

* Some extensions allow adding arbitrary HTML to a page, for example [[mw:Extension:AddHTML]],[[mw:Extension:SecureHTML]] and [[mw:Extension:Secure HTML]]; see [http://www.mediawiki.org/wiki/Manual:%24wgRawHtml $wgRawHtml] for a more complete list

* Within the MediaWiki codebase, these HTML checks happen in [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/includes/Sanitizer.php includes/Sanitizer.php]

{{H:f|langs=|enname=HTML in wikitext}}