HTML5 alapok - HTML5 stílusajánló

5. oldal / 5

25.5. fejezet: HTML5 stílusajánló

Alapelvek:

- Mindig egységes stílust kell használni, mivel ez megkönnyíti mások számára a HTML-kód megértését.

- A jövőben az XML-alapú olvasók szeretnék elolvasni a HTML-dokumentumokat.

- Mindig használjunk jól formázott XHTML-közeli szintaxist.

- Minden esetben használjunk tiszta, egyszerű kódokat.

- Törekedjünk a kisbetűs kódok használatára. Például kerülendő:   <!DOCTYPE html>

Helyes: <!doctype html>

 - Kerülendő a kevert kis- és nagybetűs elemnevek használata. Például rossz:

<Section>
  <p>Ez egy paragrafus.</p>
 </SECTION>

Helyette helyes:

<section>
  <p> Ez egy paragrafus.</p>
</section>

- Minden HMTL5-ös elemet le kell zárni! Míg a régebbi megjelenítők megengedik a lezáratlan elemeket (<p> például </p>) lezárás nélkül is, de a HTML5 már „szereti” a mindig lezárt elemeket, ha létezik záró elem.

- A zárórésszel nem rendelkező elemet is le kell zárni. Például: <br/> vagy <meta charset=”utf-8” />.

- Az attribútumok szavaiban is csak kisbetűket használjunk. Kerülendő: <div CLASS="menu"> . Helyette javasolt: <div class="menu">.

- A HTML5 megengedi az attribútumok idézőjel nélküli használatát. Viszont itt is érvényesek az előző alapelvek, tehát a kis- és nagybetű használata ez egyes elemekben rossz. Az idézőjelesen használt értékek jobbak olvashatóak, valamint ha a paraméter üres helyet (space) tartalmaz, akkor kötelező az idézőjel használata. Például nem fog működni a következő megoldás: <table class=table striped> (Mivel van üres hely a paraméterben és a table simán nem paraméter). Rossz a következő: <table class=striped> Helyette érdemes használni: <table class="striped">.

- A képek attribútumaiban mindig hozzá kell adni a leírást (alt=”leírás”). Indok: mindig ez jelenik meg ha a kép nem olvasható vagy túl lassan töltődik be. Továbbá az is végre a szabványba került, hogy mindig használjuk paraméterként a képek méretét is. Helyes példa: <img src="/html5.gif" alt="HTML5" style="width:128px;height:128px"> .

- Üres helyek és egyenlőségjelek: a HTML5 megengedi az egyenlőségjelek körüli üres helyek használatát (például: <link rel = "stylesheet" href = "styles.css"> ) De ettől függetlenül sokkal jobban olvasható és némileg tömörebb is az alábbi verzió: <link rel="stylesheet" href="/styles.css"> . Így az utóbbi a helyes!

- HMTL kódszerkesztőt használva kifejezetten kellemetlen a balra-jobbra görgetés. Erősen javasolt a max. 80 karakteres kódsorok használata.

- Üres sorok és behúzás: Indok nélkül ne legyenek üres sorok a HTML-kódban. Ám az olvashatóság érdekében a nagyobb blokkok előtt vagy után használjon üres sorokat. Az egyes blokkok esetén a kódsor elején használjon több üres helyet, de a TAB használata tilos. Viszont nem szükséges minden egyes elemet behúzni!

- A HTML5 szabványban a <html> és a <body> kihagyhatóak. Például a következő kód helyes (HTML5-ben):

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Ennek ellenére nem javasolt a fenti két elem kihagyása, mivel számos böngésző nehezebben vagy egyáltalán nem jeleníti meg a weblapot. Ráadásul a hiányzó két elem miatt a DOM és XML szoftverekben a weblap összeomlást okozhat.

- Hasonló a helyzet a <head> elemmel is. Ennek hiánya is problémákat okozhat.

- Meta adat: A <title> elem kötelező a HTML5-ben, ráadásul javasolt ennek releváns kitöltése. Például: <title>HTML5 szintaxis és stílus</title>.

- HTML5 kommentek: ennek hiánya a régebbi szabványok egyik hibája volt, de immár ez is lehetséges. Tehát megengedett a következő: <!-- Ez egy komment. Nem jelenik meg. -->. A több soros kommentek is ugyanígy engedélyezettek.

- A stíluslapok használata is egyszerűsödött. Immár engedélyezett az alábbi variáns:

<link rel="stylesheet" href="/styles.css">

Ezzel a type attribútum használata tűnt el. További egyszerűsítés, hogy több paraméter is egy sorba írható. Például így:

p.intro {font-family: Verdana; font-size: 16em;}

- JavaScript betöltése: ez is egyszerűbb lett. A type itt sem kell. Szabályos például:

<script src="/myscript.js">

- Javaslatok: a nem-Windows szerverek gyakran tekintik különbözőnek a kis- és nagybetűket, így javasolt egységesen kisbetűs fájlneveket használni. Továbbá szinten ezen szerverek miatt nem szabad a fájl nevében ékezetet, üres helyet vagy írásjelet használni.

- A fájlok kiterjesztése is egységes lett:

HTML fájlok esetén: .htm vagy .html. (A böngésző nem tesz különbséget közöttük.)

CSS fájlok esetén: .css.

JavaScript fájlok esetén: .js.

PHP bármelyik variánsa esetén: .php.

 

A fejezet leghitelesebb forrása: https://www.w3schools.com/html/html5_syntax.asp

Folytatás: HTML5 Canvas grafika