15. Szöveges részek megjelölése HTML-ben

By Karbonade

• Előző leírás — Megfelelő doctype választása a HTML dokumentumokhoz
• Következő leírás — HTML listák
• Tartalomjegyzék

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

• Az űr a legvégső határ
• Blokk szintű elemek
  • A lap szakaszcímei
  • Általános bekezdések
  • Más források idézése
  • Előformázott szöveg
• Inline elemek
  • Rövid idézetek
  • Kiemelés
  • Dőlt kiemelés
• 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.

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:

<h2>Kezdetben    teremté
                az      Úr </h2>

a böngészőben ugyanúgy lesz értelmezve, mint a következő:

<h2>Kezdetben teremté az Úr</h2>

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, h2, h3, 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 h2 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>
    <h2>A lap szakaszcímei</h2>
    <h2>Általános bekezdések</h2>
    <h2>Más források idézése</h2>
    <h2>Előformázott szöveg</h2>
  <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 i elem 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 […] Az i elemet 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 em vagy a strong elemeket, amelyekről már beszéltünk korábban.

s és strike

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 del elemet, 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 pre elemmel.

big és small

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.

• Előző leírás — Megfelelő doctype választása a HTML dokumentumokhoz
• Következő leírás — HTML listák
• Tartalomjegyzék

A szerzőről

Fotó: Andy Budd.

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.

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