14. Megfelelő doctype választása a HTML dokumentumokhoz

By Karbonade

Bevezető

A 13. leírásban a HTML dokumentum head elemének anatómiájáról volt szó, amelyben részletesen megnéztük, hogy milyen különböző elemeket tartalmazhat a head, és ezek mire valók. Ebben a leírásban részletesebben megnézzük a doctype elemet, megmutatjuk, mire szolgál, hogyan segíthet a HTML validálásában, hogyan választható ki a megfelelő doctype típus a dokumentumhoz, és megnézzük az XML deklarációt, amelyre ritkán ugyan, de szükséged lehet.

Első a doctype

A legelső dolog, amit minden HTML dokumentumban definiálnod kell, az egy DTD deklaráció. Ha még soha senkitől nem hallottál a DTD deklarációról, ne izgulj. A dolgok egyszerűsítése érdekében gyakran úgy hivatkoznak erre, hogy „doctype” — én is így fogom hívni a leírás további részében.

Talán elgondolkodtál azon, hogy mi lehet ez a „DTD” vagy „doctype”. A DTD a „Document Type Definition”, azaz a dokumentum típus definíció rövidítése, és sok más dolog mellett ez adja meg azt, hogy milyen elemeket és attribútumokat használhatsz a HTML egyes részeiben — bizony, a mai weben több különböző HTML verzió is használatban van, de ezen ne aggódj egyelőre, végül is csak az egyikkel kell majd közülük foglalkoznod.

A doctype két dologra használható, a szóban forgó szoftvertől függően:

A webböngészők arra használják, hogy meghatározzák a renderelési módot a weblap megjelenítéséhez (ezekről később még lesz szó).
A jelölés validátorok a doctype alapján határozzák meg, hogy milyen szabályokat kell ellenőrizniük a dokumentumban (erről is lesz még szó bővebben).

Mindkét megközelítés fontos lesz a számodra, de különböző módokon, ezeket fogjuk a leírás további részében bővebben megmagyarázni.

Itt egy példa:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

        "http://www.w3.org/TR/html4/strict.dtd">

Ez így most elsőre teljesen értelmetlennek tűnhet a számodra, úgyhogy engedd meg, hogy elmagyarázzam a lehető legegyszerűbben, hogy hogyan épül fel a fenti elem. Ha kíváncsi vagy egy sokkal részletesebb magyarázatra, amelyben minden egyes karakter funkcióját megmagyarázzák, akkor olvasd el a !DOCTYPE cikket (angolul).

A doctype legfontosabb részei az idézőjelekkel határolt két darab string. A "-//W3C//DTD HTML 4.01//EN" azt jelöli, hogy ezt a DTD dokumentumot a W3C adta ki, a DTD a HTML 4.01-es verzióját írja le, és hogy a DTD-ben használt nyelv az angol (EN).

A második string, a "http://www.w3.org/TR/html4/strict.dtd" egy URL, amely a felhasznált DTD dokumentumra mutat.

Bár a doctype elég különösnek tűnik, szükség van rá a HTML és XHTML specifikációkhoz. Ha nem adod meg, akkor biztosan validálási hibát fogsz kapni, ha ellenőrzöd a dokumentumod jelöléseinek érvényességét a W3C validátorával, vagy más olyan eszközzel, amely HTML dokumentumokban keres hibákat. Egyes böngészőkben ez a funkció alapból benne van, míg más böngészőkben egy kiterjesztéssel lehet telepíteni.

Doctype sniffing és renderelési módok

Ha nem adod meg a doctype elemet, a böngészők ebben az esetben is megpróbálják értelmezni és feldolgozni a dokumentumot — az összes értelmetlen zagyvaságot is meg kell próbálniuk feldolgozni, amit a weben csak találni lehet, szóval nem lehetnek túlságosan válogatósak. Viszont könnyen lehet, hogy doctype nélkül nem olyan eredményt fogsz kapni, mint amilyenre számítottál, mégpedig a „doctype sniffing”, vagyis a doctype „kiszagolása” miatt.

A 21. századi böngészők túlnyomó része minden megnyitott HTML dokumentumnál megpróbálják a doctype segítségével eldönteni, hogy a dokumentum szerzője vajon figyelembe vette-e a webes szabványokat a HTML és a CSS megírásakor, vagy nem foglalkozott ezekkel.

Ha olyan doctype-ot találnak, amely szerint a dokumentum helyesen van kódolva, akkor egy ún. „szabványos módot” fognak használni a lap megjelenítésekor. Szabványos módban a böngészők igyekeznek a lapot a CSS specifikáció szerint elrendezni — ilyenkor ugyanis megbíznak a fejlesztőben, és feltételezik, hogy az oldal készítésekor tudta, hogy mikor mit csinál.

Másrészről, ha egy elavult vagy helytelen doctype-ot találnak, akkor átváltanak egy ún. „Quirks módba”, amely sokkal inkább kompatibilis a régi módszerekkel és a régi böngészőkkel. A Quirks mód azt feltételezi, hogy a dokumentum régi, és nem a jelenlegi webes szabványok szerint készült — a weblap így is meg fog jelenni, de jóval több számítási kapacitást igényelhet, és nagyobb valószínűséggel kapsz furcsa vagy ronda megjelenést, amikor nem is számítasz rá.

A különbség elsősorban abban van, hogy a böngésző hogyan értelmezi a CSS-t, és csak néhány esetben vonatkozik a konkrét HTML értelmezésére. Webfejlesztőként vagy webdesignerként akkor kaphatod az összes böngészőben a leginkább megegyező eredményeket, ha megbizonyosodsz róla, hogy minden böngésző a szabványos módot használja a megjelenítéshez, és megfelelő doctype-ot használsz!

Validálás

Amint azt korábban is említettem, a doctype-ot a validátorok is felhasználják; erről többet is meg fogsz tudni a sorozat későbbi részeiből. Jelenleg elég, ha annyit tudsz, hogy a validátor ellenőrzi a HTML dokumentum szintakszisát, és megnézi, hogy van-e benne valamilyen hiba. A validátor pedig a doctype alapján dönti el, hogy milyen szabályokat kell ellenőriznie a dokumentumban. Ez hasonló ahhoz, mint amikor a helyesírás-ellenőrzőnek megmondod, hogy milyen nyelven van megírva a dokumentum. Ha nem mondod meg neki, akkor nem fogja tudni azt sem, hogy milyen helyesírási és nyelvtani szabályokat kellene ellenőriznie.

Doctype választása

Szóval, most már tudod, hogy meg kell adnod egy doctype-ot, és azt is tudod, hogy ez mire szolgál, de honnan fogod tudni azt, hogy melyiket használd? Valójában elég sok van belőlük. Sőt, ha valami igazán komoly dolgot csinálsz, még saját doctype-ot is készíthetsz magadnak. De most nem fogunk belemenni a különböző fajtájú doctype-okba, hanem megpróbálom számodra a dolgokat egyszerű és érthető szinten tartani.

Ha a dokumentumod HTML, használd ezt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

       "http://www.w3.org/TR/html4/strict.dtd">

Ha a dokumentumod XHTML, használd ezt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Megjegyzés: a „valódi” XHTML-t a webböngészőnek XML-ként kell küldeni, de ennek a részletei, hogy mikor és hogyan teheted ezt meg, valamint hogy ez milyen változásokat okoz, túlmutatnak a jelenlegi cikk keretein.

Mindkét doctype használatával a böngésző a szabványos módot fogja használni a dokumentum értelmezésekor. A leglátványosabb hatás, amit a dokumentum készítésekor láthatsz, miután beállítottad a doctpye-ot, hogy sokkal következetesebbek lesznek az CSS változtatása után az eredményeid. Ha más lehetséges doctpye-okra is kíváncsi vagy, amelyeket a dokumentumodhoz használhatsz, akkor nézd meg a W3C listáját a javasolt DTD típusokkal.

Talán észrevetted, hogy mindkét doctype, amelyet itt javasoltam, az „strict” (vagyis „szigorú”). Ez talán ijesztően hangzik a számodra, de nem az.

Mind a HTML-nek, mind az XHTML-nek vannak szigorú (strict) és átmeneti (transitional) változatai is. A „szigorú” jelen esetben azt jelenti, hogy a doctype kevesebb megjelenítési jelölést engedélyez, mint az átmeneti változat. Viszont azoknak a megjelenítési jelöléseknek, amelyek nem engedélyezettek, amúgy sincs semmi keresnivalójuk a dokumentumban, mivel a HTML-t a struktúra és a tartalom meghatározására használhatod, és a CSS-ben definiálhatod ezeknek a megjelenését. A szigorú doctype segít neked ebben, mivel a validátor figyelmeztetni fog, ha véletlenül talál egy becsúszott megjelenítési elemet vagy attribútumot a kódodban.

XML deklaráció

Korábban már említettem, hogy a doctype kell legyen a legelső elem a HTML dokumentumokban. Nos, ez valójában csak egy egyszerűsített változata a valóságnak. Meg kell még említenünk az XML deklarációt is.

Egyes XHTML dokumentumokban a következő kódrészletet láthatod közvetlenül a doctpye előtt:

<?xml version="1.0" encoding="UTF-8"?>

Ezt XML deklarációnak hívják, és ha jelen van, akkor mindig a doctype előtt kell legyen.

Az Internet Explorer 6-os verziójának van ezzel egy kis problémája: ennek hatására ugyanis átvált Quirks módba, ami — mint azt már korábban említettem — nem igazán kívánatos.

Szerencsére az XML deklaráció az esetek többségében nem kötelező, kivéve abban az esetben, ha az XHTML dokumentumaidat valóban XML formában küldöd a böngészőknek (lásd a megjegyzést az XHTML-nél), *és* más karakterkódolást használsz, mint az UTF-8, *és* a kiszolgálód nem küld egy HTTP fejlécet, amely megadná a karakterkódolást.

Annak a valószínűsége, hogy ez mind egyszerre bekövetkezik, eléggé elenyésző, így a legegyszerűbb mód arra, hogy megoldhasd az Internet Explorer problémáját, az az, hogy egyszerűen kihagyod az XML deklarációt. Azért nehogy elfelejtsd a doctype-ot!

Összefoglaló

Mindig add meg valamelyik itt említett doctype-ot, mint a HTML dokumentumaid első eleme. Ezzel meggyőződhetsz arról, hogy a validátorok tudni fogják, milyen verziójú HTML-t használsz, így megfelelően tudják neked jelezni a hibákat, amelyeket a dokumentumaidban találnak. Ugyancsak segítenek abban, hogy a modern webböngészők szabványos módot használjanak az oldalad megjelenítéséhez, ami sokkal következetesebb eredményeket biztosít a dokumentum stílusozásakor a CSS segítségével.

Tesztkérdések

Íme néhány kérdés, amelyeket a leírás elolvasása után meg kell tudnod válaszolni:

Mi a két legfontosabb célja a doctype beillesztésének a HTML dokumentumokba?
Mik az előnyei annak, ha „szigorú” (strict) doctype-ot használsz az átmeneti (transitional) helyett?
Miért problémás az XML deklaráció?
Ebben a leírásban nem említettem a frameset doctype-ot — nézz utána, hogy ez mire jó, és miért kell elkerülni.

További olvasnivaló

Ne feledkezz meg a doctype-ról (angol)
Dokumentumtípusok; Javasolt dokumentumtípusok a weben (angol)
Javítsd ki az oldalad a jó doctype-pal! (angol)
A helyes megjelenítési mód aktiválása a doctype használatával (angol)
Az Opera 9 doctype kapcsolói (angol)
Quirks mód és szigorú mód (angol)
Átmeneti és szigorú jelölés (angol)

A szerzőről

Roger Johansson webes szakértő, és elsősorban a webes szabványokkal, a hozzáférhetőséggel és használhatósággal foglalkozik. A napjait a svéd NetRelations webes tanácsadó cégnél tölti weboldalak fejlesztésével, míg esténként és a hétvégeken a személyes oldalaira, a 456 Berea Street és a Kaffesnobben oldakon ír cikkeket.

Ha éppen nem ül a számítógépe előtt, Roger gyakran található meg a kertjében, amint éppen a körmeit koszolja össze, vagy a vadonban, halászás közben.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.