Wikipedija:HTML5

↱
  • 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ć suradnicima pri prilagodbi članaka i drugih stranica na standard HTML5. 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:

Atribute za formatiranje teksta
Suvišni atributi[1][2]Zamjenski atributi
{| align="center"|- align="center"| align="center" | …
{| 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"

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.

align="right"{| class="float-right"

style="text-align:right;"

Pozicioniranje elemenata na stranici može se ostvariti korištenjem position: , float: ili display: inline-block;, a poravnanja sadržaja korištenjemtext-align: .

valign="top"style="vertical-align:top;"

valign je zamjenjiv sa vertical-align: jedino unutar jedne ćelije ili retka zablice, ali ne može se primijeniti na cijelu tablicu.

<tt>...</tt><code>...</code>

<kbd>...</kbd>

<samp>...</samp>

<var>...</var>

{{mono|...}} ili <span style="font-family:monospace,monospace;">

Ovisno o semantici, <code> se koristi za dijelove računalnog koda, <kbd> za korisnički unos (npr. tipkovničke prečace), <samp> za računalni ispis, a <var> za računalne varijable.[3]

Napomena: font-family:monospace,monospace 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 ovdje. (engl.)

{| bgcolor="gray"

| bgcolor="gray"

{| style="background-color:gray;"

| style="background-color:gray;"

Suvišno od HTML4[1][4]Zamjenski atributi
<center>...</center><div class="center">...</div>

<div style="text-align:center;">...</div>

<div class="centered">...</div>

<div style="margin:auto;">...</div>

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.

<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>

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 suradniku je da odluči koja vrijednost (zaokružena na 10%) je prihvatljiva.

<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>

Određivanje fonta bi uvijek trebalo završiti generičkim fontom, često serif, sans-serif, ili monospace, i rijetko cursive ili fantasy, 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 <code> (vidi niže).

  • Sljedeći su atributi važni za wiki-tablice suvišni u HTML5 standardu: bgcolor, border, bordercolor, cellpadding, cellspacing. Zamijeniti CSS-om po potrebi.
  • Sljedeći su elementi proglašeni suvišnima u HTML4 standardu, ali su vraćeni u HTML 5: u i s[4]

Suvišni elementi i atributi

center

Tekst

U većini tekstova, <center>...</center> se može zamijeniti sa {{centar}}.

SuvišnoZamjenaPretraga
<center>Content</center>{{centar|Sadržaj}}insource:center insource:/\<center/

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:

SuvišnoZamjenaPretraga
<center><gallery>...</gallery></center><gallery class="center">...</gallery>insource:"center gallery" insource:/\<center\>.?\<gallery/
Uz ove tagove dozvoljeno je koristiti class="center"
  • <categorytree>...</categorytree>
  • <gallery>...</gallery>
  • <poem>...</poem> (centers all lines)
  • <pre>...</pre>
  • <syntaxhighlight>...</syntaxhighlight>
  • <source>...</source>
  • insource:"center categorytree" insource:/\<center\>\<categorytree/
  • insource:"center gallery" insource:/\<center\>\<gallery/
  • insource:"center poem" insource:/\<center\>\<poem/
  • insource:"center pre" insource:/\<center\>\<pre/
  • insource:"center syntaxhighlight" insource:/\<center\>\<syntaxhighlight/
  • insource:"center source" insource:/\<center\>\<source/
Ovi tagovi ne prihvačaju CSS; koristite {{centar}}
  • <hiero>...</hiero>
  • <math>...</math>
  • <score>...</score>
  • <timeline>...</timeline>
Ovi tagovi koriste neki drugi način
  • <imagemap>...</imagemap> koristi parametar center; proučite dokumentaciju

insource:"center imagemap" insource:/\<center\>\<imagemap/

Ovi tagovi su zadano u sredini
  • <inputbox>...</inputbox>

insource:"center inputbox" insource:/\<center\>\<inputbox/

Ovi tagovi ne prihvaćaju CSS i ne treba ih poravnavati
  • <charinsert>...</charinsert>
  • <indicator>...</indicator>
  • <nowiki>...</nowiki>
  • <ref>...</ref>
  • <references>...</references>
  • <section>...</section>
  • <templatedata>...</templatedata>

Tablice

Kako biste centrirali tablice (engl.), koristite sljedeću sintaksu:

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

insource:div insource:"align center" insource:/align=\"?center\"?\>.?\{\|.*\|\}.?\<\/div/ prefix::

Kako biste centrirali ćeliju tablice:

SuvišnoZamjenaPretraga
| <center>Sadržaj</center>|style="text-align: center;" | Sadržajinsource:center insource:/[^{]\| *"<center>"[^|]*\<\/center\>/ -insource:/"[["[Ff]ile:[^\]]*\<center\>/

Ćelije zaglavlja su automatski centrirane.

Datoteke

SuvišnoZamjenaPretraga
<center>[[Datoteka:Slika.jpg]]</center>[[Datoteka:Slika.jpg|center]]-

font

Tag <font> ima tri atributa s jednakim CSS svojstvima:

Font atributCSS ekvivalent
colorcolor
facefont-family
sizefont-size
SuvišnoZamjenaPretraga
<font color="red">Sadržaj</font><span style="color: red;">Sadržaj</span> ili {{Boja-|kod boje pozadine|tekst|kod boje teksta}}insource: "font color" insource:/\<font color\=.*\<\/font\>/
SuvišnoZamjenaPretraga
<font face="Times, serif">Sadržaj</font><span style="font-family: Times, serif;">sadržaj</span>insource: "font face" insource:/\<font face\=.*\<\/font\>/

Primijetite da u HTML-u vrijednost atributa size ne odgovara nijednoj CSS vrijednosti; jedino se prihvaćaju vrijednosti od 1 do 7.[5]

SuvišnoZamjenaPretraga
<font size="3">Sadržaj</font><span style="font-size: medium;">Sadržaj</span>insource: "font size" insource:/\<font size\=.*\<\/font\>/
SuvišnoZamjena
<font size="3" color="red" face="times, serif">Sadržaj</font><span style="font-size: medium; color: red; font-family: Times, serif;">Sadržaj</span>

strike

Tag <strike>...</strike> služi za križanje teksta. Pretraga: insource:strike insource:/\<strike/

Umjesto njega koristite:

  • Koristite <s>...</s> za tekst koji više nije točan, ispravan ili relevantan.
  • Koristite <del>...</del> za tekst koji je izbrisan ili je označen za brisanje.

tt

<tt>...</tt> formatira tekst u fontu fiksne širine. Pretraga: insource:tt insource:/\<tt/

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


Tablični atributi

Suvišni tablični atributi.[6]

Suvišni atributCSS stil ćelijeCSS stil tablicePretraga
  • align="left"
  • align="right"
  • align="center"
  • text-align: left
  • text-align: right;
  • text-align: center;
  • margin-left: auto
  • margin-right: auto;
  • margin: 1em auto;
insource:align insource:/align=/
bgcolor="#ddd"background-color: #ddd;background-color: #ddd;insource:bgcolor insource:/bgcolor=/
border="2"border-width: 2px;border-width: 2px;insource:border insource:/border=/
cellpadding="2"padding: 2px;insource:cellpadding insource:/cellpadding=/
cellspacing="2"border-spacing: 2px;insource:cellspacing insource:/cellspacing=/
cellpadding="0" cellspacing="0"padding: 0;border-collapse: collapse;
  • valign="top"
  • valign="middle"
  • valign="bottom"
  • vertical-align: top;
  • vertical-align: middle;
  • vertical-align: bottom;
insource:valign insource:/valign=/
width="25%"width: 25%;width: 25%;insource:width insource:/width=/
  • {| summary="foo"
  • <table summary="foo">...</table>
Vidi phab:T43917insource:summary insource:/\{\| summary=/

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

  • frame: Koristite CSS za bordere. Pretraga: insource:frame insource:/frame=/
  • rules: Koristite CSS za bordere. Pretraga: insource:rules insource:/rules=/
  • axis: Koristite scope u zaglavlju tablice. Pretraga: insource:axis insource:/axis=/
  • align na <caption>. Pretraga: insource:"caption align" insource:/\<caption align/
  • height: Koristite height ili line-height. Pretraga: insource:height insource:/height=/

Nastavno, ovi su atributi suvišni u ćelijama tablice.[7][8]

  • abbr: Dodatno pojašnjenje sadržaja ćelije
  • scope u ćeliji tablice: scope 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.

NeispravnoIspravno
{|align=right|{{navbar|Foo}}|}
{{navbar|Foo|style=float:right;}}

Ostali suvišni atributi

  • clear unutar <br />
SuvišnoZamjenaPretraga
<div style="clear: both;"></div> ILI {{clear}}insource:"br clear" insource:/\<br clear/
<div style="clear: left;"></div>
<div style="clear: right;"></div>
  • align unutar <div>
SuvišnoZamjenaPretraga
<div align=center>...</div><div style="text-align:center;">...</div>insource:"div align" insource:/\<div align/
<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>

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

  • width unutar <hr>...</hr> Pretraga: insource:"hr width" insource:/\<hr width/
  • align unutar <h1>...</h1> - <h6>...</h6>
  • type unutar <li>...</li> Pretraga: insource:"li type" insource:/\<li type/
  • align unutar <p>...</p> Pretraga: insource:"p align" insource:/\<p align/
  • width unutar <pre>...</pre> Pretraga: insource:/\<pre width/
  • type unutar <ul>...</ul> Pretraga: insource:"ul type" insource:/\<ul type/

Izvori