Help:HTML in wikitext: Difference between revisions

Content deleted Content added
Obsolete/deprecated elements: big is not obsolete in Linter
 
(117 intermediate revisions by 53 users not shown)
Line 1:
{{Short description|Usage of HTML tags with MediaWiki}}
{{Locutions pages header}}
<noinclude>{{pp-semi-indef|small=yes}}</noinclude>
 
{{Redirect|WP:HTML|general information about the default markup language on Wikipedia|Wikipedia:HTML5}}{{For|wikitext equivalents to HTML tags|Help:Wikitext}}{{Locutions pages header}}
{{Wikipedia how to|H:HTML|WP:HTML}}
 
{{Wiki markup}}
{{HTML}}
The MediaWiki software, which drives Wikipedia, allows the use of a subset of [[HTML5]] [[HTML element|elements]], or tags and their [[HTML attribute|attributes]], for presentation formatting.{{r|sanitizer}} But most HTML can be included by using equivalent [[Help:Wiki markup|wiki markup]] or [[Help:Template|templates]]; these are generally preferred within articles, as they are sometimes simpler for most editors and less intrusive in the editing window; but [[Wikipedia:Manual_of_Style#Keep_markup_simple|Wikipedia's Manual of Style]] recommends their use in certain cases. And HTML is useful outside of articles, for example for formatting within templates. For help with Cascading Style Sheet use within Wikipedia see [[Help:Cascading Style Sheets]].
 
The [[MediaWiki]] software, which drives Wikipedia, allows the use of a subset of [[HTML5]] [[HTML element|elements]], or tags and their [[HTML attribute|attributes]], for presentation formatting.{{r|sanitizer}} However, most HTML functionality can be replicated using equivalent [[Help:Wiki markup|wiki markup]] or [[Help:Templates|templates]]. These alternatives are generally preferred within articles because they are often simpler for most editors to use and less intrusive in the editing interface. [[Wikipedia:Manual_of_Style#Keep_markup_simple|Wikipedia's Manual of Style]] recommends when and where these alternatives should be used. (See [[Help:Wikitext]] for wikitext equivalents to HTML tags not otherwise discussed below.)
Some tags look like HTML, but are actually MediaWiki [[#Parser and extension tags|parser and extension tags]], and so are really wiki markup. HTML in pages can be checked for HTML5 compliance by using [[#Validation|validation]]. Some elements and attributes are supported by MediaWiki and browsers, but have been [[Wikipedia:HTML5|deprecated by HTML5]], and therefore should no longer be used.
 
{{TOC limit|3}}
HTML can also be useful outside articles, such as for formatting within templates. For assistance with using Cascading Style Sheets on Wikipedia, see [[Help:Cascading Style Sheets]].
 
Some tags that resemble HTML are actually MediaWiki [[#Parser and extension tags|parser and extension tags]], and so are actually wiki markup. HTML included in pages can be validated for HTML5 compliance by using [[#Validation|validation]]. Note that some elements and attributes supported by MediaWiki and browsers have been [[Wikipedia:HTML5|deprecated by HTML5]] and should no longer be used.{{TOC limit|3}}
 
== Tutorials ==
This help page gives only an overview of allowed markup. For further assistance and detailed specifications:
 
* [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 HTML5 Introduction] at developer.mozilla.org
* [httphttps://wwwdeveloper.w3schoolsmozilla.comorg/htmlen-US/html5_intro.aspdocs/Learn/HTML HTML5 Introduction] at w3schoolsdeveloper.mozilla.comorg
* [https://www.w3schools.com/html/default.asp HTML5 Introduction] at w3schools.com
 
== Attributes ==
Line 20 ⟶ 26:
* <code>dir</code>: text direction— <code>"ltr"</code> (left-to-right), <code>"rtl"</code> (right-to-left) or <code>"auto"</code>.
* <code>id</code>: unique identifier for the element.
* <code>lang</code>: primary language for the contents of the element per [[BCP 47]]. The MediaWiki software automatically adds the <code>xml:lang</code> attribute whenever <code>lang</code> is defined, but <code>xml:lang</code> will no longer be passed when included as a separate attribute.
* <code>style</code>: applies CSS styling to the contents of the element.
* <code>title</code>: advisory information associated with the element.
Line 43 ⟶ 49:
 
{{markup
|<nowikisyntaxhighlight lang="html">This is <span style="color:red;">red</span> text.</nowikisyntaxhighlight>
|2=This is <span style="color:red;">red</span> text.
}}
Line 61 ⟶ 67:
=== Basic ===
 
==== h1, h2, h3, h4, h5, h6 ====
== Gulfateh Khan ==
{{see|Help:Section|MOS:HEAD}}
as a Singer
The {{tag|h1}} through {{tag|h6}} tags are headings for the sections with which they are associated. {{tag|h1|o}} is used for the article title. Headings are [[Help:Cascading Style Sheets#Wiki headings|styled through CSS]] and added to the page's [[Help:table of contents|table of contents]].
22 June 1996
 
New Delhi, India
{{markup
Nationality Indian
|<nowiki><h1>Heading 1</h1>
Other names Music GK
<h2>Heading 2</h2>
Education Govt.Boys Sen.Sec.School, Delhi, India
<h3>Heading 3</h3>
Occupation Singer, rapper, music director, actor, composer, lyricist
<h4>Heading 4</h4>
Years active 2015-till date
<h5>Heading 5</h5>
Known for Singing
<h6>Heading 6</h6></nowiki>
Notable work Vodka Party with gf, Moti bagh ki chhori, Mahiyan, Sharam, Pyaar ki Hove,
|{{fakeheading|sub=1|Heading 1}}
{{fakeheading|sub=2|Heading 2}}
{{fakeheading|sub=3|Heading 3}}
{{fakeheading|sub=4|Heading 4}}
{{fakeheading|sub=5|Heading 5}}
{{fakeheading|sub=6|Heading 6}}
}}
 
Wikimarkup: surround the text with the appropriate number of equal signs. Headers formatted with wikimarkup add an [edit] link.
<section begin="WIKI_section" />
{{markup
|<nowiki>= Heading 1 =
== Heading 2 ==
=== Heading 3 ===
==== Heading 4 ====
===== Heading 5 =====
====== Heading 6 ======
</nowiki>|{{fake heading|sub=1|Heading 1}}
{{fake heading|sub=2|Heading 2}}
{{fake heading|sub=3|Heading 3}}
{{fake heading|sub=4|Heading 4}}
{{fake heading|sub=5|Heading 5}}
{{fake heading|sub=6|Heading 6}}
}}
<section end="WIKI_section" />
 
Templates: {{tlx|fake heading}} for use in documentation
Gulfateh Khan (born 22 June 1996)[citation needed], also known as Music GK, is an Indian, Punjabi
music director, singer, songwriter, rapper, model and actor from New Delhi. He is known for his work in Vodka party with gf
Moti bagh ki chhori, Mahiyan, Sharam, Pyaar ki Hove,[[https://www.faceb]]ook.com/GulfatehKhan/
 
==== p ====
Line 98 ⟶ 127:
{{tag|p}} is especially useful in lists, for list items with multiple paragraphs:
 
{{markup|<nowikisyntaxhighlight lang="tid">
* <p>This is a paragraph.</p><p>This is another paragraph in the same item.</p>
* This is a different item.</nowikisyntaxhighlight>
|
* <p>This is a paragraph.</p><p>This is another paragraph in the same item.</p>
Line 108 ⟶ 137:
 
==== br ====
{{see|WikipediaHelp:Line-break handling#&lt;br&gt;| Wikipedia:Don't use line breaks}}
{{tag|br|o}} or {{tag|br|s}} inserts a line break. BothSee versions[[H:BR]] offor the breakother are4 supportedversions bythat HTML5.the {{tag|br|c}}[[MediaWiki]] issoftware invalid.converts Usingto {{tag|br|os}} withoutin the <code>/</code>HTML breaksthat [[Wikipedia:Syntaxbrowsers highlighting#Syntaxread. highlighting of wiki-code for editors|syntax highlighting]], so should be avoided.
 
{{markup
|<nowiki>HyperText<br>Markup Language</nowiki>
|HyperText<br />Markup Language
}}
 
Line 141 ⟶ 170:
 
==== Comments ====
{{see|WPMOS:COMMENT}}
{{tag|!--}} formats the enclosed text as a hidden comment.
 
Line 164 ⟶ 193:
 
==== abbr ====
{{tag|abbr}} creates a [[Wikipedia:Tooltips|tooltip]] to define an abbreviation or acronym that is displayed on mouse-over.
 
{{markup
Line 208 ⟶ 237:
 
Attributes and values:
* <code>dir</code> Specifies the text direction.
** <code>ltr</code>
** <code>rtl</code>
Line 235 ⟶ 264:
|<cite>HyperText Markup Language</cite>
}}
 
{{tag|cite}} is generally not used directly in Wikipedia articles, and is often misused; see [[Wikipedia:HTML 5#cite]] for replacement instructions.
 
==== code ====
{{tag|code}} formats a section of computer code. Styled with [[Cascading Style Sheets|CSS]] through {{MediaWiki source|mediawiki.skinning/elements.cssless}} as a monospacedblack slab[[Monospaced seriffont|monospaced]] typeface with a grey background (#F8F9FA) and border (#EAECF0).
 
{{markup
|<nowiki>use <code>HyperTextthis Markup Languagecode</code></nowiki>
|use <code>HyperTextthis Markup Languagecode</code>
|col2=Renders as<ref name="white bgcolor">For the table cell a white background color was chosen here for a better display of the light gray background.</ref>
|col2style=background-color:#fff;
}}
 
Templates: {{tlx|code}} uses {{xtag|syntaxhighlight}}. See the "See also" section at the template page for additional code-markup templates.
 
See the {{section link||samp}} and {{section link||kbd}} sections ofon this page for semantic markup of output and input, respectively.
 
==== data ====
Line 311 ⟶ 344:
 
==== kbd ====
{{tag|kbd}} indicates user input such as keyboard input or voice commands (but ''no'' {{kbd|gray background}} as with the template {{tlx|kbd}}).
 
{{markup
Line 339 ⟶ 372:
{{markup
|<nowiki><pre>HyperText Markup Language</pre></nowiki>
|col2=Renders as<ref name="white bgcolor"/>
 
|col2style=background-color:#fff
 
|<pre>
Line 348 ⟶ 382:
===== HTML entities =====
 
{{tag|pre|o}} parses [[Character encodings in HTML|HTML entities]]. If you want to escape this, replace <code>&</code> with <code>&amp;amp;</code>, or use {{xtag|sourcesyntaxhighlight|params = lang="text"}} instead.
 
{{markup
|<nowiki><pre>&amp;amp;</pre></nowiki>
|col2=Renders as<ref name="white bgcolor"/>
 
|col2style=background-color:#fff
 
|<pre>
Line 379 ⟶ 414:
Templates:
* {{tlx|pre}} wraps text that overflows the page.
* {{tlx|pre2}} wraps or uses scrollbox.
 
==== q ====
Line 389 ⟶ 423:
}}
 
[[MOS:QUOTATIONS]] says Wikipedia should instead use "", {{tl|quote}}, or <nowiki><blockquote></nowiki>.
==== rp, rt, ruby ====
 
==== rp, rt, rtc, ruby ====
 
{{see|Ruby character}}
 
{{tag|ruby}} marks spans of phrasing content with ruby annotations.
* {{tag|rtc}} marks a ruby text container for ruby text components in a ruby annotation
 
* {{tag|rt}} marks the ruby text component of a ruby annotation; the ruby text shows in a reduced size over top of the normal characters.
* {{tag|rp}} is used to provide parentheses around a ruby text component of a ruby annotation, to be shown by user agents that don't support ruby annotations.
 
{{tag|rp}} is used to provide parentheses around a ruby text component of a ruby annotation, to be shown by user agents that don’t support ruby annotations.
 
Browsers that do not support ruby characters will show the ruby text in normal size, enclosed in parentheses and after the normal content.
 
{{markup
|<nowikisyntaxhighlight lang="html"><ruby>
<rtc><rp>(</rp><rt>とう</rt><rp>)</rp></rtc>
<rtc><rp>(</rp><rt>きょう</rt><rp>)</rp></rtc>
</ruby></nowikisyntaxhighlight>
|<ruby>
<rtc><rp>(</rp><rt>とう</rt><rp>)</rp></rtc>
<rtc><rp>(</rp><rt>きょう</rt><rp>)</rp></rtc>
</ruby>
}}
Line 419 ⟶ 454:
 
==== s ====
{{tag|s}} is used to indicate inline content that is no longer accurate or relevant and that has been struck from the page. It is not appropriate when indicating document edits; to mark a span of text as having been removed from a document, use {{tag|del|o}}.
 
{{markup
Line 426 ⟶ 461:
}}
 
Templates: {{tlx|strikethrough}} (for inline content), {{tlx|strikethroughdiv}} (for block content)
 
==== samp ====
Line 432 ⟶ 467:
 
{{markup
|<nowiki>sample output: <samp>HyperText Markup LanguageHTML</samp></nowiki>
|sample output: <samp>HyperText Markup LanguageHTML</samp>
}}
 
Line 448 ⟶ 483:
 
Templates:
* {{tlx|small}} uses {{tag|smallspan|o|params=style="font-size:85%;"}}. {{tlx|small}} is recommended over {{tag|small|o}} since not{{tag|small}} allhas browsersa rendersemantic meaning that is for [[fine print]], whereas {{tlx|small}} textis thepurely samestylistic.
 
==== strong ====
Line 469 ⟶ 504:
}}
 
Templates:{{hlist|
*| {{tlx|sub}} ({{sub|subscript}} text)
*| {{tlx|subsub}} ({{subsub|subscript subscript}} text)
*| {{tlx|ssub}} ({{ssub|subscript, small}} text)
*| {{tlx|sup}} {{nbsp}}({{sup|superscript}} text)
*| {{tlx|su}} ({{su|p=superscript|b=subscript}} text)
*| {{tlx|sup sub}} (text{{sup sub|sup|sub}})
*| {{tlx|e}} (1.23{{e|4}})
|style=line-height:2.5
|indent=3}}
 
==== sup ====
Line 510 ⟶ 547:
==== u ====
{{see|MOS:BADEMPHASIS|MOS:QUOTE}}
{{tag|u}} represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is underlining; for example, a span of text in Chinese that is a proper name (a Chinese proper name mark), or span of text that is known to be misspelled.
 
{{tag|u|o}} was [[HTML element#Presentational markup|presentational element of HTML]] that was originally used to underline text; this usage was [[deprecated]] in HTML4 in favor of the [[CSS]] style <code>{text-decoration: underline}</code>.<ref name=mozilla>{{cite web |url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u |title=&lt;u&gt;: The Unarticulated Annotation (Underline) element | date = 1 August 2020 |access-date= 9 October 2020 | website= mozilla.org}}</ref> In HTML5, the tag reappeared but its meaning was changed significantly: it now "represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation".<ref name=mozilla /> This facility is intended for example to provide a red wavy line underline to flag spelling errors at input time but which are not to be embedded in any stored file (unlike an emphasis mark, which would be).
 
{{markup
|<nowiki><u>HyperText Markup Language</u></nowiki>
|<u>HyperText Markup Language</u>
}}
 
Templates: {{tlx|underline}} (which supplies the recommended CSS style)
 
==== var ====
Line 524 ⟶ 563:
 
{{markup
|1=<syntaxhighlight lang="wikitext">
|1=
*<nowiki><var>E</var>=<var>m</var>c<sup>2</sup> (c is a constant not a variable)</nowiki>
*<nowikicode><code>&lt;nowiki&gt;>{{&lt;</nowiki&gt;><var>TemplateName</var>|<var>parameter</var>=<var>value</var>&lt;<nowiki&gt;>}}&lt;/nowiki&gt;</codenowiki></nowikicode>
*<nowiki>If <var>A</var> then <var>B</var></nowiki>
 
</syntaxhighlight>
 
|2=
*<var>E</var>=<var>m</var>c<sup>2</sup> (c is a constant not a variable)<br />
Line 539 ⟶ 581:
 
==== wbr ====
{{see| WikipediaHelp:Line-break handling#&lt;wbr&gt; and soft hyphens}}
{{tag|wbr|o}} is a word break opportunity; that is, it specifies where it would be OK to add a line-break where a word is too long, or it is perceived that the browser will break a line at the wrong place.
 
Line 561 ⟶ 603:
 
{{markup
|<nowikisyntaxhighlight lang="html"><dl>
<dt>Term</dt>
<dd>Definition 1</dd>
<dd>Definition 2</dd>
</dl></nowikisyntaxhighlight>
|<dl>
<dt>Term</dt>
Line 576 ⟶ 618:
 
{{markup
|<nowikisyntaxhighlight lang="wikitext">; Term
: Definition 1
: Definition 2</nowikisyntaxhighlight>
|<dl><!-- this wikimarkup does not render in this template -->
<dt>Term</dt>
Line 592 ⟶ 634:
 
{{markup
|<nowikisyntaxhighlight lang="html"><ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></nowikisyntaxhighlight>
|<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
|<nowikisyntaxhighlight lang="html"><ul>
<li>Item 1</li>
<li>Item 2</li>
</ul></nowikisyntaxhighlight>
|<ul>
<li>Item 1</li>
Line 612 ⟶ 654:
Wikimarkup: use <code>*</code> for items in an unordered list and <code>#</code> for ordered lists.
{{markup
|1=<nowikisyntaxhighlight lang="wikitext"># Item 1
# Item 2</nowikisyntaxhighlight>
|2=<nowiki />
# Item 1
# Item 2
|3=<nowikisyntaxhighlight lang="wikitext">* Item 1
* Item 2</nowikisyntaxhighlight>
|4=<nowiki />
* Item 1
Line 652 ⟶ 694:
{{tag|table}} defines a table.
 
* {{tag|tr}} defines a table row.
* {{tag|td}} defines a data cell with contents that may include text, links, images, lists, forms, other tables, etc.
 
{{tag|td}} defines a data cell with contents that may include text, links, images, lists, forms, other tables, etc.
 
{{markup
|<nowikisyntaxhighlight lang="html"><table border=1>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table></nowikisyntaxhighlight>
|2=<table border=1>
<tr>
Line 682 ⟶ 723:
 
{{markup
|<nowikisyntaxhighlight lang="html"><table border="1">
<tr>
<th>Header</th>
Line 691 ⟶ 732:
<td>data</td>
</tr>
</table></nowikisyntaxhighlight>
|2=<table border="1">
<tr>
Line 712 ⟶ 753:
 
{{markup
|<nowikisyntaxhighlight lang="html"><table border=1>
<caption>Caption</caption>
<tr>
Line 718 ⟶ 759:
<td>data</td>
</tr>
</table></nowikisyntaxhighlight>
|2=<table border=1>
<caption>Caption</caption>
Line 736 ⟶ 777:
 
== Obsolete/deprecated elements ==
{{main|Wikipedia:HTML5#Obsolete elements and attributes}}
These elements are now obsolete and deprecated in HTML5, but still supported by browsers.<ref name="w3c_obsolete" /> These tags either have an alternate tag or a template that replaces their function with CSS. See [[Wikipedia:HTML5]] for more details on obsolete HTML parts and their replacements.
These elements are now obsolete and either deprecated or removed in HTML5, although they are still supported by browsers.<ref name="w3c_obsolete" /> '''Their use should be avoided on Wikipedia.''' These tags either have an alternate tag or a template that replaces their function with CSS; except for {{tag|big}}, the tags are being replaced by editors on pages throughout Wikipedia (see [[Wikipedia:Linter]] for more details). See {{slink|Wikipedia:HTML5#Obsolete elements and attributes}} for more details on obsolete HTML parts and their replacements.
 
=== big ===
{{dc|{{tag|big}} (obsolete)}} was used to render text in a "large" font.
 
Templates: {{tlx|big}} uses CSS.
 
=== center ===
{{for|centering tables|Help:Table#Centering tables}}
{{dc|{{tag|center}} (obsolete)}} iswas used to center text elements.
 
Templates: {{tlx|center}} uses CSS.
 
=== font ===
{{dc|{{tag|font}} (obsolete)}} iswas used to set the font size, font face and color of text.
 
Templates: {{tlx|font}} uses CSS.
 
=== rb ===
{{dc|{{tag|rb}} (obsolete)}} Usedwas used to mark base text in a ruby annotation.
 
For replacements, see: [[Help:HTML in wikitext#rp, rt, rtc, ruby]]
 
=== strike ===
{{dc|{{tag|strike}} (obsolete)}} formatsformatted strike-through characters; use {{tag|s}} or {{tag|odel}} instead, depending on the context.
 
=== tt ===
{{dc|{{tag|tt}} (obsolete)}} formatsformatted text in a fixed-width font. Use {{tag|code|o}}, {{tag|kbd|o}}, {{tag|var|o}}, or {{tag|samp|o}} instead, depending on the context.
 
Templates: {{tlx|mono}} uses CSS.
Line 766 ⟶ 815:
=== a ===
{{details|Help:Wiki markup#Links and URLs}}
{{tag|a|o}} is used to create links. Use the <code><nowiki>[[ ]]</nowiki></code> wikimarkup for internal/intrawiki links and [[Help:Interwiki linking|interwiki links]], and <code><nowiki>[ ]</nowiki></code> for external links.
 
=== input ===
Line 773 ⟶ 822:
 
== HTML Tidy ==
{{historical |type=section}}
[[HTML Tidy]] is an outdated HTML4 library that is [[:mw:Parsing/Replacing Tidy|slated for removal]]. Tidy parses the MediaWiki output and cleans it up to increase the likelihood that valid HTML4 is rendered. For example, with Tidy enabled, {{tag|br|o}}, {{tag|br|c}}, {{tag|br/|o}}, {{tag|br.|o}} all rendered as {{tag|br|s}}. Tidy is not enabled for [[Help:MediaWiki namespace|MediaWiki interface pages]]. Tidy was never perfect and has been known to introduce errors.
[[HTML Tidy]] is an outdated HTML4 library{{vague|upstream is now HTML5}} that is [[:mw:Parsing/Replacing Tidy|slated for removal]]. Tidy parses the MediaWiki output and cleans it up to increase the likelihood that valid HTML4 is rendered. For example, with Tidy enabled, {{tag|br|o}}, {{tag|br|c}}, {{tag|br/|o}}, {{tag|br.|o}} all rendered as {{tag|br|s}}. Tidy is not enabled for [[Help:MediaWiki namespace|MediaWiki interface pages]]. Tidy was never perfect and has been known to introduce errors.
 
== Exceptions ==
Line 789 ⟶ 839:
 
== See also ==
* [[Help:Wiki markupWikitext]]
* [[Wikipedia:HTML5]]
* [[:Category:Wikipedia XHTML tag-replacing templates]]
 
== References ==
Line 801 ⟶ 852:
== External links ==
* HTML 4.01 specification: [http://www.w3.org/TR/html401/index/elements.html elements] | [http://www.w3.org/TR/html401/index/attributes.html attributes]
* HTML 5.2 specification: [https://www.w3.org/TR/html5/fullindex.html#index-elements elements] | [https://www.w3.org/TR/html5/fullindex.html#attributes-table attributes]
 
{{Wikipedia directories}}
{{Help navigation}}
{{Wikipedia technicaleditor help|collapsednavigation}}
 
[[Category:Wikipedia editor help]]