Wikipedia:Uppdatera till HTML5

HTML5 är den internationella HTML-standarden. När den officiellt fastställdes och rekommenderades av organisationen World Wide Web Consortium (W3C) 2014^[1] hade den i praktiken redan varit i användning i några år. I december 2017 kom HTML 5.2.^[2]

Denna sida är tänkt för information och tips i anpassningen till denna standard, då vissa taggar och attribut som fortfarande används på våra Wikipediasidor förlitar sig på tidigare HTML-versioner. De fungerar så länge de har stöd i webbläsares olika programvaror, men för att en sidas innehåll ska fortsätta presenteras för läsare såsom avsett, behöver man undvika dessa äldre koder och använda nyare lösningar.

Till stor del rör dessa förändringar taggar och attribut för layout, som i större grad nu hänvisas till style-attributet med CSS-lösningar. Observera att de HTML5-anpassade lösningarna med CSS inte sällan är mer specifika, eller smalare, i sina användningsområden än de ersatta HTML4-attributen och att de rekommenderade ersättningarna för en gammal kod kan skifta beroende på situation.

Översikt per område

Textformatering

Taggar och attribut som bör ersättas: ^[3]^[4]^[5]
Föråldrad kod	Exempel på ersättningar
`\|- align="center"` `\| align="center" \| …`	`\|- style="text-align: center;"` `\| style="text-align: center;" \| …`
`align="right"`	`style="text-align: right;"`
`valign="top"`	`style="vertical-align: top;"` `valign` kan ersättas av CSS `vertical-align:` för en cell eller tabellrad. Observera att detta inte gäller för en hel tabell.
`<big>...</big>`	`<span style="font-size: larger;">...</span>` `<span style="font-size: 120%;">...</span>` `{{big\|...}}`
`<center>...</center>`	`<span style="text-align: center;">...</span>` `{{center\|...}}`
`<font size="3">...</font>`	`<span style="font-size: 120%;">...</span>` `{{big\|...}}` Här är procenttal att föredra framför fast textstorlek.
`<font color="red">...</font>`	`<span style="color: red;">...</span>` `{{color\|red\|...}}`
`<font face="Times">...</font>`	`<span style="font-family: Times, serif;">...</span>` Kombinerad bestämning av textstorlek och font: `<span style="font: 125% Times, serif;">...</span>` Specifikation av font bör inkludera en generisk fonttyp i slutet, vanligen `serif`, `sans-serif` eller `monospace`, och mer sällan `cursive` eller `fantasy`.
`<strike>...</strike>`	`<s>...</s>` `<del>...</del>` `<span style="text-decoration: line-through;">...</span>`
`<tt>...</tt>`	`<kbd>...</kbd>` `<code>...</code>` `<samp>...</samp>` `<span style="font-family: monospace, monospace;">` Beroende på situation, används `<kbd>` för att markera användarinput, `<code>` för delar av datorkod, `<samp>` för output och `<var>` för variabler.^[6] Anm: `font-family: monospace,monospace` är korrekt skrivet, det hindrar att en bugg ger oönskat liten textstorlek i Gecko- och WebKit-baserade webbläsare, såsom Firefox och Safari.

Placering kan göras med position: , float: , display: inline-block;, och alignment med text-align: som ersättare.

Även dessa är utan stöd i HTML5: bgcolor, border, bordercolor, cellpadding, cellspacing.
Dessa är tillbaka efter att ha utelämnats i föregångaren HTML4: <s>, <u>.

Tabellformatering

Attribut som bör ersättas:
Föråldrad kod	Exempel på ersättningar med CSS (style=)
Föråldrad kod	för celler / cellinnehåll	för hela tabeller
`align="center"` `<center>...</center>`	`\|style="text-align: center;"\|...` `\| {{center\|...}}` `\|- style="text-align: center;"`	`{\| style="margin: 1em auto;"`
`align="center"` `<center>...</center>`	`{\|style="text-align: center;"` ger horisontell textcentrering i tabellens alla celler.
`align="right"`	`style="text-align: right;"`	`{\| class="floatright"` `{\| style="float: right;"` `{\| style="margin-left: auto;"`
`bgcolor="#ddd"`	`style="background-color: #ddd;"`	`style="background-color: #ddd;"`
`border="2"`	`style="border: 2px solid;"` Ger runt den aktuella tabellcellen en 2px heldragen linje i defaultfärgen.	`style="border: 2px solid;"` Ger en 2px heldragen linje runt tabellens ytterkant.
`border="2"`	Som ett undantag, kan man fortsätta använda `{\| border= "1"` , som skapar 1px-linjer i default-färgen runt varje cell i tabellen, men observera att det endast gäller för värdet "1" och endast vid tabellstarten.^[7] Resultatet kan dock se ojämnt ut i besökarens webbläsare.
`cellpadding="2"`	`style="padding: 2px;"` Ger 2px avstånd mellan den aktuella tabellcellens innehåll och kant.
`cellspacing="2"`		`style="border-spacing: 2px;"` Till skillnad från cellspacing, kan detta ta två värden, varvid det första anger cellavstånd i sidled och det andra i höjdled.
`cellspacing="0"`		`style="border-collapse: collapse;"` `style="border-spacing: 0px;"` Vilket alternativ som är bäst beror på situation. Det övre lägger ihop kantlinjerna, på varandra; det nedre lägger kantlinjerna kloss intill men bredvid varandra. Om båda anges, prioriteras "border-collapse: collapse" över "border-spacing" oavsett värde.
`valign="top"` `valign="middle"` `valign="bottom"`	`style="vertical-align: top;"` `style="vertical-align: middle;"` `style="vertical-align: bottom;"`
`width="25%"`	`style="width: 25%;"`	`style="width: 25%;"`
`{\|summary="foo"`		Se: Spårad i Phabricator (?) Task T43917 Open

I vissa fall tillåtna men föråldrade attribut:

frame : Använd CSS för kanter. frame="box" kan ersättas med style="border: 1px solid;"
rules : Använd CSS för kanter.
axis : Använd scope för tabellrubriker.
align i <caption>.
height : Använd style=height: eller style=line-height: .

Dessa attribut är ogiltiga för tabellceller:

abbr
scope för de flesta celler: scope kan dock användas för rubrikceller.

ogiltig	giltig
{\| align=right \| {{navbar\|Foo}} \|}	{{navbar\|Foo \| style=float: right}}

Ibland används en tabell för att placera en mall, men i många fall har mallen en parameter för detta; om inte, bör en sådan läggas till.

center

Föråldrad kod: <center>...</center>

Text

För text kan <center>...</center> i de flesta fall ersättas av mallen {{center}}.

Föråldrad kod	Ersättning
`<center>...</center>`	`{{center\|...}}`

Mallar

Vid centrering av en mall, kontrollera först om den har en egen parameter som kan användas, eller överväg att lägga till en sådan.

Föråldrad kod	Exempel på ersättning
`<center>{{gallery}}</center>`	`{{gallery\|align=center}}`

Parsertaggar

I vissa parsertaggar kan man använda CSS:

Föråldrad kod	Ersättning
`<center><gallery>...</gallery></center>`	`<gallery class="center">...</gallery>`

Lämplig centreringsmetod	Parsertaggar
Dessa parsertaggar klarar `class="center"`	`<categorytree>` `<gallery>` `<poem>` (centrerar alla rader) `<pre>` `<syntaxhighlight>` `<source>`
Dessa parsertaggar klarar inte CSS; använd `{{center}}`	`<hiero>` `<math>` `<score>` `<timeline>`
Parsertagg som använder annat sätt	`<imagemap>` har en `center`-parameter
Parsertagg som är centrerad per default	`<inputbox>`
Dessa parsertaggar hanterar inte CSS och behöver ingen lägesjustering	`<charinsert>` `<indicator>` `<nowiki>` `<ref>` `<references>` `<section>` `<templatedata>`

Tabeller

Använd CSS för att centrera en tabell:

Föråldrad kod	Ersättningar
<center> {\| ⋮ \|} </center> <div align="center"> {\| ⋮ \|} </div>	`{\| style="margin: 1em auto;"`

Även för centrering i en cell:

Föråldrad kod	Ersättningar
`\|<center>...</center>`	`\| style="text-align: center;" \| ...` `\| {{center\|...}}`

Rubrikceller är centrerade om inget annat anges.

font

Föråldrad kod: <font>...</font>

<font> har tre attribut med motsvarigheter i CSS:

<font>-attribut	CSS (style=)
`color`	`color`
`face`	`font-family`
`size`	`font-size`

Föråldrad kod	Ersättningar
`<font color= "red">...</font>`	`<span style="color: red;">...</span>` eller `{{font color\|red\|...}}`
`<font face= "Times, serif">...</font>`	`<span style="font-family: Times, serif;">...</span>` eller `{{font\|text=...\|font=Times, serif}}`
`<font size= "3">...</font>`	`<span style="font-size: medium;">...</span>` eller `{{font\|text=...\|size=medium}}`
`<font size="3" color="red" face="times, serif">...</font>`	`<span style="font-size: medium; color: red; font-family: Times, serif;">...</span>` eller `{{font\|text=...\|size=medium\|font=Times, serif\|color=red}}`

Länkar

Vid formatering av en länktext ska man undvika att själva länken inkluderas. Formateringen kommer annars inte kunna tolkas av den nya parsern, varvid länktexten istället får defaultfärg.

Föråldrad kod	Ersättningar
`<font color="green">[[Gräs]]</font>`	`[[Gräs\|<span style="color: green;">Gräs</span>]]` eller `[[Gräs\|{{font color\|green\|Gräs}}]]`

strike

Föråldrad kod: <strike>...</strike>

Har använts för överstruken text.

Använd <s>...</s> för att markera text som inte längre är korrekt eller relevant.
Använd <del>...</del> för att markera text som har raderats.

tt

Föråldrad kod: <tt>...</tt>

Har använts för text med fast bredd.

Använd <kbd> för användarindata ("keyboard"). Ger detta utseende.
Använd <samp> för utdata från ett datorprogram. Ger detta utseende.
Använd <code> för datorkod. Framhäver texten ytterligare med färgad bakgrund och ram.
I övriga fall: <span style="font-family: monospace, monospace;">

Andra attribut utan stöd

clear i <br />

Föråldrad kod	Ersättningar
`<br clear=all />`	`<div style="clear: both;"></div>` eller `{{clear}}`
`<br clear=left />`	`<div style="clear: left;"></div>` eller `{{clear\|left}}`
`<br clear=right />`	`<div style="clear: right;"></div>` eller `{{clear\|right}}`

align i <div>

Föråldrad kod	Ersättningar i HTML5
`<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>`

I vissa fall tillåtna men föråldrade attribut:

width i <hr>...</hr>
align i <h1>...</h1> through <h6>...</h6>
type i <li>...</li>
align i <p>...</p>
width i <pre>...</pre>
type i <ul>...</ul>

Element med ändrad funktion

cite

Föråldrad kod: <cite>...</cite>

Användes tidigare för markering av referenser och presentation av citat. I HTML5 används den bara för att markera ett verks titel och ger ingen egen formatering.

Citat kan istället presenteras med {{citat}} eller <blockquote>.

Se även

Referenser

^ ”HTML5”. World Wide Web Consortium (W3C). http://www.w3.org/2014/10/html5-rec.html.en. Läst 28 december 2017.
^ HTML 5.2 – W3C Recommendation World Wide Web Consortium (W3C), 14 december 2017. Läst 29 december 2017.
^ HTML5 Differences from HTML4 : Obsolete elements W3C, 9 december 2014.
^ HTML Standard : Obsolete features Web Hypertext Application Technology Working Group (WHATWG)
^ HTML-Attribute SELFHTML.
^ HTML/Textauszeichnung SELFHTML.
^ HTML5.2 W3C Recommendation : Tabular data W3C, 14 december 2017. Läst 3 januari 2018.

[1] ”HTML5”. World Wide Web Consortium (W3C). http://www.w3.org/2014/10/html5-rec.html.en. Läst 28 december 2017.

[w3c52-2] HTML 5.2 – W3C Recommendation World Wide Web Consortium (W3C), 14 december 2017. Läst 29 december 2017.

[3] HTML5 Differences from HTML4 : Obsolete elements W3C, 9 december 2014.

[4] HTML Standard : Obsolete features Web Hypertext Application Technology Working Group (WHATWG)

[selfhtml/dep-5] HTML-Attribute SELFHTML.

[txta-6] HTML/Textauszeichnung SELFHTML.

[7] HTML5.2 W3C Recommendation : Tabular data W3C, 14 december 2017. Läst 3 januari 2018.

[1]

[2]

[3]

[4]

[5]

[6]

[7]