Típus: block elem.

Az első leggyakrabban használt elem a p, melynek jelentése paragraph. Ez az elem szövegek írásánál használatos, egy bekezdést jelent. Írhatunk a p és a /p tag közé bármekkora szöveget, tehetünk képet, videót, formázhatjuk a szöveget, stb.

    
        <p>
            Ide írhatunk bármekkora szöveget, tehetünk képet, linket, stb.
        </p>

    
            

Amit egy p tagon belül nem tehetünk, az egy másik blokk típusú elem, mint pl. a p, div, h1, ezekről később bővebben.

Típus: block elem.

Ez az elem bármilyen más elem írásánál használatos, egy új sort jelent a forráskódban, ami azt jelenti, hogy a benne levő elemek mindenképp a következő sorban kezdődjenek. Írhatunk a div és a /div tag közé bármekkora szöveget, tehetünk bármilyen elemet, videót, formázhatjuk a szöveget, stb.

    
        <div>
            Ide tehetünk bármilyen elemet, amit csak szeretnék, képet, szöveget, videót, listát, stb.
        </div>

    
            

Típus: inline elem.

A label elem egy szövegmegjelenítő elem, melyet címkeként szoktak használni más mezők mellett, pl. egy bepipálható kis négyzet (checkbox) mellett, vagy egy szövegmező mellett. Használata:

    
        <label>Wannacode.com</label>

    
            

Van egy fontos tulajdonsága, amit akkor szoktunk beállítani amikor címkeként használjuk, ez a for, mellyel be tudjuk állítani, hogy melyik elemnek a cimkéje, ez esetben ha rákattintunk a label szövegére, olyan lesz, mintha az adott elemre kattintottunk volna. Ehhez a "for" tulajdonságnak meg kell adjuk az adott elem id-jét az alábbi módon:
 

    
        <input type="checkbox" id="test_checkbox_1" />
        <label for="test_checkbox_1">Wannacode.com</label>

    
            

Típus: inline elem.

Szintén szövegmegjelenítő elem, bár inkább akkor szokás használni, amikor egy szövegben ki akarunk emelni egy másikat, pl. amikor a Wannacode.com szövegben a .com-t szeretnénk másképp írni, kisebb betűvel, más színnel, más betűtípussal, stb.

Használata egyszerű:

    
        <span>Wannacode.com</span>

        // vagy

        <label>
            Wannacode.<span>com</span>
        </label>

        // vagy

        <p>
            Wannacode.<span>com</span>
        </p>

        // vagy

        <a>
            Wannacode.<span>com</span>
        </a>

    
            

Típus: inline elem.

Ez az elem egy hivatkozás (link) megjelenítő elem, melynek a szerepe az, hogy ha rákattintunk a szövegre, akkor a böngészőnk elvigyen a weboldalon belül egy másik oldalra, vagy egy teljesen új weboldalra is akár.
Egy db. kötelező tulajdonsága van, a href, melynek az értéke kell legyen az új cím ahova szeretnénk hogy átirányitson kattintás esetén. Üresen hagyás esetén az oldal újratöltödik.

Ez egy link, amelyre kattintva az oldal újratöltődik, mert nem írtam semmit a href-be

    
        <a href="Ide jön a cím, pl: http://www.wannacode.com">
            Hivatkozáshoz megjelenítendő szöveg amire kattintsunk
        </a>

    
            

A hivatkozások esetében még van egy fontos tulajdonság, a target, ennek segítségével állíthatjuk be, hogy az új cím amerre megyünk új ablakban nyiljon meg vagy az aktuális ablakban. Értékei lehetnek: _blank (új ablakban), _parent (a szülő ablakában), _self (aktuális ablakban, ez az alap), _top.

    
        <a href="" target="_blank">
            Hivatkozáshoz megjelenítendő szöveg amire kattintsunk
        </a>

    
            

Típus: block elem.

Ezek cím megjelenítő elemek. típusúk blokk elem.

Ilyen elemek közé szokták írni az oldalakon megjelenő címeket, mert ezek az elemek alapból rendelkeznek bizonyos tulajdonságokkal: különböző betű méret, vastagított betű, az előtte és utána levő elemek közötti távolság tartás. stb.

A h1 elem a legfontosabb a 6 közül, ezért ez rendelkezik a legnagyobb betűmérettel, távolsággal, stb. a h6 pedig a legkisebbel.

Használata egyszerű:

    
        <h1>Wannacode.com</h1>

        // vagy

        <h2>Wannacode.com</h2>

        // vagy

        <h3>Wannacode.com</h3>

        // vagy

        <h6>Wannacode.com</h6>

    
            

Az eredmény pedig itt látható:

H1: Wannacode.com

H2: Wannacode.com

H3: Wannacode.com

H4: Wannacode.com

H5: Wannacode.com

H6: Wannacode.com

Típus: inline elem.

Ez az elem egy multifunkciós elem, a szerepe, hogy az oldalon megjelenítsünk szövegmezőt, bepipálható négyzetet (checkbox), vagy kiválasztható gombokat (radio).

Ennek az elemnek nincs záró párja. Egy kötelező tulajdonsága van, a type, ennek segítségével mondhatjuk meg, hogy milyen elemet szeretnénk kirakni. Értékei lehetnek: text (szövegmező), checkbox (bepipálható négyzet), radio (kiválasztható gomb), button (gomb), image (egy kép), file (fájl kiválasztó). Kép esetében még fontos megadni az src tulajdonság értékét, amely a képhez vezető címet kell tartalmazza, text, checkbox, button és radio esetében a value-t. Gomb esetében a value értéke jelenik meg a gombbon, szövegmező esetében az lesz beírva a szövegmezőbe.

Szövegmező:

Checkbox:

Radio:

Gomb:

    
        // Szövegmező
        <input type="text" value="ez egy szövegdoboz" />

        // Bepipálható négyzet
        <input type="checkbox" value="1" />

        // kiválasztható gomb
        <input type="radio" value="1" />

        // Gomb
        <input type="button" value="Ez egy gomb" />

    
            

Típus: inline elem.

Ez az elem egy multifunkciós elem, szerepe hasonló az input elemhez, viszont ez egy nyomógombot jelenít meg, amely lehet egy gomb vagy egy kép.

Ennek az elemnek nincs záró párja. Egy kötelező tulajdonsága van, a type, ennek segítségével mondhatjuk meg, hogy milyen elemet szeretnénk kirakni. Értékei lehetnek: button (gomb), reset, submit (form elküldő), image (kép). Kép esetében még fontos megadni az src tulajdonság értékét, amely a képhez vezető címet kell tartalmazza, egyébként a value-t. Gomb esetében a value értéke jelenik meg a gombbon.

Gomb:Ez egy gomb

Reset:Ez egy reset

Submit:Form elküldő gomb

Image:

    
        // Gomb
        <button type="button">Ez egy gomb</button>

        // Reset
        <button type="reset">Ez egy reset</button>

        // Submit
        <button type="submit">Form elküldő gomb</button>

        // Image
        <input type="image" href="http://www.wannacode.hu/upload/settings/site_logo_mini/images/site_logo_mini_3lGg2onN.png"  />

    
            

Típus: inline elem.

Ennek az elemnek a segítségével megjeleníthetünk az oldalon egy legördülő listát, amelyből kiválaszthatunk egy vagy több elemet. Használata egyszerű: egy select tag-ba annyi option tagot írunk, ahány kiválasztható elemet szeretnénk beletenni. Minden option tagnak meg kell határozni a value tulajdonságát, ez alapján tudjuk, hogy melyik van/volt kiválasztva. A value értéke lehet bármi: szám, szöveg, stb.

    
        <select>
            <option value="">Választható szöveg 1</option>
            <option value="1">Választható szöveg 2</option>
            <option value="2">Választható szöveg 3</option>
            <option value="3">Választható szöveg 4</option>
        </select>

    
            

Típus: inline elem.

Ennek az elemnek a segítségével megjeleníthetünk egy szövegdobozt, amelybe akármekkora szöveget írhatunk. Két fontos tulajdonsága van, hogy hány sornyi és hány karakternyi helyet foglaljon el. Ezeket a rows és a cols tulajdonságok segítségével állíthatjuk be. Szövegdoboz esetén a szöveget nem a value tulajdonságban kell megadni, hanem a nyitó és a záró tag között.

    
        <textarea rows="4" cols="20">Ide jön a szöveg</textarea>

    
            

Típus: inline elem.

Ennek az elemnek a segítségével megjeleníthetünk egy képet akár az oldalunkról, akár egy másik weboldalról.

Egy fontos tulajdonsága van, az src melynek az értéke egy linket kell tartalmazzon, a megjelenítendő kép elérési útvonalát, pl: http://www.wannacode.hu/upload/settings/site_logo_mini/images/site_logo_mini_3lGg2onN.png. Amennyiben nem jó elérési útat tartalmaz, nem létezik a kép, vagy nem linket tartalmaz, ebben az esetben bizonyos böngészőkben nem jelenik meg semmi, más böngészőkben meg egy üres kocka jelenik meg, amely jelzi, hogy ott egy kép nem jelent meg.

Ezen kívül rendelkezik még egyéb tulajdonságokkal, mint pl:

• width amely a megjelenítés szélességét állítja be, a méretet pixelben, százalékban kell megadni, vagy lehet auto
• height a megjelenítés magasságát állítja be, a méretek ugyanúgy, mint a szélességnél
• border a kép köré húzott keret méretét lehet beállítani vele, alapból 1 vagy 2 px méretűt keretet tesz a böngésző

Használata egyszerű:

    
        <img src="http://www.wannacode.hu/upload/settings/site_logo_mini/images/site_logo_mini_3lGg2onN.png" /img>

    
            

Típus: block elem.

Ezen elemnek segítségével megjeleníthetünk az oldalon egy listát. A különbség a két lista között, hogy az ol az számozott lista (ordered), az ul pedig nem (unordered), ezért pontokkal, kockákkal, stb. kis ikonokkal lehet megjeleníteni.

Mindkét lista esetében a listát jelöljük a megfelelő tagokkal, a benne levő elemeket pedig elemenként egy li (list item) elem tartalmazza.

    
        // UL lista
        <ul>
            <li>Elem 1</li>
            <li>Elem 2</li>
        </ul>

        // OL lista
        <ol>
            <li>Elem 1</li>
            <li>Elem 2</li>
        </ol>

    
            

Típus: block elem.

Ennek az elemnek a szerepe a sortörés (break), az utána következő elemek új sorban való megjelenítése.

HAsználata egyszerű:

    
        <br />

    
            

Típus: inline elem.

Ezen elemek segítségével tudjuk a szövegünket formázni, színt adni, vastag betűvel írni, stb.

A következő lehetőségeink vannak:

• b elem: vastaggal írja az adott szöveget
• strong elem: vastaggal írja az adott szöveget
• i elem: dőlt betűkkel írja az adott szöveget
• u elem: aláhúzva írja az adott szöveget
• font elem: segítségével beállíthatjuk a betűtípust és a színt, ehhez a family vagy a color tulajdonságokat kell beállítanunk

    
        // vastag betű
        <b>vastaggal írja az adott szöveget</b>

        // strong betű
        <strong>vastaggal írja az adott szöveget</strong>

        // dőlt betű
        <i>dőlt betűkkel írja az adott szöveget</i>

        // aláhúzott betűk
        <u>aláhúzott betűkkel írja az adott szöveget</u>

        // formázott betűk
        <font family="Arial" color="#ffffff">fehér színnel és Arial betűtípussal írt szöveg</font>