14. Megfelelő doctype választása a HTML dokumentumokhoz
- Előző leírás — A HTML <head> eleme
- Következő leírás — Szöveges részek megjelölése HTML-ben
- Tartalomjegyzék
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
- Doctype sniffing és renderelési módok
- Validálás
- Doctype választása
- XML deklaráció
- Összefoglaló
- Tesztkérdések
- További olvasnivaló
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)
- Előző leírás — A HTML <head> eleme
- Következő leírás — Szöveges részek megjelölése HTML-ben
- Tartalomjegyzék
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.
Comments
The forum archive of this article is still available on My Opera.