Blokk elemek

A HTML-ben található elemek közül néhány darab van, amelyeket blokk elemek közé sorolunk, az összes többi elem inline elem.

A blokk elemek abban különböznek az inline elemeketől, hogy a rendelkezésükre álló teljes területet elfoglalják oldalirányban (szélességben), ezért két blokk elem egymás után írva, két külön sorba fog kerülni. Abban az esetben is, amikor egy inline elem után írunk egy blokk elemet, a blokk elem mindenképp új sorban fog megjelenni. Pl:
 

    <h3>Blokk elem 1</h3>
    <h3>Blokk elem 2</h3>


        

A HTML-ben található blokk elemek a következők: h1, h2, h3, h4, h5, h6, p, div, ul, ol

A blokk elemek belsejébe bármilyen más elemet lehet írni, függetlenül attól, hogy a beírt elem blokk elem, vagy inline elem. Pl:

    <h3>
        <label>Wannacode.com</label>
    </h3>

    // vagy

    <div>
        <h3>
            <label>Wannacode.com</label>
            <span>Wannacode.com</span>
            <p>Wannacode.com</p>
        </h3>
    </div>


        

Az elemek egymásba ágyazásának nincs limitálása, akárhány elemet egymásba írhatunk, viszont be kell tartani néhány szabályt amelyet a szabványokkal szabtak meg a W3C szakemberei. Ilyen szabály pl.:

Ez azt jelenti, hogy habár egy div-be szabad a tagot tenni, a tagba nem szabad div-et rakni.

    // ez jó
    <div>
        <a href="">Link</a>
    </div>

    // ez rossz
    <a href="">
        <div>Link</div>
    </a>


        

1. A h1..h6, p, elemek szövegmegjelenítő elemek, fontos különbség köztük csak a betűméret változása.

A h1 elem nagy betű mérettel ír, a h2 kisebb-el és így tovább a h6-ig. Ezeket az elemeket inkább szövegek címénél szoktuk használni, esetleg alcímeknél.

A p elem egy bekezdést (paragraph) jelent, többsoros szövegek megjelenítésére szoktunk alkalmazni.

2. Az ol (ordered list) és ul (unordered list) elemek használata egy felsorolás készítésénél alkalmas amelyben minden sor elé kerül egy kis fekete pont vagy egy számsor. A nyitó és zárótag közé annyi li nyitó és zárótagot rakunk, ahány elemet szeretnénk a listában megjeleníteni, pl:

    <label>Felsorolás pontokkal</label>
    <ul>
        <li>Elem 1</li>
        <li>Elem 2</li>
        <li>Elem 3</li>
    </ul>


        

    <label>Felsorolás számozással</label>
    <ol>
        <li>Elem 1</li>
        <li>Elem 2</li>
        <li>Elem 3</li>
    </ol>


        

3. A div elem lényegében csak 1 sortörést tesz be, ezáltal megmondva, hogy a benne levő tartalom új sorban kezdődjön. Pl. ha egymás mellé teszünk egy inline elemet és egy div blokk elemet, a div tartalma mindenképp újsorban lesz.
 

    <label>Inline elem</label>
    <div>
        Div tartalma következő sorban
    </div>