Ez a bejegyzés a webes szabványok tizenötödik leírása. Az eredeti, angol nyelvű cikket Mark Norman Francis írta.
Bevezető
Ebben a leírásban megismerkedhetsz a HTML alapszintű használatával, mégpedig hogy hogyan adhatod meg a jelölésekkel a dokumentumod különböző részeinek az értelmét.
Megnézzük az általános strukturális elemeket, mint például a címsorok, a paragrafusok vagy a beágyazott idézetek és kódok. Ezután néhány belső tartalommal is megismerkedünk, mint a rövid idézetek és a kiemelések, majd a végén még gyorsan átnézünk néhány régimódi megjelenítési elemet is. A leírás felépítése a következő:
- Space — az űr a legvégső határ
- Blokk szintű elemek
- Inline elemek
- Megjelenítési elemek — soha ne használd őket
- Összefoglaló
Megjegyzés: Minden példakód után találsz egy „Próbáld ki élőben” hivatkozást, amelyre ha rákattintasz, elvisz egy oldalra, ahol azonnal láthatod, hogyan jelenik meg élesben a bemutatott kód, valamint megnézheted a hivatkozott oldal forrását is, ahol az összes példakódot megtalálod.
Space — az űr a legvégső határ
Van egy nagyon fontos pont, amit tisztáznunk kell, mielőtt még a szövegekről beszélnénk, mégpedig a szavak közötti üres helyekről. A HTML írásakor a forráskód ún. „fehér karaktereket” is tartalmaz — ezek azok a karakterek, amelyek egy üres területtel elválasztják egymástól a szavakat. A leggyakoribb ilyen fehér karakter a space (szóköz), amelyet a szóköz billentyű lenyomásával tudsz beírni, de ilyen még a tabulátor és az új sor karakter is.
A HTML-ben a fehér karakterek többszörös megjelenése (szinte) minden esetben egyetlen szóköz karakternek számít. Például:
<h3>Kezdetben teremté
az Úr </h3>
a böngészőben ugyanúgy lesz értelmezve, mint a következő:
<h3>Kezdetben teremté az Úr</h3>
Az egyetlen hely, ahol ez nem így történik, az a pre elem, amelyről még fogunk beszélni ebben a leírásban.
Ez sokszor zavaró lehet az olyanoknak, akik először szerkesztenek HTML dokumentumot, mikor megpróbálnak egy szöveget kitolni néhány extra szóköz karakterrel, vagy nagyobb helyet szeretnének a mondatok, esetleg a bekezdések között. A dokumentum vizuális megjelenését viszont nem a HTML forrásban kell befolyásolni, hanem használj helyette stíluslapokat, ahogy azt a sorozat egy későbbi részében be fogjuk mutatni.
Blokk szintű elemek
Ebben a részben végigvesszük a gyakoribb, szövegek formázására használható blokk szintű elemek szintaxisát és használatát.
A lap szakaszcímei
Miután a lapot felosztottad több logikus szakaszra, minden szakaszt be kell vezetned egy megfelelő címsorral. Erről már volt szó korábban a Mi kell egy jó weblaphoz? leírásban.
A HTML 6 címsor szintet definiál, h1, h2, h3, h4, h5 és h6 (a magasabb fontosságútól az alacsonyabbig). Általánosságban, a h1 szokott lenni az egész lap fő címsora, ez vezet be mindent. A h2 ezután szakaszokra bontja a lapot, a h3 alszakaszokra, és így tovább.
Nagyon fontos, hogy a dokumentumot a különböző szintű címsorokkal oszd fel szakaszokra, alszakaszokra, al-alszakaszokra, mivel ez sokkal érthetőbbé teszi a lapot a képernyőolvasók és az automatikus folyamatok számára (mint amilyen például a Google indexelő robotja).
Ha ezt a lapot vesszük alapul, akkor ez is egy jó példa a címsorok felépítésére:
<h1>Szöveges részek megjelölése HTML-ben</h1>
<h2>Bevezető</h2>
<h2>Space — az űr a legvégső határ</h2>
<h2>Blokk szintű elemek</h2>
<h3>A lap szakaszcímei</h3>
<h3>Általános bekezdések</h3>
<h3>Más források idézése</h3>
<h3>Előformázott szöveg</h3>
<h2>Inline elemek</h2>
[…és így tovább…]
Általános bekezdések
A bekezdések (vagy paragrafusok) a legtöbb dokumentum építőkövei. A HTML-ben a bekezdést a p elem jelöli, amelynek nincsenek speciális attribútumai. Például:
<p>Ez egy nagyon rövid bekezdés. Csak két mondatból áll.</p>
Sok könyvben és cikkben egy paragrafusban csak egy mondat lehet. Bár a „paragrafus” értelme (az írott terminológiát tekintve) elég nyilvánvaló, a weben sokszor sokkal rövidebb szövegeket is meg szoktak jelölni paragrafusként, mivel a szerző szerint ez sokkal „szemantikusabb”, mint a div elem használata (erről fogunk beszélni a későbbiekben az Általános tárolók leírásban).
A paragrafus a weben egy vagy több mondat csoportja, éppen úgy, mint az újságokban vagy a könyvekben. A webes sokkal jobb, ha ezekhez használjuk a paragrafus elemet, és nem hagyunk a szövegben egyedül csak úgy szövegrészeket. Ha csak néhány szóról van szó, vagy nem egy teljes mondatról, akkor ezeket nem kell feltétlenül paragrafusként megjelölnöd.
Más források idézése
Nagyon gyakran a cikkek, blogbejegyzések vagy a webes dokumentumok idéznek kisebb-nagyobb részeket más dokumentumokból. A HTML-ben a hosszabb idézeteket — például teljes mondatokat, bekezdéseket, listákat — a blockquote elemmel jelölhetjük.
A blockquote elem nem tartalmazhat sima szöveget, hanem csak egy másik blokk szintű elem lehet benne. Ugyanazokat a blokk szintű elemeket használd az idézetben is, mint az eredeti környezetben. Ha egy bekezdést idézel, használd a paragrafus elemet, ha egy lista elemeit, akkor készíts listát, és így tovább.
Ha az idézet egy másik weboldalról származik, akkor megadhatod a forrást a cite attribútumban a következőképpen:
<p>A HTML 4.01 az egyetlen olyan HTML verzió, amelyet egy új weblap létrehozásakor használhatsz, a specifikáció szerint:</p> <blockquote cite="http://www.w3.org/TR/html401/"> <p>Ez a dokumentum érvényteleníti a HTML 4.0 korábbi verzióit, bár a W3C továbbra is elérhetővé teszi ezeket a specifikációkat és a hozzájuk tartozó DTD-ket a W3C weboldalán.</p> </blockquote>
Előformázott szöveg
Minden olyan szöveget, amelyben a szöveg behúzása és a fehér karakterek (amelyeket a leírás elején említettünk) fontos szerepet kapnak, a pre elemmel kell megjelölnünk.
A legtöbb webböngészőben az előformázott szöveg pontosan úgy jelenik meg a felhasználónak, ahogy a forrásban szerepel, gyakran fix szélességű (monospace) betűtípussal, így a szöveg úgy néz ki, mintha írógépből származna. Ez a programozók hagyatéka, akik fix szélességű betűkkel dolgoznak, és eleinte leginkább ők használták az előformázott szöveget.
Ebben a példában egy példakódot láthatsz a perl programozási nyelvből:
<pre><code class="language-perl">
# vegig beolvassa a megnevezett fajlt
sub slurp {
my $filename = shift;
my $file = new FileHandle $filename;
if ( defined $file ) {
local $/;
return <$file>;
}
return undef;
};
</code></pre>
A fenti példában szereplő code elemről részletesebben is fogunk beszélni a Kevéssé ismert szemantikus elemek részben.
Inline elemek
Ebben a részben átnézzük a leggyakoribb, szövegek formázásához használt inline (soron belüli) elemek szintaxisát és használatát.
Rövid idézetek
A mondaton vagy bekezdésen belüli rövid idézeteket a q elemmel jelölhetjük. Hasonlóan a blockquote elemhez, ez is tartalmazhat egy cite attribútumot, amelyben megadhatsz egy webcímet, ahonnan az idézet származik.
A rövid idézetek legtöbbször idézőjelben szerepelnek. A HTML specifikáció szerint az idézőjeleket ebben az esetben a kliens eszköz (vagyis a böngésző) kell elhelyezze a dokumentumban, a dokumentum által beállított nyelv alapján. A CSS-ben módosíthatod a felhasznált idézőjeleket — erről egy későbbi cikkben lesz szó, a Szöveg stílusozása CSS-sel leírásban.
Egy példa a q elem használatára:
<p>Ez nem végződött túl jól a számomra. Hát igen,
<q lang="fr">c'est la vie</q>, ahogy a franciák mondják.</p>
Kiemelés
A HTML-ben két módszer van arra, ha egy szövegrészt ki akarunk emelni az olvasónak, például hibákat, figyelmeztetéseket vagy megjegyzéseket. A vizuális böngészőkben ezt egy eltérő színt vagy betűtípust, esetleg félkövér vagy dőlt megjelenést jelent. A képernyő-felolvasók használói számára a kiemelés eredmény egy más hangtónus vagy egyéb hangjelzés lehet.
Az olyan szövegre, amelyet ki akarsz emelni, használhatod az em elemet, mint az alábbi példában:
<p><em>Megjegyzés:</em> a bojlert ki kell húzni
éjszakára. </p>
Ha a teljes bekezdést ki kell emelned, de a bekezdésen belül is van olyan rész, amelyet ismét kiemelnél, akkor használd a strong elemet, amely egy erősebb kiemelést jelent, hasonlóan az alábbi példához:
<p><em>Megjegyzés: a bojlert ki <strong>kell</strong> húzni
minden éjszaka, különben felrobban -
<strong>és mind meghalunk</strong></em>.</p>
Dőlt kiemelés
Az általános vélekedés szerint a dőlt kiemelés nem a szöveg értelmét jelöli, ilyenformán az i elem használata nem ajánlott (hasonlóan a leírás következő szakaszában bemutatott megjelenítési elemekhez).
Van viszont néhány olyan helyzet, amikor a tartalom dőlt kiemelése vitathatóan bár, de helyes lehet. Vannak olyan esetek, amikor egy kifejezés dőlt kiemelése a legegyszerűbb módszer ahelyett, hogy egy egyébként máshol nem használt speciális elemet vezetnénk be rá. Ilyenek lehetnek például a hajók nevei, a tévésorozatok, könyvek vagy filmek címei, technológiai fogalmak és más rendszertani megnevezések.
Az érvelés szerint a dőlt kiemelés ebben a helyzetben azt jelenti, hogy a megjelölt szöveg különleges, és a környezet mutatja meg, hogy mennyire különleges a többi részhez viszonyítva. Valóban, a HTML 5 specifikáció vázlatában jelenleg ez áll:
Az
ielem olyan szövegrészt jelöl, amelyet más hangon vagy hangszínnel mondunk, vagy egyéb módon eltér a normál kiejtéstől […] Azielemet csak legvégső esetben használjuk, amikor más semmilyen más elem nem megfelelő.
Mivel az i elem megjelenését is módosítani lehet CSS-ben, hogy ne legyen dőlt, így a „dőlt kiemelés” jelentése ebben a környezetben csak annyi, hogy „valami más”. Én ezt személy szerint nem tartom elfogadhatónak, de már éppen elég precedens van a használatára ebben a formában.
Megjelenítési elemek — soha ne használd őket
A HTML specifikáció tartalmaz néhány olyan elemet is, amelyet általában „megjelenítési” elemnek neveznek, mivel kizárólag arra vonatkoznak, hogy a megjelölt szövegrész hogyan jelenjen meg, és nem arra, hogy mit jelent.
A legtöbb ilyen elemet már érvénytelenként jelölték meg a specifikációban. Ez azt jelenti, hogy van egy más, újabb módszer is, amellyel ugyanazt az eredményt érhetjük el.
Most részletesebben bemutatjuk ezeket az elemeket, de ennek főleg történelmi okai vannak — a modern weblapokon soha ne használd őket. Ezeknek az elemeknek a hatását más módon is elérheted; erről később még fogunk beszélni a Szöveg stílusozása CSS-sel és a Kevéssé ismert szemantikus elemek részekben.
font face="…" size="…"- A közrefogott szöveget a böngésző egy másik betűtípussal jeleníti meg — viszont a betűtípusokat inkább a CSS-ben add meg.
b- A megjelölt szöveg félkövér — ez az esetek többségében azt jelenti, hogy ki akarod emelni a szöveget, úgyhogy használd helyette az
emvagy astrongelemeket, amelyekről már beszéltünk korábban. sésstrike- A megjelölt szöveget áthúzza egy vonallal — ha ez csak egy megjelenítési hatás, akkor inkább CSS-ben add meg. Ha viszont azt jelöli, hogy a szöveg törölve lett a dokumentumból, vagy már nem érvényes, akkor használhatod helyette a
delelemet, amelyről még később itt is lesz szó. u- A közrefogott szöveget aláhúzza — ez szinte mindig egy vizuális hatás, így inkább CSS-ben valósítsd meg.
tt- A jelölt szöveg „írógéppel” készült, vagy fix szélességű betűtípussal jelenik meg — ezt megoldhatod CSS-sel, vagy egy pontosabb szemantikus jelöléssel, mint például a fent bemutatott
preelemmel. bigéssmall- A megjelölt szöveg kisebb vagy nagyobb lesz — ezt inkább CSS-ben valósítsd meg.
Összefoglaló
Ebben a leírásban azokról az elemekről beszéltünk, amelyeket a leggyakrabban használnak szöveges részek megjelölésére. A következő leírásban egy másik típusú tartalomról fogunk beszélni: a listákról.
A szerzőről
Mark Norman Francis már azelőtt az internettel foglalkozott, hogy a web megszületett volna. Jelenleg a Yahoo!-nál a világ legnagyobb weboldalán dolgozik mint kezelőfelület-tervező, új módszereket és kódolási szabályokat dolgoz ki, valamint nemzetközi támogatást nyújt a minőségi webfejlesztéshez.
A Yahoo! előtt a Formula One Management, a Purple Interactive és a City University vállalatoknál dolgozott különböző minőségben, többek között mint webfejlesztő, CGI programozó és rendszertervező. A http://marknormanfrancis.com/ oldalon blogol.
Fotó: Andy Budd.
