Kihagyás

3. fejezet

Ebben a részben még tovább folytatjuk a HTML dokumentum törzsrészében (body) használatos tagekkel való ismerkedést.

Karakterentitások

Mivel HTML-ben vannak speciális célokra lefoglalt karakterek (pl. a < és > karakterek), ezért ezeket valahogy máshogy kell írnunk, ha meg szeretnénk őket jeleníteni a weboldalunkon. Az ilyen karakterek megadására szolgálnak a karakterentitások.

Néhány gyakrabban használt karakterentitás (teljes lista itt):

Karakterentitás Megjelenítés Elnevezés
&nbsp; szóköz
&lt; < kisebb, mint
&gt; > nagyobb, mint
&amp; & és-jel
&apos; ' aposztróf
&quot; " idézőjel
&copy; © copyright

Példa: Ha egy bekezdésbe azt szeretnénk írni, hogy 5 < 10 > 8, akkor ezt a következőképpen tehetjük meg karakterentitások használatával

1
<p>5 &lt; 10 &gt; 8</p>

Néhány további fontosabb HTML elem

  • <h1>...</h1>, <h2>...</h2>, ..., <h6>...</h6>: címsorok
  • <p>...</p>: bekezdés
  • <br/>: sortörés (páratlan tag)
  • <hr/>: horizontális elválasztó vonal (páratlan tag)
  • <pre>...</pre>: előre formázott szöveg
    • alakhű megjelenést biztosít: az ilyen taggel megadott szövegek megőrzik a whitespace karaktereket (szóközöket, tabulátorokat, sortöréseket)
    • akkor használjuk, ha a szöveg jellegéből szemantikusan következik a tartalom szóközökkel, térközökkel való formázása (pl. billentyűrajzok, kódrészletek, képversek)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Fontosabb HTML elemek</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <h1>Piramis</h1>
    <hr/>
    <pre>
          0
         0 0
        0 0 0
       0 0 0 0
    </pre>
    <p>A piramis egy négyzet alapú <br/> gúla alakú építmény.</p>
  </body>
</html>

A kód kimenete

  • <em>...</em>: a tartalom hangsúlyozására használjuk
    • szemantikus jelentéssel bír
    • a képernyőolvasó programok másképp olvassák fel, mint a hagyományos szövegeket
    • a böngészők általában dőlt betűkkel jelenítik meg
  • <strong>...</strong>: a tartalom erős kiemelésére használjuk
    • szemantikus jelentéssel bír
    • a képernyőolvasó programok másképp olvassák fel, mint a hagyományos szövegeket
    • a böngészők általában félkövér betűkkel jelenítik meg
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Fontosabb HTML elemek</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <p><em>Ricsi</em> ma vizsgázik Prog2-ből.</p>   <!-- Ki vizsgázik? -->
    <p>Ricsi <em>ma</em> vizsgázik Prog2-ből.</p>   <!-- Mikor vizsgázik? -->
    <p>Ricsi ma vizsgázik <em>Prog2-ből</em>.</p>   <!-- Miből vizsgázik? -->

    <p><strong>Figyelem!</strong> A ketrecbe benyúlni veszélyes!</p>
  </body>
</html>

A kód kimenete

Figyelem

A HTML tageket NE használjuk formázási célokra! Ha egy szöveget félkövérré vagy dőltté szeretnénk tenni, használjunk CSS-t!

  • <sub>...</sub>: alsó index
  • <sup>...</sup>: felső index
  • <q>...</q>: inline idézet (az idézőjeleket automatikusan kiteszi)
  • <blockquote>...</blockquote>: idézetblokk
  • <code>...</code>: kódrészlet
  • <mark>...</mark>: vizuális szövegkiemelés
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Fontosabb HTML elemek</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <p>Alsó index: x<sub>2</sub>, felső index: x<sup>2</sup></p>
    <p><q>A Webtervezés még könnyű tárgynak számít</q></p>

    <blockquote>
      Never gonna give you up <br/>
      Never gonna let you down <br/>
      Never gonna run around <br/>
      And desert you
    </blockquote>

    <p>Egy C program belépési pontja: <code>int main(int argc, char **argv)</code></p>
    <p>bla bla bla <mark>ez itt a lényeg</mark> bla bla bla</p>
  </body>
</html>

A kód kimenete

A HTML5 szemantikus tagek

Az első két fejezetben láttunk példát a weboldalak tartalmának strukturálására. Emlékeztetőül: a <div> és <span> tagekkel általános célú szakaszokat, tartalmi egységeket alakítottunk ki.

A <div> egy blokkszintű (block) objektum, ami azt jelenti, hogy mindig új sorban kezdődik, és kihasználja a teljes rendelkezésre álló szélességet. Ezzel szemben a <span> egy sorszintű (inline) elem, tehát nem kezdődik új sorban, és szélessége is csak akkora, mint amekkora helyre szüksége van.

A <div> és <span> tagek mellé, a HTML5 szabványban új, szemantikus jelentéssel bíró strukturális elemeket vezettek be:

  • <header>...</header>: az oldal vagy egy tartalmi egység fejléce
  • <footer>...</footer>: az oldal vagy egy tartalmi egység lábléce
  • <nav>...</nav>: navigációs menü
  • <aside>...</aside>: érintőlegesen kapcsolódó tartalom (jellemzően oldalsáv)
  • <main>...</main>: fő tartalom
  • <section>...</section>: logikai egység
  • <article>...</article>: önálló tartalom.

A fenti tagek kivétel nélkül blokkszintű (block) elemek, a <div>-hez hasonlóan.

Ezek a tagek - az általános célú <div> és <span> tagekkel ellentétben - szemantikai jelentéssel bírnak, tehát egyértelműen meghatározzák a tartalmuk jelentését (pl. egy <nav>-ról tudjuk, hogy valamilyen navigációt valósít meg).

A HTML5-ben bevezetett szemantikus tageket felhasználva precízebben leírhatjuk egy weboldal szerkezetét. A szemantikus HTML5 tagek nemcsak a kód olvashatóságát és karbantarthatóságát javítják, hanem segítenek a keresőmotoroknak és egyéb eszközöknek is jobban értelmezni az oldalt. Ezekkel a tagekkel készíthetünk például az alábbihoz hasonló elrendezésű weboldalt. (Az ábra forrása)

HTML5 szemantikus tagek

Megjegyzés

Ahhoz, hogy az ábrán látotthoz hasonló elrendezést kapjunk, a tanult tagek használata önmagában nem elegendő (pl. az <aside> nem fog automatikusan oldalra kerülni). Az elemek helyzetének megadására a CSS-beli pozicionálást használhatjuk.

Utolsó frissítés: 2025-08-10 20:20:45