Izvorni kôd stranice Wikipedia:HTML5

{{prečica|WP:HTML5}}
Razvoj [[HTML]] standarda je toliko uznapredovao da je inačica 5 ugrađena u MediaWiki softver od rujna 2012. godine. 

Ova stranica služi kao pomoć korisnicima pri prilagodbi članaka i drugih stranica na standard HTML5. <!--The fifty or so prepared searches reveal the obsolete tags. -->Uređivanja su različite težine, od nekoliko manjih popravaka koje svatko može ručno napraviti, do nekoliko tisuća za koje je najbolje upotrijebiti alat.

== Raspon ==
Implementacija novih HTML 5 atributa unutar MediaWiki softvera. To uključuje:
{| class="wikitable hintergrundfarbe2"
|+Atribute za formatiranje teksta
!Suvišni atributi<ref name="whatwg obsolete non-com" /><ref>http://www.w3.org/TR/html5-diff/#obsolete-elements</ref>
!Zamjenski atributi
|- style="vertical-align:top;"
|<syntaxhighlight lang="html5">
{| align="center"
|- align="center"
| align="center" | …</syntaxhighlight>
|<syntaxhighlight lang="html5">
{| class="center"           <!--  jednako kao text-align: center,
                                       i margin: auto na unutarnjim elementima -->
{| class="centered"               <!-- odgovara margin: auto -->
{| style="margin:auto;"
|- style="text-align:center;"
| class="center" </syntaxhighlight>
'''Napomena:''' novi kod nije ekvivalentan starome. Stari kod se koristio za centriranje svega, dok novi CSS može centrirati ili jednolinijske elemente, ili blokne elemente, ali ne oboje. U nekim slučajevima trebat će raditi dodatne promjene CSS koda kako bi se dobio izgled jednak prijašnjem.
|- style="vertical-align:top;"
|<code>align="right"</code>
|<code><nowiki>{| class="float-right"</nowiki></code>
<code>style="text-align:right;"</code>

Pozicioniranje elemenata na stranici može se ostvariti korištenjem <code>position:</code> ,  <code>float:</code> ili <code>display: inline-block;</code>, a poravnanja sadržaja korištenjem<code>text-align:</code> .
|- style="vertical-align:top;"
|<code>valign="top"</code>
|<code><nowiki>style="vertical-align:top;"</nowiki></code>

<code>valign</code> je zamjenjiv sa <code>vertical-align:</code> jedino unutar jedne ćelije ili retka zablice, ali ne može se primijeniti na cijelu tablicu.
|- style="vertical-align:top;"
|{{tag|tt}}
|{{tag|code}}

{{tag|kbd}}

{{tag|samp}}

{{tag|var}}

{{tlx|mono|...}} '''ili''' <code><nowiki><span style="font-family:monospace,monospace;"></nowiki></code>

Ovisno o semantici, {{tag|code|o}} se koristi za dijelove računalnog koda, {{tag|kbd|o}} za korisnički unos (npr. tipkovničke prečace), {{tag|samp|o}} za računalni ispis, a {{tag|var|o}} za računalne varijable.<ref name="txta">SELFHTML – [http://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/Auszeichnung_auf_Textebene List of items for markup]</ref>

'''Napomena:''' <code>font-family:monospace,monospace</code> je ispravno, i sprječava neočekivano mali font u preglednicima baziranim na Gecko i WebKit kodu (poput Safarija, Firefoxa, SeaMonkeya, iOS preglednika, i ostalih). Za detalje vidi [[:en:Wikipedia:Typography#The_monospace_'bug'|ovdje]]. {{En simbol}}
|- style="vertical-align:top;"
|<code><nowiki>{| bgcolor="gray"</nowiki></code>

<code><nowiki>| bgcolor="gray"</nowiki></code>
|<code><nowiki>{| style="background-color:gray;"</nowiki></code>

<code><nowiki>| style="background-color:gray;"</nowiki></code>
|-
!Suvišno od HTML4<ref name="whatwg obsolete non-com">{{cite web|work=HTML Living Standard|title=15.2 Non-conforming features|url=http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features}}</ref><ref name="selfhtml/dep">SELFHTML – [//wiki.selfhtml.org/wiki/HTML/deprecated HTML/deprecated]</ref>
!Zamjenski atributi
|- style="vertical-align:top;"
|{{tag|center}}
|{{tag|div|parametar=class="center"}}             <!-- corresponds to text-align: center, and also margin:auto on inner elements -->

{{tag|div|parametar=style="text-align:center;"}}

{{tag|div|parametar=class="centered"}}               <!-- corresponds to margin: auto -->

{{tag|div|parametar=style="margin:auto;"}}

'''Napomena:''' novi kod nije ekvivalentan starome. Stari kod se koristio za centriranje svega, dok novi CSS može centrirati ili jednolinijske elemente, ili blokne elemente, ali ne oboje. U nekim slučajevima trebat će raditi dodatne promjene CSS koda kako bi se dobio izgled jednak prijašnjem.
|- style="vertical-align:top;"
|{{tag|strike}}
|{{tag|s}}

{{tag|del}}

{{tag|span|parametar=style="text-decoration:line-through;"}}
|- style="vertical-align:top;"
|{{tag|font|parametar=size="3"}}
|{{tag|span|parametar=style="font-size:125%;"}}

{{tag|small}}

Postotci ovdje imaju smisla. Jednostavna pretvorba nije moguća jer izgled ovisi o samom sadržaju i djelomično o pregledniku koji se koristi. Na korisniku je da odluči koja vrijednost (zaokružena na 10%) je prihvatljiva.
|- style="vertical-align:top;"
|{{tag|font|parametar=color="red"}}
|{{tag|span|parametar=style="color:red;"}}

{{tag|span|parametar=class="error"}}
|- style="vertical-align:top;"
|{{tag|font|parametar=face="Courier"}}
|{{tag|span|parametar=style="font-family:Courier, monospace;"}}

{{tag|span|parametar=style="font:125% Courier, monospace;"}}  <!-- combined with size -->

Određivanje fonta bi uvijek trebalo završiti generičkim fontom, često <code>serif</code>, <code>sans-serif</code>, ili <code>monospace</code>, i rijetko <code>cursive</code> ili <code>fantasy</code>, u slučaju da preglednik ne podržava navedeni font. Generalno bi ovakvo nefleksibilno određivanje fontova trebalo što manje koristiti, ili zamijeniti odgovarajućim semantičkim elementom, poput {{tag|code|o}} (vidi niže).
|}

* Sljedeći su atributi važni za wiki-tablice suvišni u HTML5 standardu: <code>bgcolor</code>, <code>border</code>, <code>bordercolor</code>, <code>cellpadding</code>, <code>cellspacing</code>. Zamijeniti CSS-om po potrebi.
* Sljedeći su elementi proglašeni suvišnima u HTML4 standardu, ali su vraćeni u HTML 5: <code>u</code> i <code>s</code><ref name="selfhtml/dep" />

== Suvišni elementi i atributi ==

=== center ===

==== Tekst ====
U većini tekstova, {{tag|center}} se može zamijeniti sa {{Tl|centar}}.

{| class="wikitable"
!Suvišno
!Zamjena
!Pretraga
|-
|{{tag|center|sadržaj=Content}}
|{{tlx|centar|Sadržaj}}
|<nowiki>insource:center insource:/\<center/</nowiki>
|}

==== Predlošci ====
Za centriranje predložaka molimo provjerite dokumentaciju jer većina ima parametar za stil ili poravnanje. Ako predložak nema takav parametar, razmislite o dodavanju istoga.


==== Wikisintaksa ====
Neki elementi wikisintakse mogu koristiti CSS stilove:

{| class="wikitable"
!Suvišno
!Zamjena
!Pretraga
|-
|{{tag|center|sadržaj={{tag|gallery}} }}
|{{tag|gallery|parametar=class="center"}}
|<nowiki>insource:"center gallery" insource:/\<center\>.?\<gallery/</nowiki>
|}

{| class="wikitable" style="vertical-align: text-top;"
|Uz ove tagove dozvoljeno je koristiti <code>class="center"</code>
|
* {{tag|categorytree}}
* {{tag|gallery}}
* {{tag|poem}} (centers all lines)
* {{tag|pre}}
* {{tag|syntaxhighlight}}
* {{tag|source}}
|
* <nowiki>insource:"center categorytree" insource:/\<center\>\<categorytree/</nowiki>
* <nowiki>insource:"center gallery" insource:/\<center\>\<gallery/</nowiki>
* <nowiki>insource:"center poem" insource:/\<center\>\<poem/</nowiki>
* <nowiki>insource:"center pre" insource:/\<center\>\<pre/</nowiki>
* <nowiki>insource:"center syntaxhighlight" insource:/\<center\>\<syntaxhighlight/</nowiki>
* <nowiki>insource:"center source" insource:/\<center\>\<source/</nowiki>
|-
|Ovi tagovi ne prihvačaju CSS; koristite {{Tl|centar}}
|
* {{tag|hiero}}
* {{tag|math}}
* {{tag|score}}
* {{tag|timeline}}
|
|-
|Ovi tagovi koriste neki drugi način
|
* {{tag|imagemap}} koristi parametar <code>center</code>; proučite dokumentaciju
|
<nowiki>insource:"center imagemap" insource:/\<center\>\<imagemap/</nowiki>
|-
|Ovi tagovi su zadano u sredini
|
* {{tag|inputbox}}
|
<nowiki>insource:"center inputbox" insource:/\<center\>\<inputbox/</nowiki>
|-
|Ovi tagovi ne prihvaćaju CSS i ne treba ih poravnavati
|
* {{tag|charinsert}}
* {{tag|indicator}}
* {{tag|nowiki}}
* {{tag|ref}}
* {{tag|references}}
* {{tag|section}}
* {{tag|templatedata}}
|
|}

==== Tablice ====
Kako biste [[:m:Help:Table#Centering_tables|centrirali tablice]] {{en simbol}}, koristite sljedeću sintaksu:

{| class="wikitable"
!Suvišno
!Zamjena
!Pretraga
|-
|<pre><center>
{|
⋮
|}
</center>

<div align="center">
{|
⋮
|}
</div></pre>
|<code><nowiki>{| style="margin: 1em auto;"</nowiki></code>
|<nowiki>insource:center insource:/\<center\>.\{\|.*\|\}.?\<\/center\>/ prefix::</nowiki>
<nowiki>insource:div insource:"align center" insource:/align=\"?center\"?\>.?\{\|.*\|\}.?\<\/div/  prefix::</nowiki>
|}

Kako biste centrirali ćeliju tablice: 

{| class="wikitable"
!Suvišno
!Zamjena
!Pretraga
|-
|<code><nowiki>| <center>Sadržaj</center></nowiki></code>
|<code><nowiki>|style="text-align: center;" | Sadržaj</nowiki></code>
|<nowiki>insource:center insource:/[^{]\| *"<center>"[^|]*\<\/center\>/ -insource:/"[["[Ff]ile:[^\]]*\<center\>/</nowiki>
|}

Ćelije zaglavlja su automatski centrirane.

==== Datoteke ====
{| class="wikitable"
!Suvišno
!Zamjena
!Pretraga
|-
|{{tag|center|sadržaj=<nowiki>[[Datoteka:Slika.jpg]]</nowiki>}}
|<code><nowiki>[[Datoteka:Slika.jpg|center]]</nowiki></code>
| - 
|}

=== font ===
Tag {{tag|font|o}} ima tri atributa s jednakim CSS svojstvima:

{| class="wikitable"
!Font atribut
!CSS ekvivalent
|-
|<code>color</code>
|<code>color</code>
|-
|<code>face</code>
|<code>font-family</code>
|-
|<code>size</code>
|<code>font-size</code>
|}

{| class="wikitable"
!Suvišno
!Zamjena
!Pretraga
|-
|{{tag|font|parametar=color="red"|sadržaj=Sadržaj}}
|{{tag|span|parametar=style="color: red;"|sadržaj=Sadržaj}} '''ili''' {{tlx|Boja-|kod boje pozadine|tekst|kod boje teksta}}
|<nowiki>insource: "font color" insource:/\<font color\=.*\<\/font\>/</nowiki>
|}

{| class="wikitable"
!Suvišno
!Zamjena
!Pretraga
|-
|{{tag|font|parametar=face="Times, serif"|sadržaj=Sadržaj}}
|{{tag|span|parametar=style="font-family: Times, serif;"|sadržaj=sadržaj}}
|<nowiki>insource: "font face" insource:/\<font face\=.*\<\/font\>/</nowiki>
|}

Primijetite da u HTML-u vrijednost atributa <code>size</code> ne odgovara nijednoj CSS vrijednosti; jedino se prihvaćaju vrijednosti od 1 do 7.<ref>{{Cite web|url=https://www.w3.org/TR/css-fonts-3/#length-percentage-size-value|title=CSS Fonts Module Level 3|accessdate=2018-06-23|date=2018-03-10|author=W3C|authorlink=W3C}}</ref>

{| class="wikitable"
!Suvišno
!Zamjena
!Pretraga
|-
|{{tag|font|parametar=size="3"|sadržaj=Sadržaj}}
|{{tag|span|parametar=style="font-size: medium;"|sadržaj=Sadržaj}}
|<nowiki>insource: "font size" insource:/\<font size\=.*\<\/font\>/</nowiki>
|}

{| class="wikitable"
!Suvišno
!Zamjena
|-
|{{tag|font|parametar=size="3" color="red" face="times, serif"|sadržaj=Sadržaj}}
|{{tag|span|parametar=style="font-size: medium; color: red; font-family: Times, serif;"|sadržaj=Sadržaj}}
|}

=== strike ===
Tag {{tag|strike}} služi za križanje teksta. '''Pretraga: '''<nowiki>insource:strike insource:/\<strike/</nowiki>

Umjesto njega koristite: 
* Koristite {{tag|s}} za tekst koji više nije točan, ispravan ili relevantan.
* Koristite {{tag|del}} za tekst koji je izbrisan ili je označen za brisanje.

=== tt ===
{{tag|tt}} formatira tekst u fontu fiksne širine. '''Pretraga: '''<nowiki>insource:tt insource:/\<tt/</nowiki>

* Koristite {{tag|code|o}} za programski kod.
* Koristite {{tag|kbd|o}} za računalni ili tipkovnički unos
* Koristite {{tag|samp|o}} za računalni ispis programa ili sustava
* Koristite {{tag|var|o}} za imena varijabli (u računalnom kodu, matematici, ili sintaktičkim varijablama unutar običnog teksta).
* Koristite {{tlx|mono|Sadržaj}} za tekst u fontu fiksne širine bez semantičkog značenja opisanog iznad.


=== Tablični atributi ===
Suvišni tablični atributi.<ref>{{cite web|title=Table|website=W3C|url=http://www.w3.org/TR/html-markup/table.html}}</ref>

{| class="wikitable"
!Suvišni atribut
!CSS stil ćelije
!CSS stil tablice
!Pretraga
|-
|
* <code><nowiki>align="left"</nowiki></code>
* <code><nowiki>align="right"</nowiki></code>
* <code><nowiki>align="center"</nowiki></code>
|
* <code>text-align: left</code>
* <code>text-align: right;</code>
* <code>text-align: center;</code>
|
* <code>margin-left: auto</code>
* <code>margin-right: auto;</code>
* <code>margin: 1em auto;</code>
|<nowiki>insource:align insource:/align=/</nowiki>
|-
|<code>bgcolor="#ddd"</code>
|<code>background-color: #ddd;</code>
|<code>background-color: #ddd;</code>
|<nowiki>insource:bgcolor insource:/bgcolor=/</nowiki>
|-
|<code>border="2"</code>
|<code>border-width: 2px;</code>
|<code>border-width: 2px;</code>
|<nowiki>insource:border insource:/border=/</nowiki>
|-
|<code>cellpadding="2"</code>
|<code>padding: 2px;</code>
|
|<nowiki>insource:cellpadding insource:/cellpadding=/</nowiki>
|-
|<code>cellspacing="2"</code>
|
|<code>border-spacing: 2px;</code>
|<nowiki>insource:cellspacing insource:/cellspacing=/</nowiki>
|-
|<code>cellpadding="0" cellspacing="0"</code>
|<code>padding: 0;</code>
|<code>border-collapse: collapse;</code>
|
|-
|
* <code><nowiki>valign="top"</nowiki></code>
* <code><nowiki>valign="middle"</nowiki></code>
* <code><nowiki>valign="bottom"</nowiki></code>
|
* <code>vertical-align: top;</code>
* <code>vertical-align: middle;</code>
* <code>vertical-align: bottom;</code>
|
|<nowiki>insource:valign insource:/valign=/</nowiki>
|-
|<code>width="25%"</code>
|<code>width: 25%;</code>
|<code>width: 25%;</code>
|<nowiki>insource:width insource:/width=/</nowiki>
|-
|
* <code><nowiki>{| summary="foo"</nowiki></code>
* {{tag|table|parametar=summary="foo"}}
|
|Vidi [[:phab:T43917]]
|<nowiki>insource:summary insource:/\{\| summary=/</nowiki>
|}

Suvišni, dozvoljeni ali rijetko korišteni tablični atributi:

* <code>frame</code>: Koristite CSS za bordere. '''Pretraga: '''<nowiki>insource:frame insource:/frame=/</nowiki>
* <code>rules</code>:  Koristite CSS za bordere. '''Pretraga: '''<nowiki>insource:rules insource:/rules=/</nowiki>
* <code>axis</code>: Koristite <code>scope</code> u zaglavlju tablice. '''Pretraga: '''<nowiki>insource:axis insource:/axis=/</nowiki>
* <code>align</code> na {{tag|caption|o}}. '''Pretraga: '''<nowiki>insource:"caption align" insource:/\<caption align/</nowiki>
* <code>height</code>: Koristite <code>height</code> ili <code>line-height</code>. '''Pretraga: '''<nowiki>insource:height insource:/height=/</nowiki>

Nastavno, ovi su atributi suvišni u ćelijama tablice.<ref>{{cite web|title=Table cell|website=W3C|url=http://www.w3.org/TR/html-markup/td.html}}</ref><ref>{{cite web|title=Table header cell|website=W3C|url=http://www.w3.org/TR/html-markup/th.html}}</ref>

* <code>abbr</code>: Dodatno pojašnjenje sadržaja ćelije
* <code>scope</code> u ćeliji tablice: <code>scope</code> je ispravno koristiti samo u zaglavlju tablice

Postoje instance gdje se tablica koristi za poravnanje predloška. Takvom predlošku treba dodati parametar za poravnanje.

{| class="wikitable"
|-
! Neispravno !! Ispravno
|-
| <pre><nowiki>{|align=right
|{{navbar|Foo}}
|}</nowiki></pre> || <nowiki>{{navbar|Foo|style=float:right;}}</nowiki>
|}

=== Ostali suvišni atributi ===

* <code>clear</code> unutar {{tag|br|j}}

{| class="wikitable"
!Suvišno
!Zamjena
!Pretraga
|-
|{{tag|br|s|parametar=clear=all}}
|{{tag|div|sadržaj=|parametar=style="clear: both;"}} '''ILI''' {{tlx|clear}}
| rowspan="3" |<nowiki>insource:"br clear" insource:/\<br clear/</nowiki>
|-
|{{tag|br|s|parametar=clear=left}}
|{{tag|div|sadržaj=|parametar=style="clear: left;"}}
|-
|{{tag|br|s|parametar=clear=right}}
|{{tag|div|sadržaj=|parametar=style="clear: right;"}}
|}

* <code>align</code> unutar {{tag|div|o}}

{| class="wikitable"
!Suvišno
!Zamjena
!Pretraga
|-
|{{tag|div|parametar=align=center}}
|{{tag|div|parametar=style="text-align:center;"}}
| rowspan="4" |<nowiki>insource:"div align" insource:/\<div align/</nowiki>
|-
|{{tag|div|parametar=align=left}}
|{{tag|div|parametar=style="text-align:left;"}}
|-
|{{tag|div|parametar=align=right}}
|{{tag|div|parametar=style="text-align:right;"}}
|-
|{{tag|div|parametar=align=justify}}
|{{tag|div|parametar=style="text-align:justify;"}}
|}

Suvišni, dozvoljeni ali rijetko korišteni atributi:

* <code>width</code> unutar {{tag|hr}} '''Pretraga: '''<nowiki>insource:"hr width" insource:/\<hr width/</nowiki>
* <code>align</code> unutar {{tag|h1}} - {{tag|h6}}
* <code>type</code> unutar {{tag|li}} '''Pretraga: '''<nowiki>insource:"li type" insource:/\<li type/</nowiki>
* <code>align</code> unutar {{tag|p}} '''Pretraga: '''<nowiki>insource:"p align" insource:/\<p align/</nowiki>
* <code>width</code> unutar {{tag|pre}} '''Pretraga: '''<nowiki>insource:/\<pre width/</nowiki>
* <code>type</code> unutar {{tag|ul}} '''Pretraga: '''<nowiki>insource:"ul type" insource:/\<ul type/</nowiki>

== Izvori ==
{{refspisak}}

[[Kategorija:Održavanje Wikipedije]]