Wikipedia:HTML 5

From Wikipedia, the free encyclopedia
  (Redirected from Wikipedia:HTML5)
Jump to navigation Jump to search

The development of HTML 5 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 help editors organize the adaptation of articles and other Wikipedia pages to HTML 5. The fifty or so prepared searches reveal the obsolete tags. The edits range from simple to complex, and the numbers from a few fixes anyone can enjoy updating manually, up to many thousands for a run with a Wikipedia:AutoWikiBrowser bot script.

Scope[edit]

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

Attributes for text formatting[1]
obsolete in HTML 5[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" style="vertical-align:top;"

valign can be replaced by CSS vertical-align: on a cell or row. Note that it cannot be applied to a whole table.

<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 <var> 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[2][5] 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 HTML 5: bgcolor, border, bordercolor, cellpadding, cellspacing.
  • The following elements were formerly obsolete in HTML4 and "rehabilitated" in HTML 5: u and s[5]

Participants[edit]

Participating users:

Collection of ideas[edit]

Obsolete elements and attributes[edit]

center[edit]

Text[edit]

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

Obsolete Replacement Search
<center>Content</center> {{center|Content}}

Templates[edit]

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.

Searches for templates do not find redirects, but you can alter the query to complete the search for that template's obsolete usage: for each template list its redirects with the "What Links Here" tool, and replace the two occurances of its template name. Do this for each of its redirects in turn.

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}}</center> {{ahnentafel|align=center}}
<center>{{chart/start}}</center> {{chart/start|align=center}}
<center>{{wide image}}</center> {{wide image}} (centered by default)
{{wide image|image|<center>caption</center>}} {{wide image|image|align-cap=center|caption}}

Parser tags[edit]

Some parser tags can use CSS styles:

Obsolete Replacement Search
<center><gallery>...</gallery></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
  • <imagemap> uses a center parameter; see the documentation
These parser tags default to center alignment
These parser tags do not handle CSS and do not need alignment

Tables[edit]

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.

Files[edit]

Obsolete Replacement Search
<center>[[File:Image.jpg]]</center> [[File:Image.jpg|center]]

font[edit]

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}} (search articles)(search all)
Obsolete Replacement Search
<font face="Times, serif">Content</font> <span style="font-family: Times, serif;">Content</span> OR {{font​|text=Content​|font=Times, serif}} (search articles)(search all)

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

Obsolete Replacement Search
<font size="3">Content</font> <span style="font-size: medium;">Content</span> OR {{font|text=Content|size=medium}} (search articles)(search all)

The above searches will find all permutations of the three color attributes. For example:

Obsolete Replacement
<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[edit]

<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 or marked for deletion.

tt[edit]

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

  • Use {{code}} or <code> for source code.
  • Use {{kbd}} or <kbd> for computer input (it need not represent actual keystrokes)
  • Use {{samp}} or <samp> for sample output from a program or system (can include directory listings and other matter)
  • Use {{var}} or <var> for variable names (in code, mathematics, or even syntactic variables in regular writing).
  • Use {{mono}} for monospace-styled text without the semantics of any of the above.

Table attributes[edit]

Obsolete table attributes.[7]

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;
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;
  • valign="top"
  • valign="middle"
  • valign="bottom"
  • vertical-align: top;
  • vertical-align: middle;
  • vertical-align: bottom;
width="25%" width: 25%; width: 25%;
  • {| summary="foo"
  • <table summary="foo">...</table>
See T43917

Allowed, obsolete but rarely used table attributes:

Additionally, these attributes are obsolete on table cells.[8][9]

  • 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[edit]

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

Obsolete, allowed but rarely used attributes:

Misused elements[edit]

cite[edit]

Under the previous HTML 4.01 and XHTML 1.1 usage <cite>...</cite> defined an entire citation. With HTML 5, a long-running dispute has erupted:

  • The W3C specs preserve the broad usage, though now require that the material contain at least one of: the title of the cited work, its author, a URL to the work, or an abbreviated reference (short citation, as used in Harvard referencing). This is the spec followed by most Web developers.
  • The WHATWG specs have limited the element to the title of the work only. This is the spec followed by most browser developers. The only practical implications of WHATWG's break from W3C on this element is that the default browser treatment of the element (to italicize its content) would be applied to more material that the title. However, Wikipedia's site-wide CSS turns off this stylization anyway (per MOS:TITLES, only titles of particular kinds of works should be italicized).

W3C briefly switched to WHATWG's definition in the draft stages of HTML 5, but switched back to their own definition in 2012 after protest from the Web developer community.

Following common practice (e.g. the use of <cite> around links to author IDs in blog and forum software, and many other well-deployed uses for the element for more than work titles), Wikipedia is following the W3C HTML 5.2 Recommendation, which has superseded HTML 4.01, XHTML 1.1, and all other previous W3C [X]HTML specs. Our citation template system wraps the entire citation in the <cite>...</cite> element.

Note that uses of <cite> exist without the closing </cite>, or incorrectly closed by </span>; these need to be repaired.

Where used with a Citation Style 1 or Citation Style 2 template, a manually-added <cite> should be removed as redundant markup:

Obsolete Replacement Search
<cite>{{cite book |last=Sappol |first=Michael |title=A traffic of dead bodies: anatomy and embodied social identity in nineteenth-century America |publisher=Princeton University Press |location=Princeton, New Jersey |date=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 |last=Sappol |first=Michael |title=A traffic of dead bodies: anatomy and embodied social identity in nineteenth-century America |publisher=Princeton University Press |location=Princeton, New Jersey |date=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 manually used with a citation template, the id should be moved to the |ref= parameter. Additionally when removing cite tags with id=CITEREF please understand that this was a manual reference, and must be updated by placing |ref=harv, then making sure that the all the numbered |last= parameters such as |last1= are available, which in turn may require changing any (deprecated) numbered |authorx= parameter used into a |lastx= parameter and a matching |firstx= one. See the example with and without the id=CITEREF... and |author3=, below.

Obsolete Replacement Search
<cite id=Alberti>{{cite book |last=Arnold |first=David L. G. ||editor-first=John |editor-last=Alberti |date=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-first=John |editor-last=Alberti |date=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}}
Obsolete Replacement Search
<cite id="CITEREFAsphaugRyanZuber2003">{{cite journal |last=Asphaug |first=Erik |last2=Ryan |first2=Eileen V. |author3=Zuber, Maria T. |title=Asteroid Interiors |journal=Asteroids III |pages=463–484 |publisher=University of Arizona |location=Tucson |date=2003 |url= http://www-geodyn.mit.edu/asphaug.interiors.pdf |access-date=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 |date=2003 |url= http://www-geodyn.mit.edu/asphaug.interiors.pdf |access-date=2009-01-04 |bibcode=2002aste.conf..463A |ref=harv}} (search articles)

See also[edit]

References[edit]

  1. ^ HTML element#Presentation
  2. ^ a b "15.2 Non-conforming features". HTML Living Standard.
  3. ^ http://www.w3.org/TR/html5-diff/#obsolete-elements
  4. ^ SELFHTML – List of items for markup
  5. ^ a b SELFHTML – HTML/deprecated
  6. ^ W3C (2018-03-10). "CSS Fonts Module Level 3". Retrieved 2018-06-23.
  7. ^ "Table". W3C.
  8. ^ "Table cell". W3C.
  9. ^ "Table header cell". W3C.