Wikia

WoWWiki

Help:HTML in wikitext

Talk2
101,364pages on
this wiki
Revision as of 20:50, March 2, 2009 by Fandyllic (Talk | contribs)

(diff) ←Older revision | Latest revision (diff) | Newer revision → (diff)
HELP CONTENTS · Getting Started · New to WoWWIKI · Editing WoWWIKI · Editing WoWWIKI (advanced)
The WoWWIKI Community · Additional Help · Mists-Logo-Small Updating for Mists of Pandaria
See Wikia Help for general Wikia- and wiki- related help. See Metawiki logo 18x18 Meta-Wiki HelpIntro for basic MediaWiki usage!

Permitted HTMLEdit

The following HTML elements are currently permitted (by default; see Special:Version for additional HTML elements supported by extensions):

For use in pairs
   (<tag>stuff</tag>)

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

For use in pairs
   (<tag>stuff</tag>)

  • <ol>
  • <ul>
  • <dl>
  • <table>
  • <caption>
  • <pre>
  • <ruby>
  • <rt>
  • <rb>
  • <rp>
  • <p>
  • <span>
  • <u>
  • <!-- ... -->

For use alone
   (<tag> or <tag/>)

  • <br>
  • <hr>
  • <li>
  • <dt>
  • <dd>

For use only alone
   (<tag> or <tag/>)

  • <br>
  • <hr>
Nestable tags
  • <table>
  • <tr>
  • <td>
  • <th>
  • <div>
  • <blockquote>
  • <ol>
  • <ul>
  • <dl>
  • <font>
  • <big>
  • <small>
  • <sub>
  • <sup>
  • <span>

For use alone inside a table
   (wiki will close)

  • <td>
  • <th>
  • <tr>
List tags
  • <ul>
  • <ol>
Only in a list
  • <li>

The following excerpt from Sanitizer.php additionally shows which attributes are allowed. 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 Wikimedia-logo-18x18user style CSS, and allows the tag to be used as link target.

Below from :
/**
     * Cleans up HTML, removes dangerous tags and attributes, and
     * removes HTML comments
     * @private
     * @param string $text
     * @param callback $processCallback to do any variable or parameter replacements in HTML attribute values
     * @param array $args for the processing callback
     * @return string
     */
    static function removeHTMLtags( $text, $processCallback = null, $args = array(), $extratags = array() ) {
        global $wgUseTidy;

        static $htmlpairs, $htmlsingle, $htmlsingleonly, $htmlnest, $tabletags,
            $htmllist, $listtags, $htmlsingleallowed, $htmlelements, $staticInitialised;

        wfProfileIn( __METHOD__ );

        if ( !$staticInitialised ) {

            $htmlpairs = array_merge( $extratags, 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', 'u'
            ) );
            $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, 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',
            );
            .
            .
            .
        }
        .
        .
        .

E.g., element "a" is not allowed, and the wikitext

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

produces the HTML code

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

which renders as the wikitext, not working as a link.

Tags Edit

<span> is a generic inline text container.

<font> is a similar tag which is deprecated (should not be used) in favor of <span>.

For example <source lang=html4strict> a red word. </source> produces the same result as <source lang=html4strict> a red word. </source>

See also Wikimedia-logo-18x18 {{font size demo}} and Wikimedia-logo-18x18 Help:Text color.

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

Note that in most cases, one can use a more descriptive tag, for instance, <strong> to indicate an important piece of text, or <em> (subject to the same things as strong) to indicate an emphasized piece of 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 <span> as a link targetEdit

The standard way of providing a named anchor as an invisible target (i.e. <a name="Foo">) doesn't work (since all <a> tags are converted), and an alternative suggested by the W3C, <hN id="Foo"></hN>, produces an "[Edit]" link.

However, <span id="Foo"> 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.

<div>Edit

<div> is a generic block container. Rules:

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

Example:

See Wikimedia-logo-18x18 <div> section of Wikimedia-logo-18x18 Help:HTML in wikitext.

HTML commentEdit

See Wikimedia-logo-18x18 HTML comment section of Wikimedia-logo-18x18 Help:HTML in wikitext.

Attributes Edit

Most tags can have a style attribute. For example

<div style="font-size:80%">
This is <span style="color:red">red</span> text.
</div>

produces:

This is red text.


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

<div class="tooltip">Example tooltip box</div>
Example tooltip box

Produces the box which floats on the left because tooltip class is already defined in local Mediawiki:Common.css.

Classes and IDs can also be used by Javascript code, for example see how {Link FA} works in enwiki.


Another attribute example is title, for example used with a span tag: note the hover box (should say "Who knows what it is?") over "unknown substance"

"some special items require an unknown substance to make"

HTML for "unknown substance"

<span style="border-bottom:1px dotted;" title="Who knows what it is?">unknown substance</span>


Tags with special effect Edit

Pre Edit

<pre> tags work as the combination of <nowiki> and the standard HTML <pre> 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,

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

will render as

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

Comments Edit

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

Headers Edit

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

sample header

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.

Exceptions Edit

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

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

External links Edit

Around Wikia's network

Random Wiki