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.
Contents
Scope
Implementation of the new HTML5 attributes accepted by MediaWiki software. These include:
- The
data-sort-value
attributes in table cells. This is associated to the replacement of templates like Sort, SortDate, Sortname, Number table sorting, Dts and Dtsx. - Other data attributes.
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"
Positioning can be made using |
valign="top" |
{| class="toptextcells"
Many |
<big>...</big> |
<span style="font-size:larger;">
Depends on the case, often |
<tt>...</tt> |
<code>...</code>
Depending on the desired semantic, Note: |
{| bgcolor="gray"
|
{| style="background-color:gray;"
|
Obsolete since HTML4[5][6] | Replacements |
<center>...</center> |
<div class="center">...</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>
|
<font size="3">...</font> |
<span style="font-size:125%;">...</span>
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>
|
<font face="Courier">...</font> |
<span style="font-family:Courier, monospace;">...</span>
The specification should definitely end with a generic font, usually |
- 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
ands
[6]
- ^ HTML element#Presentation
- ^ http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features
- ^ http://www.w3.org/TR/html5-diff/#obsolete-elements
- ^ SELFHTML – List of items for markup
- ^ http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features
- ^ a b SELFHTML – HTML/deprecated
Participants[edit]
Participating users:
- All the best: Rich Farmbrough, 20:04, 15 October 2015 (UTC).
- ...
Collection of ideas[edit]
- A bot to insert data attributes based on the syntax of the SortKey. ÅñŧóñŜûŝî (Ð)
- Warn the user using Special:AbuseFilter.
- Adapt de:MediaWiki:Gadget-Extra-Editbuttons.js (discussion)
- Adapt de:Benutzer:PerfektesChaos/js/WikiSyntaxTextMod
Obsolete elements and attributes[edit]
big[edit]
<big>
can usually be replaced by {{big}}.
Obsolete | Replacement | Search |
---|---|---|
<big>Content</big> |
{{big|Content}} |
|
If CSS styling already exists, then add font-size: large;
.
Obsolete | Replacement |
---|---|
<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> |
<span style="font-size: x-large;">Content</span> |
|
<big> |
<span style="font-size: 27px;">Content</span> |
|
<big> |
<span style="font-size: 38px;">Content</span> |
|
<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}} |
|
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}} |
|
<center> {{location map}} </center> |
{{location map|float=center}} |
|
<center> {{listen}} </center> |
{{listen|pos=center}} |
|
<center> {{family tree/start}} </center> |
{{family tree/start|align=center}} |
|
<center> {{ahnentafel-compact5}} </center> |
{{ahnentafel-compact5|align=center}} |
|
<center> {{chart/start}} </center> |
{{chart/start|align=center}} |
|
<center> {{wide image}} </center> |
{{wide image}} (centered by default) |
|
{{wide image|image| |
{{wide image|image|align-cap=center|caption}} |
Parser tags
Some parser tags can use CSS styles:
Obsolete | Replacement | Search |
---|---|---|
<center> |
<gallery class="center">...</gallery> |
|
These parser tags will accept class="center" |
|
|
These parser tags do not handle CSS; use {{center}} | ||
These parser tags use other means |
|
|
These parser tags default to center alignment |
|
|
These parser tags do not handle CSS and do not need alignment |
|
Tables
To center a table, use CSS styling:
Obsolete | Replacement | Search |
---|---|---|
<center>
|
{| style="margin: 1em auto;" | (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> |
|
Obsolete | Replacement | Search |
---|---|---|
<font face="Times, serif">Content</font> |
|
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> |
|
Obsolete | Replacement | Search |
---|---|---|
<font size="3" color="red" face="times, serif">Content</font> |
|
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 |
---|---|---|---|
|
|
|
|
bgcolor="#ddd" |
background-color: #ddd; |
background-color: #ddd; |
|
border="2" |
border-width: 2px; |
border-width: 2px; |
|
cellpadding="2" |
padding: 2px; |
|
|
cellspacing="2" |
border-spacing: 2px; |
|
|
cellpadding="0" cellspacing="0" |
padding: 0; |
border-collapse: collapse; |
|
|
|
|
|
width="25%" |
width: 25%; |
width: 25%; |
|
|
See T43917 |
|
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
: Usescope
on the table header. (search articles) (search all)align
on<caption>
. (search articles) (search all)height
: Useheight
orline-height
. (search articles) (search all)
Additionally, these attributes are obsolete on table cells.[2][3]
abbr
: Elaborate content of the cellscope
on table cell:scope
is 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 |
---|---|---|
|
|
align
on<div>
Obsolete | Replacement | Search |
---|---|---|
|
|
|
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}} |
|
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
- Help:HTML in wikitext
- Wikipedia:WikiProject Check_Wikipedia Finds some obsolete HTML tags
- Wikipedia:WikiProject Accessibility
References
- ^ "Table". W3C.
- ^ "Table cell". W3C.
- ^ "Table header cell". W3C.