Langbahn Team – Weltmeisterschaft

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="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>
<center>...</center>
<font size="3">...</font>


Här är procenttal att föredra framför fast textstorlek.

<font color="red">...</font>
<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>
<tt>...</tt>


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 celler / cellinnehåll för hela tabeller

|- style="text-align: center;"
{|style="text-align: center;" ger horisontell textcentrering i tabellens alla celler.
align="right" style="text-align: right;"
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.

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"

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.

width="25%" style="width: 25%;" style="width: 25%;"
{|summary="foo" Se:

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"
Dessa parsertaggar klarar inte CSS; använd {{center}}
Parsertagg som använder annat sätt
Parsertagg som är centrerad per default
Dessa parsertaggar hanterar inte CSS och
behöver ingen lägesjustering

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

  1. ^ ”HTML5”. World Wide Web Consortium (W3C). http://www.w3.org/2014/10/html5-rec.html.en. Läst 28 december 2017. 
  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)
  5. ^ HTML-Attribute SELFHTML.
  6. ^ HTML/Textauszeichnung SELFHTML.
  7. ^ HTML5.2 W3C Recommendation : Tabular data W3C, 14 december 2017. Läst 3 januari 2018.
Quelle: https://sv.wikipedia.org/wiki/Wikipedia:Uppdatera_till_HTML5