Wikipedia:HTML5

The development of HTML5 is now so far advanced that it was incorporated into the MediaWiki software and has been the default on Wikimedia wikis since September 2012. This project serves to organize the adaptation of articles and other Wikipedia pages to HTML5.

Scope

Implementation of the new HTML5 attributes accepted by MediaWiki software. These include:

Attributes for text formatting[1]
obsolete in HTML5[2][3] Replacements
{| align="center"
|- align="center"
| align="center" | …
{| class="center"           <!-- corresponds to text-align: center,
                                       and also margin: auto on inner elements -->
{| class="centered"               <!-- corresponds to margin: auto -->
{| style="margin:auto;"
|- style="text-align:center;"
| class="center"

Attention, none of the data is equivalent. The obsolete code centered much more things, however the CSS values apply either to inline or block elements only. In some cases, substantial changes may be necessary to replicate with CSS the appearance which was obtained with the old code.

align="right" {| class="float-right"

style="text-align:right;"

Positioning can be made using position: or float:, display: inline-block;, and alignments using text-align: as a replacement.

valign="top" {| class="toptextcells"

style="vertical-align:top;"

Many valign and vertical-align can be replaced by a single toptextcells in the top of the table.

<big>...</big> <span style="font-size:larger;">

! style="font-size:125%;" |

Depends on the case, often <div>...</div> should be used instead of {{tag|span, often an existing style can be reused. Note that larger generates a slightly smaller font than <big> generated.

<tt>...</tt> <code>...</code>

<kbd>...</kbd>

<samp>...</samp>

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

Depending on the desired semantic, <code> is for fragments of computer code, <kbd> for user input and <samp> for outputs, and even for variables.[4]

Note: font-family:monospace,monospace is correct, and prevents an unexpectedly small font in Gecko- and WebKit-based browsers, see Wikipedia:Typography#The monospace 'bug'.

{| bgcolor="gray"

| bgcolor="gray"

{| style="background-color:gray;"

| style="background-color:gray;"

Obsolete since HTML4[5][6] Replacements
<center>...</center> <div class="center">...</div>

<div style="text-align:center;">...</div>

<div class="centered">...</div>

<div style="margin:auto;">...</div>

Attention, none of the data is equivalent. The obsolete code centered much more things, however the CSS values apply either to inline or block elements only. In some cases, substantial changes may be necessary to replicate with CSS the appearance which was obtained with the old code.

<strike>...</strike> <s>...</s>

<del>...</del>

<span style="text-decoration:line-through;">...</span>

<font size="3">...</font> <span style="font-size:125%;">...</span>

<small>...</small>

Here a percentage makes sense. A simple conversion is not possible as the result depends on the surrounding code and partly also on the browser used. One should simply decide which value is appropriate, often rounded to 10% percentage for the particular application.

<font color="red">...</font> <span style="color:red;">...</span>

<span class="error">...</span>

<font face="Courier">...</font> <span style="font-family:Courier, monospace;">...</span>

<span style="font:125% Courier, monospace;">...</span>

The specification should definitely end with a generic font, usually serif, sans-serif, ormonospace, and rarely cursive or fantasy. In general, these inflexible specifications of a font should be removed entirely or replaced by semantic elements, such as <code> (see below).

  • The following attributes relevant for Wikipedia tables are also considered obsolete in HTML5: bgcolor, border, bordercolor, cellpadding, cellspacing.
  • The following elements were formerly obsolete in HTML4 and "rehabilitated" in HTML5: u and s[6]
  1. ^ HTML element#Presentation
  2. ^ http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features
  3. ^ http://www.w3.org/TR/html5-diff/#obsolete-elements
  4. ^ SELFHTML – List of items for markup
  5. ^ http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features
  6. ^ a b SELFHTML – HTML/deprecated

Participants[edit]

Participating users:

Collection of ideas[edit]

Obsolete elements and attributes[edit]

big[edit]

<big> can usually be replaced by {{big}}.

Obsolete Replacement Search
<big>Content</big> {{big|Content}}
  • (search articles)
  • (search templates)
  • (search all)

If CSS styling already exists, then add font-size: large;.

Obsolete Replacement
<big><span style="text-decoration: overline">Content</span></big> <span style="text-decoration: overline; font-size: large;">Content</span>

Where <big> is nested to create a larger font use the font-size property. Use of large fonts in articles and templates is typically inappropriate and you should consider if it is really needed. See MOS:FONTSIZE.

Obsolete Replacement Search
<big><big>content</big></big> <span style="font-size: x-large;">Content</span>
  • (search articles)
  • (search templates)
  • (search all)
<big><big><big>content</big></big></big> <span style="font-size: 27px;">Content</span>
<big><big><big><big>content</big></big></big></big> <span style="font-size: 38px;">Content</span>
<big><big><big><big><big>content</big></big></big></big></big> <span style="font-size: 56px;">Content</span>

center

Text

For most text, <center>...</center> can be replaced with {{center}}.

Obsolete Replacement Search
<center>Content</center> {{center|Content}}
  • (search articles)
  • (search templates)
  • (search all)

Templates

To center templates, check the template documentation as most have a parameter for general styling or specifically for alignment. If the template does not have an alignment parameter, consider adding one.

Obsolete Replacement Search
<center>{{gallery}}</center> {{gallery|align=center}}
  • (search articles)
  • (search all)
<center>{{location map}}</center> {{location map|float=center}}
  • (search articles)
  • (search all)
<center>{{listen}}</center> {{listen|pos=center}}
  • (search articles)
  • (search all)
<center>{{family tree/start}}</center> {{family tree/start|align=center}}
  • (search articles)
  • (search all)
<center>{{ahnentafel-compact5}}</center> {{ahnentafel-compact5|align=center}}
  • (search articles)
  • (search all)
<center>{{chart/start}}</center> {{chart/start|align=center}}
  • (search articles)
  • (search all)
<center>{{wide image}}</center> {{wide image}} (centered by default)
{{wide image|image|<center>caption</center>}} {{wide image|image|align-cap=center|caption}}

Parser tags

Some parser tags can use CSS styles:

Obsolete Replacement Search
<center><gallery>...</gallery></center> <gallery class="center">...</gallery>
  • (search articles)
  • (search all)
These parser tags will accept class="center"
  • (search articles) (search all)
  • (search articles) (search all)
  • (search articles) (search all)
  •  
  • (search articles) (search all)
  • (search articles) (search all)
These parser tags do not handle CSS; use {{center}}
These parser tags use other means
  • <imagemap> uses a center parameter; see the documentation
  • (search articles) (search all)
These parser tags default to center alignment
  • (search articles) (search all)
These parser tags do not handle CSS and do not need alignment

Tables

To center a table, use CSS styling:

Obsolete Replacement Search
<center>
{|

|}
</center>


<div align="center">
{|

|}
</div>

{| style="margin: 1em auto;" (search articles)


(search articles)

And likewise to center a cell:

Obsolete Replacement Search
|<center>Content</center>| |style="text-align: center;" | Content (search articles)

Header cells are centered by default.

font

The <font> element has three attributes with equivalent CSS properties:

Font attribute CSS
color color
face font-family
size font-size
Obsolete Replacement Search
<font color="red">Content</font>
  • <span style="color: red;">Content</span>
  • or
  • {{font color|red|Content}}
Obsolete Replacement Search
<font face="Times, serif">Content</font>
  • <span style="font-family: Times, serif;">Content</span>
  • or
  • {{font|text=Content|font=Times, serif}}

Note that in HTML the value for the size attribute does not correspond to any CSS value; it only accepts values 1 through 7.

Obsolete Replacement Search
<font size="3">Content</font>
  • <span style="font-size: medium;">Content</span>
  • or
  • {{font|text=Content|size=medium}}
Obsolete Replacement Search
<font size="3" color="red" face="times, serif">Content</font>
  • <span style="font-size: medium; color: red; font-family: Times, serif;">Content</span>
  • or
  • {{font|text=Content|size=medium|font=Times, serif|color=red}}

strike

<strike>...</strike> formats strike-through characters. (search articles) (search all)

  • Use <s>...</s> for text that is no longer correct, accurate or relevant.
  • Use <del>...</del> for text that has been deleted.

tt

<tt>...</tt> formats text in a fixed-width font. (search articles) (search all)

  • Use <code> for computer code.
  • Use <kbd> for keyboard input.
  • Use <samp> for sample output from a computer program.

Table attributes

Obsolete table attributes.[1]

Obsolete attribute CSS style on cell CSS style on table Search
  • align="left"
  • align="right"
  • align="center"
  • text-align: left
  • text-align: right;
  • text-align: center;
  • margin-left: auto
  • margin-right: auto;
  • margin: 1em auto;
  • (search articles)
  • (search all)
bgcolor="#ddd" background-color: #ddd; background-color: #ddd;
  • (search articles)
  • (search all)
border="2" border-width: 2px; border-width: 2px;
  • (search articles)
  • (search all)
cellpadding="2" padding: 2px;
  • (search articles)
  • (search all)
cellspacing="2" border-spacing: 2px;
  • (search articles)
  • (search all)
cellpadding="0" cellspacing="0" padding: 0; border-collapse: collapse;
  • valign="top"
  • valign="middle"
  • valign="bottom"
  • vertical-align: top;
  • vertical-align: middle;
  • vertical-align: bottom;
  • vertical-align: top;
  • vertical-align: middle;
  • vertical-align: bottom;
  • (search articles)
  • (search all)
width="25%" width: 25%; width: 25%;
  • (search articles)
  • (search all)
  • {| summary="foo"
  • <table summary="foo">...</table>
See T43917
  • (search articles)
  • (search all)

Allowed, obsolete but rarely used table attributes:

  • frame: Use CSS for borders. (search articles) (search all)
  • rules: Use CSS for borders. (search articles) (search all)
  • axis: Use scopeon the table header. (search articles) (search all)
  • align on <caption>. (search articles) (search all)
  • height: Use height or line-height. (search articles) (search all)

Additionally, these attributes are obsolete on table cells.[2][3]

  • abbr: Elaborate content of the cell
  • scope on table cell: scopeis valid only on table header

There are instances where a table is used to align a template. In many cases the template has an alignment parameter; if not, one should be added.

Markup Valid
{|align=right
|{{navbar|Foo}}
|} 
{{navbar|Foo|style=float:right}}

Other obsolete attributes

  • clear on <br />
Obsolete Replacement Search
  • <br clear=all />
  • <br clear=left />
  • <br clear=right />
  • <div style="clear: both;"></div> or {{clear}}
  • <div style="clear: left;"></div> or {{clear|left}}
  • <div style="clear: right;"></div> or {{clear|right}}
  • (search articles)
  • (search all)
  • align on <div>
Obsolete Replacement Search
  • <div align=center>...</div>
  • <div align=left>...</div>
  • <div align=right>...</div>
  • <div align=justify>...</div>
  • <div style="text-align:center">...</div>
  • <div style="text-align:left">...</div>
  • <div style="text-align:right">...</div>
  • <div style="text-align:justify">...</div>
  • (search articles)
  • (search all)

Obsolete, allowed but rarely used attributes:

  • width on <hr>...</hr> (search articles) (search all)
  • align on <h1>...</h1> through <h6>...</h6>
  • type on <li>...</li> (search articles) (search all)
  • align on <p>...</p> (search articles) (search all)
  • width on <pre>...</pre> [ns0 (search articles)] (search all)
  • type on <ul>...</ul> (search articles) (search all)

Misused elements

cite

Under the previous XHTML 4.01 usage <cite>...</cite> defined an entire citation. With HTML5, <cite> now defines only the title of a work. There are still many uses of <cite> used to define an entire citation and often to apply an anchor id. Note that uses of <cite> exist without the closing </cite> or incorrectly closed by </span>.

Where used with a Citation Style 1 or Citation Style 2 template, the <cite> should be removed:

Obsolete Replacement Search
<cite>{{cite book |author=Sappol, Michael |title=A traffic of dead bodies: anatomy and embodied social identity in nineteenth-century America |publisher=Princeton University Press |location=Princeton, N.J. |year=2002 |isbn=0-691-05925-X |url=http://books.google.com/books/princeton?id=-9cKRzEx6ywC&printsec=frontcover&dq=A+Traffic+of+Dead+Bodies}}</cite> {{cite book |author=Sappol, Michael |title=A traffic of dead bodies: anatomy and embodied social identity in nineteenth-century America |publisher=Princeton University Press |location=Princeton, N.J. |year=2002 |isbn=0-691-05925-X |url=http://books.google.com/books/princeton?id=-9cKRzEx6ywC&printsec=frontcover&dq=A+Traffic+of+Dead+Bodies}}
  • (search articles)
  • (search all)

Where an anchor id is used with a citation template, the id should be moved to the |ref= parameter.

Obsolete Replacement Search
*<cite id=Alberti>{{cite book |last=Arnold |first=David L. G. |editor=John Alberti (ed.) |year=2003 |title=[[Leaving Springfield|Leaving Springfield: The Simpsons and the Possibility of Oppositional Culture]] |location=Detroit |publisher=[[Wayne State University Press]] |chapter=Use a Pen, Sideshow Bob: The Simpsons and the Threat of High Culture |isbn=0-8143-2849-0}}</cite> * {{cite book |last=Arnold |first=David L. G. |editor=John Alberti (ed.) |year=2003 |title=[[Leaving Springfield|Leaving Springfield: The Simpsons and the Possibility of Oppositional Culture]] |location=Detroit |publisher=[[Wayne State University Press]] |chapter=Use a Pen, Sideshow Bob: The Simpsons and the Threat of High Culture |isbn=0-8143-2849-0 |ref=Alberti}}

In this instance, the anchor can be formed by using |ref=harv, but the |anchor= parameters must be updated to |last= and |first=.

Obsolete Replacement Search
*<cite id="CITEREFAsphaugRyanZuber2003">{{cite journal| last = Asphaug| first = Erik|author2= Ryan, Eileen V.|author3= Zuber, Maria T.| title = Asteroid Interiors| journal = Asteroids III| pages = 463–484| publisher = University of Arizona | location = Tucson| year = 2003| url = http://www-geodyn.mit.edu/asphaug.interiors.pdf| accessdate = 2009-01-04|bibcode=2002aste.conf..463A}}</cite> *{{cite journal |last=Asphaug |first=Erik |last2= Ryan |first2=Eileen V. |last3=Zuber |first3=Maria T. |title= Asteroid Interiors |journal=Asteroids III |pages=463–484 |publisher=University of Arizona |location=Tucson |year=2003 |url=http://www-geodyn.mit.edu/asphaug.interiors.pdf |accessdate=2009-01-04 |bibcode=2002aste.conf..463A |ref=harv}}

See also

References

  1. ^ "Table". W3C. 
  2. ^ "Table cell". W3C. 
  3. ^ "Table header cell". W3C.