Példa 4-2. A <h1>, <h2>, stb. elmek

A használat módja:

<h1>Első szakasz</h1>

<!-- Ide kerül a dokumentum bevezető része -->

<h2>Ez az első szakasz fejléce</h2>

<!-- Az első szakasz tartalma következik -->

<h3>Ez az első alszakasz fejléce</h3>

<!-- Az első alszakasz tartalma itt foglal helyet -->

<h2>Ez a második szakasz fejléce</h2>

<!-- A második szakasz tartalma ezen a részen lesz -->

Példa 4-3. A <hn> elemek helytelen sorrendje

A használati módja:

<h1>Első szakasz</h1>

<!-- A dokumentum bevezetője -->

<h3>Alszakasz</h3>

<!-- Nem jó, mert kimaradt a <h2> szint! -->

Példa 4-4. A <p> elem

A használat módja:

<p>Ez egy bekezdés.  Szinte bármilyen más elemet tartalmazhat.</p>

Példa 4-5. A <blockquote> elem

A használat módja:

<p>Részlet a Szózatból:</p>

<blockquote>Hazádnak rendületlenűl
  Légy híve, oh magyar,
  Bölcsőd az 's majdan sírod is,
  Melly ápol 's eltakar.

  A' nagy világon e' kivűl
  Nincsen számodra hely,
  Áldjon vagy verjen sors' keze,
  Itt élned, halnod kell.

  Ez a' föld, mellyen annyiszor
  Apáid' vére folyt;
  Ez, mellyhez minden szent nevet
  Egy ezredév csatolt.

  Itt küzdtenek honért a' hős
  Árpádnak hadai,
  Itt törtek össze rabigát
  Hunyadnak karjai.

  Szabadság! Itten hordozák
  Véres zászlóidat,
  'S elhulltanak legjobbjaink
  A' hosszu harcz alatt.</blockquote>

Példa 4-6. Az <ul> és <ol> elemek

A használat módja:

<p>Egy sorszámozás nélkül felsorolás.  A felsorolás elemei előtt minden
  bizonnyal pontok fognak megjelenni.</p>

<ul>
  <li>Első elem</li>

  <li>Második elem</li>

  <li>Harmadik elem</li>
</ul>

<p>Egy sorszámozott lista, ahol az elemek több bekezdésből állnak.
  Mindegyik elem (figyelem: nem mindegyik bekezdés) előtt egy sorszámnak kell
  szerepelnie.</p>

<ol>
  <li>
    <p>Ez az első elem.  Ennek csak egy bekezdése van.</p>
  </li>

  <li>
    <p>Ez a második elem első bekezdése.</p>

    <p>Ez a második elem második bekezdése.</p>
  </li>

  <li>
    <p>Ez az első és egyetlen bekezdés a harmadik elemben.</p>
  </li>
</ol>

Példa 4-7. Definíciós felsorolások a <dl> elemmel

A használat módja:

<dl>
  <dt>Első fogalom</dt>

  <dd>
    <p>Az első fogalom meghatározásának első bekezdése.</p>

    <p>Az első fogalom meghatározásának második bekezdése.</p>
  </dd>

  <dt>Második fogalom</dt>

  <dd>
    <p>A második fogalom meghatározásának első bekezdése.</p>
  </dd>

  <dt>Harmadik fogalom</dt>

  <dd>
    <p>A harmadik fogalom meghatározásának első bekezdése.</p>
  </dd>
</dl>

Példa 4-8. A <pre> elem

A <pre> elem például remekül alkalmas e-mailek jelölésére:

<pre>  From: Gabor PALI &lt;[email protected]&gt;
  To: [email protected]
  Subject: Uj FreeBSD-cikk forditas: Naplozo UFS hasznalata asztali szamitogepeken

  Kedves listatagok!


    Nemreg elkeszitettem az ``Implementing UFS Journaling on a Desktop
  PC'' neven szerepelo [1] FreeBSD-cikk magyar forditasat [2].
  Szeretnek megkerni mindenkit, akit erdekel a honositott valtozat,
  hogy olvassa el, nezze at, betatesztelje es mondjon rola velemenyt.
  Egyelore meg csak a sajat Perforce repositorynkbol erheto el, de a
  megadott linken naponta egyszer automatikusan frissul a HTML valtozat
  a feltoltott valtoztatasok (peldaul hibajavitasok) fuggvenyeben.
  Elore is nagyon szepen koszonom mindenkinek a segitseget!

  :g

  [1] http://www.freebsd.org/doc/en/articles/gjournal-desktop/
  [2] http://people.freebsd.org/~pgj/gjournal-desktop_hu/</pre>

Hasznos azonban tudnunk, hogy a < és & jelek a formázott szövegben továbbra is speciális jelentéssel bírnak. A példában ezért is használtunk &lt; egyedeket a < jelek helyett. Ugyanezért a &gt; a > helyén is látható. Ezért mindig körültekintően bánjunk a nyers szövegből, például e-mailből vagy forráskódból bemásolt részletekkel, és ne felejtsük el átalakítani a bennük található speciális karaktereket.

Példa 4-9. A <table> egyszerű használata

A használat módja:

<p>Ez egy 2x2-es táblázat.</p>

<table>
  <tr>
    <td>Bal felső cella</td>

    <td>Jobb felső cella</td>
  </tr>

  <tr>
    <td>Bal alsó cella</td>

    <td>Jobb alsó cella</td>
  </tr>
</table>

Példa 4-10. A rowspan tulajdonság

A használat módja:

<p>Egy magas keskeny cella a bal oldalon, mellette jobbra
  két rövid cella.</p>

<table>
  <tr>
    <td rowspan="2">Hosszú és keskeny</td>
  </tr>

  <tr>
    <td>Felső cella</td>

    <td>Alsó cella</td>
  </tr>
</table>

Példa 4-11. A colspan tulajdonság

A használat módja:

<p>Felül egy hosszú cella, alatt két rövidebb cella.</p>

<table>
  <tr>
    <td colspan="2">Felső cella</td>
  </tr>

  <tr>
    <td>Bal alsó cella</td>

    <td>Jobb alsó cella</td>
  </tr>
</table>

Példa 4-12. A rowspan és colspan tulajdonságok együttes használata

A használat módja:

<p>Egy 3x3-as rácson a bal felső blokk 2x2 egymásba olvasztott
  cellából áll.  A többi cella normális.</p>

<table>
  <tr>
    <td colspan="2" rowspan="2">Bal felső nagy cella</td>

    <td>Jobb felső cella</td>
  </tr>

  <tr>
    <!-- Mivel a bal oldalon levő nagy cella beleolvad az első sorba,
         az első <td> a jobb oldalán jelenik meg -->

    <td>Jobb középső cella</td>
  </tr>

  <tr>
    <td>Bal alsó cella</td>

    <td>Bal középső cella</td>

    <td>Jobb alsó cella</td>
  </tr>
</table>

Példa 4-13. A <em> és <strong> elemek

A használat módja:

<p><em>Ezt</em> a részt kiemeltük, miközben <strong>ezt</strong> részt
  erősebben kiemeltük.</p>

Példa 4-14. A <b> és <i> elemek

<p><b>Ez</b> félkövér, <i>ez</i> pedig dőlt.</p>

Példa 4-15. A <tt> elem

A használat módja:

<p>Ezt a dokumentumot eredetileg Páli Gábor fordította,
  és a következő címen érhető el: <tt>[email protected]</tt>.</p>

Példa 4-16. A <big>, <small> és a <font> elemek

A következő kódrészleteknek ugyanaz a hatása.

<p>Ez a szöveg <small>valamivel kisebb</small>.  Ez a
  a szöveg viszont <big>valamivel nagyobb</big>.</p>

<p>Ez a szöveg <font size="-1">valamivel kisebb</font>.  Ez a
  szöveg viszont <font size="+1">valamivel nagyobb</font>.</p>

<p>Ez a szöveg <font size="2">valamivel kisebb</font>.  Ez a
  szöveg viszont <font size="4">valamivel nagyobb</font>.</p>

Példa 4-17. Az <a href="..."> elem

A használat módja:

<p>Erre vonatkozóan részletesebb információkat a
  <a href="http://www.FreeBSD.org/">FreeBSD honlapján</a> találhatunk.</p>

Példa 4-18. Az <a name="..."> elem

A használat módja:

<p><a name="bekezd1">Ez</a> a bekezdés a hivatkozásokban a <tt>bekezd1</tt>
  névvel érhető el.</p>

Példa 4-19. Egy másik dokumentum nevesített részének elérése

Tételezzük fel, hogy a bekezd1 példánk az ize.html állományban található.

<p>A témáról további információkat az <tt>ize.html</tt>
  <a href="ize.html#bekezd1">első bekezdésében</a> találhatunk.</p>

Példa 4-20. Ugyanazon dokumentum nevesített részének elérése

Tételezzük fel, hogy a bekezd1 példa ugyanezen a dokumentumon belül helyezkedik el:

<p>A témáról további információkat az
  <a href="#bekezd1">első bekezdésben</a> találhatunk.</p>