Community Central
Community Central
m (Formatting)
Tag: Help
(Adding information about the deprecated tags and changes.)
Tag: Help
Line 1: Line 1:
[[File:Code image.png|right|250px|border]]
 
[[File:Location Source.png|thumb|250px|How to access source mode in the [[Help:Classic editor|classic editor]]]]
 
 
'''HTML''' (Hypertext Markup Language) is a language used on websites to format the layout and content. Wiki pages are generally managed by [[Help:Wikitext|wikitext]] rather than HTML, so only a limited number of HTML tags can be used on articles.
 
'''HTML''' (Hypertext Markup Language) is a language used on websites to format the layout and content. Wiki pages are generally managed by [[Help:Wikitext|wikitext]] rather than HTML, so only a limited number of HTML tags can be used on articles.
   
HTML (and wikitext) can be written and managed while using [[Help:Editing|the editor]]'s source mode.
+
HTML (and wikitext) can be written and managed while using [[Help:Editing|the editor]]'s source editor.
   
 
== Available HTML tags ==
 
== Available HTML tags ==
The following HTML tags can be used on articles. Deprecated HTML tags will still work, but they may not in future software versions or browsers.
+
The following HTML tags can be used on articles:
   
 
<div style="column-count: 3;">
 
<div style="column-count: 3;">
 
* <code><nowiki><abbr></nowiki></code>
 
* <code><nowiki><abbr></nowiki></code>
* <code><nowiki><acronym></nowiki></code> ''(deprecated, see [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/acronym here])''
 
 
* <code><nowiki><b></nowiki></code>
 
* <code><nowiki><b></nowiki></code>
* <code><nowiki><big></nowiki></code> ''(deprecated, see [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/big here])''
 
 
* <code><nowiki><blockquote></nowiki></code>
 
* <code><nowiki><blockquote></nowiki></code>
 
* <code><nowiki><br /></nowiki></code>
 
* <code><nowiki><br /></nowiki></code>
 
* <code><nowiki><caption></nowiki></code>
 
* <code><nowiki><caption></nowiki></code>
* <code><nowiki><center></nowiki></code> ''(deprecated, see [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center here])''
 
 
* <code><nowiki><cite></nowiki></code>
 
* <code><nowiki><cite></nowiki></code>
 
* <code><nowiki><code></nowiki></code>
 
* <code><nowiki><code></nowiki></code>
Line 26: Line 21:
 
* <code><nowiki><dt></nowiki></code>
 
* <code><nowiki><dt></nowiki></code>
 
* <code><nowiki><em></nowiki></code>
 
* <code><nowiki><em></nowiki></code>
* <code><nowiki><font></nowiki></code> ''(deprecated, see [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font here])''
 
 
* <code><nowiki><h1></nowiki></code>
 
* <code><nowiki><h1></nowiki></code>
 
* <code><nowiki><h2></nowiki></code>
 
* <code><nowiki><h2></nowiki></code>
Line 36: Line 30:
 
* <code><nowiki><i></nowiki></code>
 
* <code><nowiki><i></nowiki></code>
 
* <code><nowiki><ins></nowiki></code>
 
* <code><nowiki><ins></nowiki></code>
  +
* <code><nowiki><kbd></nowiki></code>
 
* <code><nowiki><li></nowiki></code>
 
* <code><nowiki><li></nowiki></code>
 
* <code><nowiki><ol></nowiki></code>
 
* <code><nowiki><ol></nowiki></code>
Line 46: Line 41:
 
* <code><nowiki><ruby></nowiki></code>
 
* <code><nowiki><ruby></nowiki></code>
 
* <code><nowiki><s></nowiki></code>
 
* <code><nowiki><s></nowiki></code>
  +
* <code><nowiki><samp></nowiki></code>
 
* <code><nowiki><small></nowiki></code>
 
* <code><nowiki><small></nowiki></code>
 
* <code><nowiki><span></nowiki></code>
 
* <code><nowiki><span></nowiki></code>
* <code><nowiki><strike></nowiki></code> ''(deprecated, see [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strike here])''
 
 
* <code><nowiki><strong></nowiki></code>
 
* <code><nowiki><strong></nowiki></code>
 
* <code><nowiki><sub></nowiki></code>
 
* <code><nowiki><sub></nowiki></code>
Line 56: Line 51:
 
* <code><nowiki><th></nowiki></code>
 
* <code><nowiki><th></nowiki></code>
 
* <code><nowiki><tr></nowiki></code>
 
* <code><nowiki><tr></nowiki></code>
* <code><nowiki><tt></nowiki></code> ''(deprecated, see [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt here])''
 
 
* <code><nowiki><u></nowiki></code>
 
* <code><nowiki><u></nowiki></code>
 
* <code><nowiki><ul></nowiki></code>
 
* <code><nowiki><ul></nowiki></code>
Line 62: Line 56:
 
* <code><nowiki><!-- ... --></nowiki></code> ''(displayed as [[File:Comment Icon.png|Comments|link=]] in visual mode; except UCP has different symbol)''
 
* <code><nowiki><!-- ... --></nowiki></code> ''(displayed as [[File:Comment Icon.png|Comments|link=]] in visual mode; except UCP has different symbol)''
 
</div>
 
</div>
  +
  +
== Deprecated HTML tags ==
  +
Deprecated HTML tags will still work, but they may not in future software versions or browsers.
  +
{|class="wikitable"
  +
|+ Deprecated tags
  +
|-
  +
! scope="col" | Deprecated tag
  +
! scope="col" | Replacement
  +
! scope="col" | Example
  +
! scope="col" | Example display
  +
|-
  +
| <code><nowiki><center></nowiki></code> || <code><nowiki><div style="text-align: center;"></nowiki></code>
  +
| <code><nowiki><div style="text-align: center;">Centered</div></nowiki></code> || <div style="text-align: center;">Centered</div>
  +
|-
  +
| rowspan="2" | <code><nowiki><font color="x" size="y" face="z"></nowiki></code> || rowspan="2" | <code><nowiki><span style="color: x; font-size: y; font-family: z;"></nowiki></code>
  +
| <code><nowiki><span style="color: red;">Red Alert!</span></nowiki></code> || <span style="color: red;">Red Alert!</span>
  +
|-
  +
| <code><nowiki><span style="font-family: Times New Roman;">This is Times New Roman</span></nowiki></code> || <span style="font-family: Times New Roman;">This is Times New Roman</span>
  +
|-
  +
| rowspan="2" | <code><nowiki><strike></nowiki></code>
  +
| <code><nowiki>del</nowiki></code> (for marking an edit) || <code><nowiki><del>Yes</del> No</nowiki></code> || <del>Yes</del> No
  +
|-
  +
| <code><nowiki><s></nowiki></code> (for anything else) || <code><nowiki>Photon Torpedoes <s>$44.99</s> '''now just $24.99!''' each</nowiki></code> || Photon Torpedoes <s>$44.99</s> '''now just $24.99!''' each
  +
|-
  +
| rowspan="5" | <code><nowiki><tt></nowiki></code> || <code><nowiki><code></nowiki></code> preferred for source code)
  +
| <code>use <nowiki><code>&amp;nbsp;</code></nowiki> for nonbreaking space</code> ||style="background-color:#efefef;"| use <code>&amp;nbsp;</code> for nonbreaking space
  +
|-
  +
| <code><nowiki><kbd></nowiki></code> (preferred for user input) || <code><nowiki><kbd>mypasswd</kbd></nowiki></code> ||style="background-color:#efefef;"| <kbd>mypasswd</kbd>
  +
|-
  +
| <code><nowiki><var></nowiki></code> (preferred for variables) || <code><nowiki><var>age</var>=65</nowiki></code> ||style="background-color:#efefef;"| <var>age</var>=65
  +
|-
  +
| <code><nowiki><samp></nowiki></code> (preferred for computer output) || <code><nowiki><samp>Invalid password. Please try again.</samp></nowiki></code> ||style="background-color:#efefef;"| <samp>Invalid password. Please try again.</samp>
  +
|-
  +
| If you want to use the similar of tt tag, use:<br/>
  +
<code><nowiki><span style="font-family: monospace, monospace;"></nowiki></code>
  +
| <code><nowiki><span style="font-family: monospace, monospace;">Typed text</span></nowiki></code>
  +
|style="background-color:#efefef;"| <span style="font-family: monospace;">Typed text</span>
  +
|-
  +
| '''Table cell horizontal alignment:''' <code>align=''X''</code><br/>where <span style="font-family: monospace, monospace;">''X''</span> is <span style="font-family: monospace, monospace;">"left"</span>, <span style="font-family: monospace, monospace;">"center"</span> or <span style="font-family: monospace, monospace;">"right"</span> (sometimes without quotes)<br/>
  +
| <code>style="text-align: X;"</code>
  +
| <code>style="text-align: right;" &#124; right-justified text</code> || style="text-align: right;" | right-justified text
  +
|-
  +
| '''Table cell vertical alignment:''' <code>valign=''X''</code><br/>where <span style="font-family: monospace, monospace;">''X''</span> is <span style="font-family: monospace, monospace;">"top"</span>, <span style="font-family: monospace, monospace;">"middle"</span> or <span style="font-family: monospace, monospace;">"bottom"</span> (sometimes without quotes)
  +
| <code>style="vertical-align: X;"</code>
  +
| <code>style="vertical-align: top;" &#124; top aligned text</code> || style="vertical-align: top;" | top aligned text
  +
|-
  +
| '''Table cell background color:''' <code>bgcolor=''X''</code>
  +
| <code>style="background-color: X;"</code>
  +
| <code>style="background-color: pink" &#124; pink background</code> || style="background-color: pink" | pink background
  +
|}
   
 
== Usage notes ==
 
== Usage notes ==
Line 72: Line 116:
 
* [[Help:Tables|Tables]]
 
* [[Help:Tables|Tables]]
 
* [[Help:Editing|Editing]]
 
* [[Help:Editing|Editing]]
* [[m:Help:Editing|Wikimedia's help page]]
+
* [[m:Help:Editing|Meta-Wiki's help page]]
* [[m:Help:HTML in wikitext|Using HTML in Wikitext]]
+
* [[m:Help:HTML in wikitext|Using HTML in Wikitext on Meta-Wiki]]
* [[wikipedia:Wikipedia:Span tags|Information on using span tags]]
+
* [[wikipedia:Wikipedia:Span tags|Information on using span tags on Wikipedia]]
   
 
== Further help and feedback ==
 
== Further help and feedback ==

Revision as of 18:22, 28 January 2021

HTML (Hypertext Markup Language) is a language used on websites to format the layout and content. Wiki pages are generally managed by wikitext rather than HTML, so only a limited number of HTML tags can be used on articles.

HTML (and wikitext) can be written and managed while using the editor's source editor.

Available HTML tags

The following HTML tags can be used on articles:

  • <abbr>
  • <b>
  • <blockquote>
  • <br />
  • <caption>
  • <cite>
  • <code>
  • <dd>
  • <del>
  • <dfn>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <hr>
  • <i>
  • <ins>
  • <kbd>
  • <li>
  • <ol>
  • <p>
  • <pre> (it is actually a parser tag, applying the HTML tag but also escaping any markup inside except HTML entities, similar to <nowiki>)
  • <q>
  • <rb>
  • <rp>
  • <rt>
  • <ruby>
  • <s>
  • <samp>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <table>
  • <td>
  • <th>
  • <tr>
  • <u>
  • <ul>
  • <var>
  • <!-- ... --> (displayed as Comments in visual mode; except UCP has different symbol)

Deprecated HTML tags

Deprecated HTML tags will still work, but they may not in future software versions or browsers.

Deprecated tags
Deprecated tag Replacement Example Example display
<center> <div style="text-align: center;"> <div style="text-align: center;">Centered</div>
Centered
<font color="x" size="y" face="z"> <span style="color: x; font-size: y; font-family: z;"> <span style="color: red;">Red Alert!</span> Red Alert!
<span style="font-family: Times New Roman;">This is Times New Roman</span> This is Times New Roman
<strike> del (for marking an edit) <del>Yes</del> No Yes No
<s> (for anything else) Photon Torpedoes <s>$44.99</s> '''now just $24.99!''' each Photon Torpedoes $44.99 now just $24.99! each
<tt> <code> preferred for source code) use <code>&nbsp;</code> for nonbreaking space use &nbsp; for nonbreaking space
<kbd> (preferred for user input) <kbd>mypasswd</kbd> mypasswd
<var> (preferred for variables) <var>age</var>=65 age=65
<samp> (preferred for computer output) <samp>Invalid password. Please try again.</samp> Invalid password. Please try again.
If you want to use the similar of tt tag, use:

<span style="font-family: monospace, monospace;">

<span style="font-family: monospace, monospace;">Typed text</span> Typed text
Table cell horizontal alignment: align=X
where X is "left", "center" or "right" (sometimes without quotes)
style="text-align: X;" style="text-align: right;" | right-justified text right-justified text
Table cell vertical alignment: valign=X
where X is "top", "middle" or "bottom" (sometimes without quotes)
style="vertical-align: X;" style="vertical-align: top;" | top aligned text top aligned text
Table cell background color: bgcolor=X style="background-color: X;" style="background-color: pink" | pink background pink background

Usage notes

Keep it friendly
The use of wikitext is recommended wherever possible, as HTML generally makes the text in the edit box harder to read and more intimidating for new users. Complex uses of HTML and CSS can be hidden away in templates where they are less likely to get in the way of the casual editor.
Combine it with CSS
Styling information can be stored in community CSS pages (using code like class="classname"). Both CSS classes and inline styling (style="color: pink;") can be used with the HTML tags listed above, and they can also be used with many types of wikitext, particularly tables, table rows and cells. However, please keep in mind that use of inline styling should be limited, as it can cause conflicts with the mobile experience of your community.

See also

Further help and feedback