View source for Help:HTML in wikitext

{{shortcut|H:HTML|WP:HTML}}
{{Wikipedia how to}}
{{Wiki markup}}
{{HTML}}

The MediaWiki software, which drives the Lexicon, allows the use of a subset of {{wplink|HTML5}} {{wplink|HTML element|element}}s, or tags and their {{wplink|HTML attribute|attribute}}s, for presentation formatting. But most HTML can be included by using equivalent [[Help:Wiki markup|wiki markup]] or [[Help:Template|templates]]; these are ''preferred'' within articles, as they are simpler for most editors, and less intrusive in the editing window. For help with Cascading Style Sheet use within Wikipedia see [[Help:Cascading Style Sheets]].

Some tags look like HTML, but are actually MediaWiki [[Help:HTML in wikitext#Parser and extension tags|parser and extension tags]], and so are really wiki markup..
{{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
* [http://www.w3schools.com/html/html5_intro.asp HTML5 Introduction] at w3schools.com

==Attributes==
HTML attributes provide additional information about an element and are always specified in the start tag. They are formatted as a name/value pair like <code>name="value"</code>.

Global attributes apply to all tags. Attributes not listed here are not allowed by MediaWiki:
* <code>class</code>: one or more classifications to which the element belongs. See [[Absit Omen Lexicon:Catalogue of CSS classes]].
* <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>style</code>: applies CSS styling to the contents of the element.
* <code>title</code>: advisory information associated with the element.

HTML5 microdata attributes apply to all tags:
* Any attribute beginning with <code>data-</code>
* <code>itemid</code>
* <code>itemprop</code>
* <code>itemref</code>
* <code>itemscope</code>
* <code>itemtype</code>

Other tags such as {{tag|table|o}} support specific attributes – these are listed in the appropriate section.

{{markup
|<nowiki>This is <span style="color:red">red</span> text.</nowiki>
|2=This is <span style="color:red">red</span> text.
}}

The MediaWiki sanitizer.php does some cleanup on attributes. A best practice is to use the proper syntax.
* Discards attributes not on a whitelist for the given element.
* Turns broken or invalid entities into plaintext.
* Double-quotes all attribute values.
* Attributes without values are given the name as value.
* Double attributes are discarded.
* Unsafe style attributes are discarded.
* Prepends space if there are attributes.

==Elements==
These HTML elements are supported by the MediaWiki software. This section gives a brief overview of the HTML element, an example, relevant wikimarkup and templates.

===Basic===

====h1, h2, h3, h4, h5, h6====
{{see|Help:Section}}
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 styled through CSS and added to the page's [[Help:table of contents|table of contents]].

{{markup
|<nowiki><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6></nowiki>
|{{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 />
Wiki headers use the following default CSS:
<section begin=HTML_section />
{| class="wikitable"
|-
! Wikimarkup !! [[HTML]] !! Style
|-
| {{nowrap|1=<code>= Heading =</code>}} || {{tag|h1|o}} || <source lang="css">color: #45C3B8; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.8em; font-family: Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;</source>
|-
| {{nowrap|1=<code>== Heading ==</code>}} || {{tag|h2|o}} || <source lang="css">color: #45C3B8; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.5em; font-family: Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;</source>
|-
| {{nowrap|1=<code>=== Heading ===</code>}} || {{tag|h3|o}} || <source lang="css">color: #45C3B8; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.17em; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;</source>
|-
| {{nowrap|1=<code>==== Heading ====</code>}} || {{tag|h4|o}} || <source lang="css">color: #45C3B8; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;</source>
|-
| {{nowrap|1=<code>===== Heading =====</code>}} || {{tag|h5|o}} || <source lang="css">color: #45C3B8; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;</source>
|-
| {{nowrap|1=<code>====== Heading ======</code>}} || {{tag|h6|o}} || <source lang="css">color: #45C3B8; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;</source>
|-
|}
<section end=HTML_section />
Templates: {{tl|fake heading}} for use in documentation

====p====
{{tag|p}} tag places content into a separate paragraph.

{{markup
|<nowiki><p>HyperText Markup Language</p><p>HyperText Markup Language</p></nowiki>
|<p>HyperText Markup Language</p><p>HyperText Markup Language</p>
}}

Wikimarkup: Separate paragraphs by a single blank line.

{{markup
|<nowiki>HyperText Markup Language

HyperText Markup Language</nowiki>
|HyperText Markup Language

HyperText Markup Language
}}

====br====
{{tag|br|o}} or {{tag|br|s}} inserts a line break. Both versions of the break are supported by HTML5. {{tag|br|c}} is invalid.

{{markup
|<nowiki>HyperText<br>Markup Language</nowiki>
|HyperText<br>Markup Language
}}

Templates:
* {{tl|crlf2}} adds a true carriage return and line feed.
* {{tl|clear}} adds a break with styling to clear floating elements.
* {{tl|plainlist}} creates an unbulleted list.

====hr====
{{tag|hr|o}} represents a paragraph-level thematic break and presents as a horizontal rule.

{{markup
|<nowiki><hr></nowiki>
|<hr>
}}

Wikimarkup: use <code>----</code>
{{markup
|<nowiki>----</nowiki>
|{{crlf2}}
----
}}

Templates: {{tl|hr}}

====comment====
{{tag|!--}} formats the enclosed text as a hidden comment.

{{markup
|<nowiki>HyperText<!--Markup Language--></nowiki>
|HyperText<!--Markup Language-->
}}

===Formatting===

====abbr====
{{tag|abbr}} creates a tooltip to define an abbreviation or acronym that is displayed on mouse-over.

{{markup
|<nowiki><abbr title="HyperText Markup Language">HTML</abbr></nowiki>
|2=<abbr title="HyperText Markup Language">HTML</abbr>
}}

Templates: {{tl|abbr}}; supports Unicode display

====b====
{{tag|b}} formats text stylistically offset from other text (bold) without conveying extra importance.

{{markup
|<nowiki><b>HyperText Markup Language</b></nowiki>
|<b>HyperText Markup Language</b>
}}

Wikimarkup: Use <code><nowiki>'''</nowiki></code> to open and close bold text.

{{markup
|<nowiki>'''HyperText Markup Language'''</nowiki>
|'''HyperText Markup Language'''
}}

====blockquote====
{{tag|blockquote}} presents text in an offset block.

{{markup
|<nowiki><blockquote>HyperText Markup Language</blockquote></nowiki>
|<blockquote>HyperText Markup Language</blockquote>
}}

Templates: {{tl|quote}}; supports pre-formatted attribution and source parameters.

====code====
{{tag|code}} formats a section of computer code. Styled with CSS through elements.css as a Courier monospaced slab serif typeface with border.

{{markup
|<nowiki><code>HyperText Markup Language</code></nowiki>
|<code>HyperText Markup Language</code>
}}

Templates: {{tl|code}} uses {{xtag|syntaxhighlight}}.

====del====
{{tag|del}} formats deleted text.

{{markup
|<nowiki><del>HyperText Markup Language</del></nowiki>
|<del>HyperText Markup Language</del>
}}

====dfn====
{{tag|dfn}} is used for indicating a definition.

{{markup
|<nowiki><dfn>Definition</dfn></nowiki>
|<dfn>Definition</dfn>
}}

====em====
{{tag|em}} represents a span of text with emphatic stress.

{{markup
|<nowiki><em>HyperText Markup Language</em></nowiki>
|<em>HyperText Markup Language</em>
}}

====i====
{{tag|i}} 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 italic text.

{{markup
|<nowiki><i>HyperText Markup Language</i></nowiki>
|<i>HyperText Markup Language</i>
}}

Wikimarkup: Use <code><nowiki>''</nowiki></code> to open and close italic text.
{{markup
|<nowiki>''HyperText Markup Language''</nowiki>
|''HyperText Markup Language''
}}

====kbd====
{{tag|kbd}} indicates user input such as keyboard input or voice commands.

{{markup
|<nowiki>Press <kbd>Enter</kbd></nowiki>
|Press <kbd>Enter</kbd>
}}

Templates:
* {{tl|key press}} renders illustrated keys and keystrokes.

====mark====
{{tag|mark}} represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. Marked text is formatted with a yellow background by default.

{{markup
|<nowiki><mark>HyperText Markup Language</mark></nowiki>
|<mark>HyperText Markup Language</mark>
|<nowiki><mark style="background:lightblue">HyperText Markup Language</mark></nowiki>
|4=<mark style="background:lightblue">HyperText Markup Language</mark>
}}

====pre====
{{tag|pre}} element represents a block of preformatted text. In MediaWiki, {{tag|pre}} is actually a parser tag and not HTML, but the function is the same.

{{markup
|<nowiki><pre>HyperText Markup Language</pre></nowiki>
|<pre>HyperText Markup Language</pre>
}}

'''HTML entities'''

{{tag|pre}} parses {{wplink|Character encodings in HTML|HTML entities}}. If you want to escape this, replace <code>&</code> with <code>&amp;amp;</code>.

{{markup
|<nowiki><pre>&amp;amp;</pre></nowiki>
|<pre>&amp;</pre>
|<nowiki><pre>&amp;lt;</pre></nowiki>
|<pre>&lt;</pre>
|<nowiki><pre>&amp;amp;amp;</pre></nowiki>
|<pre>&amp;amp;</pre>
|<nowiki><pre>&amp;amp;lt;</pre></nowiki>
|<pre>&amp;lt;</pre>
}}

====q====
{{tag|q}} is used to mark a short quotation.

{{markup
|<nowiki><q>HyperText Markup Language</q></nowiki>
|<q>HyperText Markup Language</q>
}}


====s====
{{tag|s}} is used to indicate 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
|<nowiki><s>HyperText Markup Language</s></nowiki>
|<s>HyperText Markup Language</s>
}}

====small====
{{tag|small}} format small text.

{{markup
|<nowiki><small>HyperText Markup Language</small></nowiki>
|<small>HyperText Markup Language</small>
}}

Templates:
* {{tl|small}} uses {{tag|small|o|params=style="font-size:85%;"}}. {{tl|small}} is recommended over {{tag|small|o}} since not all browsers render small text the same.

====strong====
{{tag|strong}} formats a span of text with strong importance.

{{markup
|<nowiki><strong>HyperText Markup Language</strong></nowiki>
|<strong>HyperText Markup Language</strong>
}}

====sub====
{{tag|sub}} formats a span of text as a subscript.

{{markup
|<nowiki>HyperText <sub>Markup Language</sub></nowiki>
|HyperText <sub>Markup Language</sub>
}}

====sup====
{{tag|sup}} formats a span of text as a superscript.

{{markup
|<nowiki>HyperText <sup>Markup Language</sup></nowiki>
|HyperText <sup>Markup Language</sup>
}}

====time====
{{tag|time}} defines either a time (24 hour clock), or a date in the Gregorian calendar, optionally with a time and a time-zone offset.

{{markup
|<nowiki><time>10:00</time></nowiki>
|<time>10:00</time>
}}

Attributes: <code>datetime</code>

Support: Not supported by Internet Explorer 8 and below.

====u====
{{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.

{{markup
|<nowiki><u>HyperText Markup Language</u></nowiki>
|<u>HyperText Markup Language</u>
}}

===Lists===
{{see|Help:List}}

Do not leave blank lines between items in a list unless there is a reason to do so, since this causes the MediaWiki software to interpret each item as beginning a new list.

====dl, dt, dd====
{{tag|dl}}, {{tag|dt}} and {{tag|dd}} are used to create a description list (formerly definition list) with terms and descriptions. Terms are displayed in bold and descriptions are indented. Each term <em>must</em> include one or more descriptions.

{{markup
|<nowiki><dl>
<dt>Term</dt>
<dd>Definition 1</dd>
<dd>Definition 2</dd>
<dd>Definition 3</dd>
<dd>Definition 4</dd>
</dl></nowiki>
|<dl>
<dt>Term</dt>
<dd>Definition 1</dd>
<dd>Definition 2</dd>
<dd>Definition 3</dd>
<dd>Definition 4</dd>
</dl>
}}

Wikimarkup: {{tag|dt|o}} is created using <code>;</code> while automatically enclosed in {{tag|dl}}. {{tag|dd|o}} is created using <code>:</code> for each value. For a single or first value the <code>:</code> can be placed on the same line after <code>;</code> where subsequent values must be placed on separate lines.

{{markup
|<nowiki>; Term
: Definition 1
: Definition 2
: Definition 3
: Definition 4</nowiki>
|<dl><!-- this wikimarkup does not render in this template -->
<dt>Term</dt>
<dd>Definition 1</dd>
<dd>Definition 2</dd>
<dd>Definition 3</dd>
<dd>Definition 4</dd>
</dl>
}}


====ol, ul, li====
{{tag|ol}} represents an ordered list; {{tag|ul}} represents an unordered list; {{tag|li}} represents a list item within either type of list.

{{markup
|<nowiki><ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol></nowiki>
|<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
|<nowiki><ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul></nowiki>
|<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
}}

Wikimarkup: use <code>*</code> for items in an unordered list and <code>#</code> for ordered lists.
{{markup
|1=<nowiki># Item 1
# Item 2
# Item 3
# Item 4</nowiki>
|2=<nowiki />
# Item 1
# Item 2
# Item 3
# Item 4
|3=<nowiki>* Item 1
* Item 2
* Item 3
* Item 4</nowiki>
|4=<nowiki />
* Item 1
* Item 2
* Item 3
* Item 4
}}

Templates: for a variety of specialized uses, see [[:Category:List formatting and function templates]].

===Containers===

====div====
{{tag|div}} is a generic container for flow content that displays as a block element.

{{markup
|<nowiki>HyperText <div>Markup</div> Language</nowiki>
|HyperText <div>Markup</div> Language
}}

====span====
{{tag|span}} is a container for flow content that displays as an inline element.

{{markup
|<nowiki>HyperText <span>Markup</span> Language</nowiki>
|HyperText <span>Markup</span> Language
}}

===Tables===
{{see|Help:Table}}

====table, td, tr====
{{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.

{{markup
|<nowiki><table border=1>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table></nowiki>
|2=<table border=1>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
}}

Attributes:
* {{tag|table|o}}:
* {{tag|td|o}}: <code>colspan</code>, <code>headers</code>, <code>rowspan</code>
*Use <code>style</style> with CSS to achieve the following.
*: Allowed but not recommended: <code>border=""</code> and <code>border="1"</code>
*: Allowed but obsolete: <code>abbr</code>, <code>align</code>, <code>axis</code>, <code>bgcolor</code>, <code>scope</code>, <code>height</code>, <code>nowrap</code>, <code>valign</code>, <code>width</code>,<code>border</code> (with a non-empty value different from "1"), <code>cellpadding</code>, <code>cellspacing</code>, <code>frame</code>, <code>rules</code>, <code>summary</code>

====th====
{{tag|th}} defines a table header; styled as centered and bold.

{{markup
|<nowiki><table border="1">
<tr>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table></nowiki>
|2=<table border="1">
<tr>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
}}

Attributes:
* {{tag|th|o}}: <code>colspan</code>, <code>headers</code>, <code>rowspan</code>, <code>scope</code>
*: Allowed but obsolete: <code>abbr</code>, <code>align</code>, <code>axis</code>, <code>bgcolor</code>, <code>scope</code>, <code>height</code>, <code>nowrap</code>, <code>valign</code>, <code>width</code>

====caption====
{{tag|caption}} adds a caption to a table.

{{markup
|<nowiki><table border=1>
<caption>Caption</caption>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table></nowiki>
|2=<table border=1>
<caption>Caption</caption>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
}}

Attributes:
* {{tag|caption|o}}:
*: Allowed but obsolete: <code>align</code>

====thead, tfoot, tbody====
{{tag|thead|o}}, {{tag|tfoot|o}} and {{tag|tbody|o}} are not supported, but are automatically generated when the page is rendered.

==Obsolete elements==
These elements are now obsolete in HTML5, but still supported by browsers. These tags either have an alternate tag or a template that replaces their function with CSS. See [[:HTML5]] for more details on obsolete HTML parts and their replacements.

===big===
{{dc|{{tag|big}} (obsolete)}} formats text in a larger font size.
<!--
{{markup
|<nowiki><big>HyperText Markup Language</big></nowiki>
|<big>HyperText Markup Language</big>
}}
-->

Templates: {{tl|big}} uses CSS.

===center===
{{for|centering tables|Help:Table#Centering tables}}
{{dc|{{tag|center}} (obsolete)}} is used to center text elements.

Templates: {{tl|center}} uses CSS.

===font===
{{dc|{{tag|font}} (obsolete)}} is used to set the font size, font face and color of text.

===rb===
{{dc|{{tag|rb}} (obsolete)}} Used to mark base text in a ruby annotation

===strike===
{{dc|{{tag|strike}} (obsolete)}} formats strike-through characters; use {{tag|s|o}} instead.

===tt===
{{dc|{{tag|tt}} (obsolete)}} formats text in a fixed-width font. Use {{tag|code|o}}, {{tag|kbd|o}} or {{tag|samp|o}} instead.

==Unsupported elements==

These elements are not supported, but have equivalent wiki markup. Attempting to use any element not whitelisted by  sanitizer.php will result in the markup showing as plain text.

===a===
{{see|Help:Wiki markup#Links and URLs}}
{{tag|a|o}} is used to create links. Use the <code><nowiki>[[ ]]</nowiki></code> wikimarkup for internal links and <code><nowiki>[ ]</nowiki></code> for external links.

===input===
{{see|mw:Extension:InputBox}}
{{tag|input|o}} is used to create forms. The {{xtag|inputbox}} extension tag is used to create a text box with a button.

==Parser and extension tags==
{{#section:Template:Xtag/doc|xtag}}

==See also==
*[[Help:Wiki markup]]

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

{{Help navigation}}
[[Category:Wikipedia editor help]]