SpikeToronto (talk | contribs) Adding other already existingt shortcut. |
Rajmaurya317 (talk | contribs) Tag: repeating characters |
||
Line 3: | Line 3: | ||
For many HTML elements, more convenient wikitext code is available, see [[Help:Wiki markup]], however there are some situations in which the HTML alternative is useful, for example creating a link to a particular element of a table. |
For many HTML elements, more convenient wikitext code is available, see [[Help:Wiki markup]], however there are some situations in which the HTML alternative is useful, for example creating a link to a particular element of a table. |
||
==Permitted HTML== |
|||
http://www.youtube.com/watch?v=74-TvGiPW74 |
|||
The following [[HTML element]]s are currently permitted: |
|||
http://www.youtube.com/watch?v=R-O27SZXbLg |
|||
http://www.youtube.com/watch?v=mZFmBZAY_sk |
|||
{{Colbegin|3}} |
|||
http://www.youtube.com/watch?v=s9ly9MfPL04 |
|||
* [[HTML element#General|<abbr>]] |
|||
http://www.youtube.com/watch?v=GMzrM3qdeZk |
|||
**Marks an abbreviation, and can make the full form available: <abbr title="abbreviation">abbr.</abbr> |
|||
http://www.youtube.com/watch?v=8lvwJCZGy7w |
|||
* [[HTML element#Presentation|<b>]] |
|||
http://www.youtube.com/watch?v=fwAt95Mt1-A |
|||
**<b>Sets font to boldface where possible</b> |
|||
http://www.youtube.com/watch?v=fwAt95Mt1-A |
|||
* [[HTML element#Presentation|<big>]] |
|||
http://www.youtube.com/watch?v=TR0Ex4edbuM |
|||
**<big>Increases</big> font size |
|||
http://www.youtube.com/watch?v=hJr8VbP4yM0 |
|||
* [[HTML element#Other block elements|<blockquote>]] |
|||
http://www.youtube.com/watch?v=m4CWzyWcc4E |
|||
**A block-level quotation, <blockquote>for when the quotation includes block level elements,</blockquote> e.g. paragraphs |
|||
http://www.youtube.com/watch?v=A9QJuck_5k8 |
|||
* [[HTML element#Other inline elements|<br>]] |
|||
http://www.youtube.com/watch?v=S25lTdTlBUk |
|||
**A forced<br/> line-break |
|||
http://www.youtube.com/watch?v=wBsNgoAQ09s |
|||
* [[HTML element#Tables|<caption>]] |
|||
http://www.youtube.com/watch?v=ZcDxPz_xdBE into |
|||
**<table><caption>Specifies a caption for a table</caption></table> |
|||
http://www.youtube.com/watch?v=ZcDxPz_xdBE |
|||
* [[HTML element#Other block elements|<center>]] |
|||
http://www.youtube.com/watch?v=nphNQ_O-9WY |
|||
**<center>Creates a block-level center-aligned division</center> Use <code><div></code> instead |
|||
http://www.youtube.com/watch?v=IngdVvTFrKg |
|||
* [[HTML element#Other inline elements|<cite>]] |
|||
http://www.youtube.com/watch?v=OwmXohLJ4cM |
|||
**<cite>A citation</cite> |
|||
http://www.youtube.com/watch?v=0vXaCDG1vy8 |
|||
* [[HTML element#Computer phrase elements|<code>]] |
|||
http://www.youtube.com/watch?v=bpgqgjz_sNQ |
|||
**<code>A code snippet</code> |
|||
http://www.youtube.com/watch?v=T1KGxA8Hr5o |
|||
* [[HTML element#Lists|<dd>]] |
|||
http://www.youtube.com/watch?v=94ADC-sIkVg |
|||
**<dl><dd>The definition of a term,</dd><dd>in a definition list</dd></dl> |
|||
http://www.youtube.com/watch?v=x6pP9QYZTIo |
|||
* [[HTML element#Other block elements|<del>]] |
|||
http://www.youtube.com/watch?v=egkmEaHc5wg |
|||
**<del>Deleted text</del> |
|||
http://www.youtube.com/watch?v=XPlfvToALK4 |
|||
* [[HTML element#Other block elements|<div>]] |
|||
http://www.youtube.com/watch?v=n-i5ZE7Zgb0 |
|||
**<div>A block-level logical division</div> |
|||
http://www.youtube.com/watch?v=0EFRC185LFg |
|||
* [[HTML element#Lists|<dl>]] |
|||
http://www.youtube.com/watch?v=iTVjszfHQlw |
|||
**<dl>A definition list (consisting of definition terms paired with definitions)</dl> |
|||
http://www.youtube.com/watch?v=Df0-6Q6LAgI |
|||
* [[HTML element#Lists|<dt>]] |
|||
http://www.youtube.com/watch?v=R7Gi6UMAmgs |
|||
**<dl><dt>A definition term</dt><dt>in a definition list</dt></dl> |
|||
http://www.youtube.com/watch?v=0Qg_fQ3BA6Y |
|||
* [[HTML element#General|<em>]] |
|||
http://www.youtube.com/watch?v=Nu-Xtgt3R8M |
|||
**<em>Emphasis</em> |
|||
http://www.youtube.com/watch?v=dKwBmPDphBE |
|||
* [[HTML element#Presentation|<font>]] |
|||
http://www.youtube.com/watch?v=eI70i3RcfKA |
|||
**<font color="green" size="-1" face="Courier">Can specify the font color with the color attribute, typeface with the face attribute, and absolute or relative size with the size attribute.</font> use <nowiki><span></nowiki> instead |
|||
http://www.youtube.com/watch?v=g05dWSfALCI |
|||
* [[HTML element#Basic text|<h1>]] - [[HTML element#Basic text|<h6>]] |
|||
http://www.youtube.com/watch?v=eI70i3RcfKA |
|||
**<nowiki><h1>Section headings at different levels.</h1></nowiki> |
|||
http://www.youtube.com/watch?v=7vjC14Rzqek |
|||
* [[HTML element#Other block elements|<hr>]] |
|||
http://www.youtube.com/watch?v=gmDtI3GO_e0 |
|||
**<hr>A horizontal rule</hr> |
|||
http://www.youtube.com/watch?v=jRT-X4M6ydc |
|||
* [[HTML element#Presentation|<i>]] |
|||
http://www.youtube.com/watch?v=KUWtV252HWg |
|||
**<i>Sets font to italic where possible</i> |
|||
http://www.youtube.com/watch?v=ZuPrDoLR6A4 |
|||
* [[HTML element#Other block elements|<ins>]] |
|||
http://www.youtube.com/watch?v=jm6eouTleZA |
|||
**<ins>Inserted text</ins> |
|||
http://www.youtube.com/watch?v=Nu-Xtgt3R8M |
|||
* [[HTML element#Lists|<li>]] |
|||
http://www.youtube.com/watch?v=Gjz6E4jXjmQ |
|||
**<li>A list item in ordered (ol)</li><li>or unordered (ul) lists</li> |
|||
http://www.youtube.com/watch?v=Lv09axBShs8 |
|||
* [[HTML element#Lists|<ol>]] |
|||
http://www.youtube.com/watch?v=ThCVSFQchhY |
|||
**<ol><li>An ordered...</li><li>(enumerated) list</li></ol> |
|||
http://www.youtube.com/watch?v=yjnAz9QGsIo |
|||
* [[HTML element#Basic text|<p>]] |
|||
http://www.youtube.com/watch?v=IFr7sYZFunY |
|||
**Creates a <p>paragraph,</p> perhaps the most common block level element |
|||
http://www.youtube.com/watch?v=9DVzQzBF96U |
|||
* [[HTML element#Other block elements|<pre>]] |
|||
http://www.youtube.com/watch?v=fYRlrx1MZWQ |
|||
**a <pre>Pre-formatted text</pre> b |
|||
http://www.youtube.com/watch?v=wdf6XE6S49k |
|||
* [[Ruby character#Ruby markup|<rb>]] |
|||
http://www.youtube.com/watch?v=1Q3g6xoSVCM |
|||
**東 vs <ruby style="font-size:1.2em;"><rb>東</rb></ruby> |
|||
http://www.youtube.com/watch?v=xxnzZNVmUkQ |
|||
* [[Ruby character#Ruby markup|<rp>]] |
|||
http://www.youtube.com/watch?v=SZtsqml4S3g |
|||
**( vs <ruby style="font-size:1.2em;"><rp>(</rp></ruby> |
|||
http://www.youtube.com/watch?v=1_ZBSaCJ6Cc |
|||
* [[Ruby character#Ruby markup|<rt>]] |
|||
http://www.youtube.com/watch?v=lCcRRFP1AL4 |
|||
**とう vs <ruby style="font-size:1.2em;"><rt>とう</rt></ruby> |
|||
http://www.youtube.com/watch?v=1Q3g6xoSVCM |
|||
* [[Ruby character#Ruby markup|<ruby>]] |
|||
http://www.youtube.com/watch?v=rb4r3xNX7y8 |
|||
**東(とう)京(きょう) vs <ruby style="font-size:1.2em;"><rb>東</rb><rp>(</rp><rt>とう</rt><rp>)</rp></ruby> |
|||
<ruby style="font-size:1.2em;"><rb>京</rb><rp>(</rp><rt>きょう</rt><rp>)</rp></ruby> |
|||
* [[HTML element#Presentation|<s>]] |
|||
**<s>Strike-through text</s> |
|||
* [[HTML element#Presentation|<small>]] |
|||
**<small>Decreases</small> font size |
|||
* [[HTML element#Span|<span>]] |
|||
**<span>An inline logical division</span> |
|||
* [[HTML element#Presentation|<strike>]] |
|||
**<s>Strike-through text</s> |
|||
* [[HTML element#General|<strong>]] |
|||
** |
|||
* [[HTML element#Other inline elements|<sub>]] |
|||
**Mark<sub>subscript</sub> |
|||
* [[HTML element#Other inline elements|<sup>]] |
|||
**Mark<sup>superscript</sup> |
|||
* [[HTML element#Tables|<table>]] |
|||
**<table>Identifies a table</table> |
|||
* [[HTML element#Tables|<td>]] |
|||
**<table><td>A table data cell</td></table> |
|||
* [[HTML element#Tables|<th>]] |
|||
**<table><th>A table header cell; contents are conventionally displayed bold and centered</th></table> |
|||
* [[HTML element#Tables|<tr>]] |
|||
**<table><tr>Contains a row of cells in a table</tr></table> |
|||
* [[HTML element#Presentation|<tt>]] |
|||
**<tt>Fixed-width font</tt> |
|||
* [[HTML element#Presentation|<u>]] |
|||
**<u>Underlines text</u> |
|||
* [[HTML element#Lists|<ul>]] |
|||
**<ul><li>An unordered...</li><li>(bulleted) list</li></ul> |
|||
* [[HTML element#Computer phrase elements|<var>]] |
|||
**<var>Variable</var> |
|||
* [[HTML element#Comments|<!-- ... -->]] |
|||
**<nowiki><!--Comment--></nowiki> |
|||
{{Colend}} |
|||
==Anchors== |
==Anchors== |
Revision as of 09:17, 27 December 2010
For many HTML elements, more convenient wikitext code is available, see Help:Wiki markup, however there are some situations in which the HTML alternative is useful, for example creating a link to a particular element of a table.
http://www.youtube.com/watch?v=74-TvGiPW74
http://www.youtube.com/watch?v=R-O27SZXbLg
http://www.youtube.com/watch?v=mZFmBZAY_sk
http://www.youtube.com/watch?v=s9ly9MfPL04
http://www.youtube.com/watch?v=GMzrM3qdeZk
http://www.youtube.com/watch?v=8lvwJCZGy7w
http://www.youtube.com/watch?v=fwAt95Mt1-A
http://www.youtube.com/watch?v=fwAt95Mt1-A
http://www.youtube.com/watch?v=TR0Ex4edbuM
http://www.youtube.com/watch?v=hJr8VbP4yM0
http://www.youtube.com/watch?v=m4CWzyWcc4E
http://www.youtube.com/watch?v=A9QJuck_5k8
http://www.youtube.com/watch?v=S25lTdTlBUk
http://www.youtube.com/watch?v=wBsNgoAQ09s
http://www.youtube.com/watch?v=ZcDxPz_xdBE into
http://www.youtube.com/watch?v=ZcDxPz_xdBE
http://www.youtube.com/watch?v=nphNQ_O-9WY
http://www.youtube.com/watch?v=IngdVvTFrKg
http://www.youtube.com/watch?v=OwmXohLJ4cM
http://www.youtube.com/watch?v=0vXaCDG1vy8
http://www.youtube.com/watch?v=bpgqgjz_sNQ
http://www.youtube.com/watch?v=T1KGxA8Hr5o
http://www.youtube.com/watch?v=94ADC-sIkVg
http://www.youtube.com/watch?v=x6pP9QYZTIo
http://www.youtube.com/watch?v=egkmEaHc5wg
http://www.youtube.com/watch?v=XPlfvToALK4
http://www.youtube.com/watch?v=n-i5ZE7Zgb0
http://www.youtube.com/watch?v=0EFRC185LFg
http://www.youtube.com/watch?v=iTVjszfHQlw
http://www.youtube.com/watch?v=Df0-6Q6LAgI
http://www.youtube.com/watch?v=R7Gi6UMAmgs
http://www.youtube.com/watch?v=0Qg_fQ3BA6Y
http://www.youtube.com/watch?v=Nu-Xtgt3R8M
http://www.youtube.com/watch?v=dKwBmPDphBE
http://www.youtube.com/watch?v=eI70i3RcfKA
http://www.youtube.com/watch?v=g05dWSfALCI
http://www.youtube.com/watch?v=eI70i3RcfKA
http://www.youtube.com/watch?v=7vjC14Rzqek
http://www.youtube.com/watch?v=gmDtI3GO_e0
http://www.youtube.com/watch?v=jRT-X4M6ydc
http://www.youtube.com/watch?v=KUWtV252HWg
http://www.youtube.com/watch?v=ZuPrDoLR6A4
http://www.youtube.com/watch?v=jm6eouTleZA
http://www.youtube.com/watch?v=Nu-Xtgt3R8M
http://www.youtube.com/watch?v=Gjz6E4jXjmQ
http://www.youtube.com/watch?v=Lv09axBShs8
http://www.youtube.com/watch?v=ThCVSFQchhY
http://www.youtube.com/watch?v=yjnAz9QGsIo
http://www.youtube.com/watch?v=IFr7sYZFunY
http://www.youtube.com/watch?v=9DVzQzBF96U
http://www.youtube.com/watch?v=fYRlrx1MZWQ
http://www.youtube.com/watch?v=wdf6XE6S49k
http://www.youtube.com/watch?v=1Q3g6xoSVCM
http://www.youtube.com/watch?v=xxnzZNVmUkQ
http://www.youtube.com/watch?v=SZtsqml4S3g
http://www.youtube.com/watch?v=1_ZBSaCJ6Cc
http://www.youtube.com/watch?v=lCcRRFP1AL4
http://www.youtube.com/watch?v=1Q3g6xoSVCM
http://www.youtube.com/watch?v=rb4r3xNX7y8
Anchors
HTML tags allow an id
attribute that can be referenced in one's user style CSS, and allows the element to be used as link target.
However, the anchor element a
is not allowed, so the wikitext
<a href="http://meta.wikimedia.org/">Main Page</a>
is treated like the wikitext
<a href="http://meta.wikimedia.org/">Main Page</a>
and is therefore displayed as
<a href="http://meta.wikimedia.org/">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 required (enclosed in square brackets with the URL separated from the contents by a single space):
[http://meta.wikimedia.org/ Main Page]
displays as
The following excerpt from Sanitizer.php additionally shows which attributes are allowed.
$htmlpairsStatic = 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', 'abbr'
);
$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',
);
Tags
Template:Mlw is a generic inline text container.
<font>
is a similar tag which is deprecated (should not be used) in favor of <span>.
For example
a <font color="red">red</font> word.
produces the same result as
a <span style="color:red">red</span> word.
See also m:Template:font size demo (backlinks edit) and m: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 target
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 that can be the destination of a link. (This is silently changed to <span id="Foo"></span>
). 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.
This technique can be used to produce immutable links from one article to a section of another, which continue to work even if the section name is changed by someone who does not realize that another article links there. For example, <span id="immutable link from Article"/>
.
<div>
<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)
HTML comment
Using m:Template:t (backlinks edit):
- Template:Xpd
- "
{{subst:xpd|t}}"
gives "<!--t-->start-pqr-end", producing HTML code without the comment.
The "Remove comments" option of 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:
{{#expr:<!--p-->3}} {{#ifeq:<!--p-->3|3|1|0}} {{#if:<!--p-->|1|0}}
Result of normal expansion, and of ExpandTemplates with "Remove comments" on:
3
1
0
Result of full substitution, and of ExpandTemplates with "Remove comments" off:
0
0
1
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 {{void|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 {{{{{subst1|}}}#expr:3*{{{1}}} {{{{{subst1|}}}void| multiply by 3 }}}}.
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. {{{ 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 -->|}}}.
See also m:Template:t comment (backlinks edit).
Attributes
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="infobox">Example infobox</div>
Produces the box which floats on the right because infobox 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.
Classes are also widely used to create microformats. See the microformats project for more information. Some class names are reserved for use in microformats.
Another attribute example is title, for example used in {{H:title}} template: note the hover box over "20000 ft"
"a height of 6.1 km above sea level"
Tags with special effect
Pre
<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
HTML comments in the wikitext (<!-- ... -->) will not appear in the HTML code at all.
Headers
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
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 <span id=abc> 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 Help:User style) are interpreted as if inside a <pre> block. From MW 1.11 this also goes for sitewide CSS/JS; in earlier versions, you have to manually add /*<pre>*/ to the beginning and /*</pre>*/ to the end of those pages to avoid strange rendering.
Validation
The MediaWiki software attempts to catch HTML errors, but it does not catch all of them. If you use HTML in wikitext, it is helpful to verify it with the W3C Markup Validation Service.
See also
External links
- HTML 4.01 specification: elements | 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 $wgRawHtml for a more complete list
- Within the MediaWiki codebase, these HTML checks happen in includes/Sanitizer.php