HTML elemek

Gyökérelem
A html elem az összes többi elem szülője. Ebbe kerül az oldal teljes tartalma.
1
<html>
2
    <!-- Ide kerül az oldal tartalma -->
3
</html>
Copied!
Jellemző, hogy az oldalak nyelvét a html elemen a lang (nyelv) tulajdonsággal határozhatjuk meg.
1
<html lang="hu">
Copied!
HTML dokumentum fejléce
A head a dokumentum fejléce, a dokumentum metaadatait, és egyéb állományokra való hivatkozásokat tartalmaz, ezeket nem jeleníti meg a böngésző vizuálisan (jellemzően ezek általános információk, amit a böngésző program, internetes keresők dolgoznak fel).
1
<html>
2
    <head>
3
        ...
4
    </head>
5
</html>
Copied!
A head elemet közvetlenül a html elemben kell elhelyezni.
HTML elemek a fejlécben
Az oldal címe
A title elemben megadott szöveg azonosítja a HTML dokumentumot, és ez jelenik meg a böngészőablak címsorában. Kötelezően szerepelnie kell a head elemben.
1
<title>Az oldal címe</title>
Copied!
A title fontos azonosítója az adott oldalnak, az internetes keresők ezt jelenítik meg kiemelve a találati listájukban. Ha lementünk a böngészőnkbe, vagy a számítógépünkre egy weboldal linket, a title alapján jön létre a mentett link neve.
Az oldal meta adatai
A meta elemben helyezhetünk el információkat a weboldalunkról (ez nem jelenik meg a látható tartalomban). A meta elemeknek egy name (név) és egy content (tartalom) tulajdonsága van. A name határozza meg a meta információ típusát, a content pedig a hozzá rendelt információt.
1
<meta name="description" content="Oldal rövid leírása">
Copied!
Kivétel a charset amivel az oldal karakter kódolását határozhatjuk meg, ez csak egy charset tulajdonsággal rendelkezik.
1
<meta charset="UTF-8">
Copied!
Példák meta információra:
meta name
Leírás
description
Rövid leírás az oldalról
keywords
Az oldalhoz kapcsolódó kulcsszavak
author
Az oldal szerzője
viewport
Utasítás a böngészőnek az oldal megjelenítésének módjáról
1
<meta name="description" content="Oldal rövid leírása">
2
<meta name="keywords" content="Kulcsszavak, vesszővel, elválasztva">
3
<meta name="author" content="Szerző Krisztina">
4
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Copied!
Linkek
A link elemmel hivatkozhatunk külső állományokra, ezek egy részét be fogja tölteni a böngésző. A link elemmel köthetünk be például egy CSS állományt a dokumentumunkba.
1
<link rel="shortcut icon" type="image/png" href="favicon.ico" />
2
<link rel="stylesheet" type="text/css" href="style.css" />
Copied!
Stílus
A style elemben a HTML dokumentum megjelenését szabályozó CSS stílusokat helyezhetünk el. A style nyitó és záró eleme által közrefogott részen a CSS nyelv szabályai érvényesek.
1
<style>
2
    p {
3
        color: red;
4
    }
5
</style>
Copied!
HTML dokumentum törzse
A body a dokumentum törzse, ezt jeleníti meg a böngésző vizuálisan, ennek az elemnek a gyermeke az összes böngészőben megjelenő elem. A body elemet közvetlenül a html elemben a head elem után kell elhelyezni.
1
<html>
2
    <head>
3
        ...
4
    </head>
5
    <body>
6
        ...
7
    </body>    
8
</html>
Copied!
Szöveges elemek
Címek
A HTML dokumentum tartalmát 6 cím mélységig lehet fejezetekre, alfejezetekre bontani, ezt a h1 h2 h3 h4 h5 h6 elemekkel tehetjük meg.
1
<h1>1-es cím</h1>
2
<h2>2-es cím</h2>
3
<h3>3-as cím</h3>
4
<h4>4-es cím</h4>
5
<h5>5-ös cím</h5>
6
<h6>6-os cím</h6>
Copied!
Bekezdések
Az oldal szöveges tartalmát bekezdésekben p helyezhetjük el.
1
<p>Lorem ipsum dolor sit amet, consectetur 
2
adipiscing elit. Praesent et ligula magna. 
3
Aliquam vestibulum fringilla tincidunt. 
4
Etiam in leo mi. Nunc magna quam, 
5
consectetur eget elit in, cursus lacinia 
6
justo. Aenean condimentum suscipit lectus 
7
sit amet pharetra. Maecenas varius ac 
8
libero nec varius. Praesent aliquam 
9
tincidunt tortor, nec imperdiet nisi 
10
pharetra a.</p>
Copied!
Listák
Két típusát különböztetjük meg, számozott lista ol, és pontozott lista ul, mindkettőnek gyermekei a lista elemek li.
Számozott lista:
1
<ol>
2
    <li>Ez egy lista elem</li>
3
    <li>Ez is egy lista elem</li>
4
    <li>És ez is</li>
5
</ol>
Copied!
Pontozott lista:
1
<ul>
2
    <li>Ez egy lista elem</li>
3
    <li>Ez is egy lista elem</li>
4
    <li>És ez is</li>
5
</ul>
Copied!
A listákat egymásba is lehet ágyazni, így lehet több szintű listákat létrehozni.
1
<ol>
2
    <li>Ez egy lista elem</li>
3
    <li>Ez is egy lista elem</li>
4
    <li>És ez is, de ennek vannak gyermekei
5
        <ul>
6
            <li>Ez egy lista elem</li>
7
            <li>Ez is egy lista elem</li>
8
            <li>És ez is</li>
9
        </ul>
10
    </li>
11
</ol>
Copied!
​ Kódpélda​
Képek
Képeket a HTML dokumentumba az img (kép) elem segítségével tudunk beilleszteni. Két kötelező tulajdonsága van, az src (forrás), ami a behivatkozott kép elérési útvonala, és az alt (alternatív szöveg), a kép tartalmának szöveges leirata.
1
<img src="images/kutya.jpg" alt="6 hetes alvó labradorkölyök">
Copied!
Ha a képünk csak dekorációs célokat szolgál, és nem kapcsolódik szorosan a dokumentum szöveges tartalmához, akkor is kötelező az alt tulajdonság, de üresen hagyhatjuk az értékét.
1
<img src="page-decoration.png" alt="">
Copied!
A képeket a böngésző megpróbálja eredeti méretükben megjeleníteni, amennyiben a megfelelő ablakméret rendelkezésre áll. A width (szélesség) és a height (magasság) tulajdonságokkal ezt felülbírálhatjuk. Ha csak az egyik értéket adjuk meg a böngésző az oldalarányok megtartásával számolja ki a másikat. Az értékek pixelben értendőek.
1
<img
2
    src="puppy.png"
3
    width="360"
4
    height="240"
5
    alt="3 hónapos labradorkölyök"
6
>
Copied!
Fontos kitölteni a képek alternatív leírását, mert ha a kép nem tud betöltődni ez a szöveg fog megjelenni a felhasználóknak, illetve a gyengén látó felhasználók csak ezt "látják", ezt olvassa fel nekik a szövegfelolvasó programjuk. Az internetes keresők (a szövegkörnyezet mellett) az alt tulajdonság alapján kategorizálják be a honlapokon található képeket (ennek hiányában nem fog megjelenni a kép a képkeresőkben).
Szövegközi elemek
A HTML elemekben lévő szöveget szövegközi (inline) elemekkel módosíthatjuk. A szövegközi elemek teljes szöveges blokkok, vagy szövegrészletek megjelenését, viselkedését módosítják.
1
<p>A <strong>Web</strong> alapelveit <em>Tim Berners-Lee</em>, a
2
CERN részecskefizikai kutatóközpont munkatársa dolgozta ki
3
1989-ben. Eredeti  célja a különböző intézményekben világszerte 
4
dolgozó kutatók közötti  automatizált <em>információmegosztás</em> 
5
volt.</p>
Copied!
A fenti példakódban a bekezdés egyes szakaszai fontosként (<strong>), vagy hangsúlyosként (<em>) vannak megjelölve.
E helyen fontos megjegyezni a szövegközi elemekkel kapcsolatos korlátozást, hogy szövegközi (inline) elemben nem lehet elhelyezni blokkos (block) elemet, az elemek e módon történő egymásba ágyazása nem szabványos. Például egy b elembe nem kerülhet bekezdés elem (p). Ennek a fejezetnek a végén az itt felsorolt elemek listájában megtaláljuk, hogy mely elemek rendelkeznek blokkos, vagy szövegközi megjelenítési móddal.
elem
leírás
b
Vastagon szedett szöveg, szemantikus jelentése nincs.
strong
Fontos szövegrészlet, vastagon jelenik meg.
i
Dőlt betűs szöveg, szemantikus jelentése nincs.
em
Hangsúlyos szöveg, dőlt betűvel jelenik meg.
mark
Megjelölt szöveg, sárga háttérrel jelenik meg
1
<p>
2
    <b>Vastagon szedett szöveg</b> <br>
3
    <strong>Fontos szöveg</strong> <br>
4
    <i>Dőlt betűs szöveg</i> <br>
5
    <em>Hangsúlyos szöveg</em> <br>
6
    <mark>Kiemelt szöveg</mark>
7
</p>
Copied!
elem
leírás
small
Csökkenti a font méretet.
time
Időt, dátumot jeleníthetünk meg vele.
sup
Felső index, megemeli a szöveget
sub
Alsó index, lesüllyeszti a szöveget
s
Elavult információt jelöl, vonallal áthúzva jelenik meg.
1
<p>
2
    <small>Kis méretű szöveg</small> <br>
3
    <time>20:00</time> <br>
4
    E=mc<sup>2</sup> <br>
5
    H<sub>2</sub>O <br>
6
    <s>Elavult imformáció</s>
7
</p>
Copied!
Egyes szövegközi elemek csak vizuális hatást érnek el, egyes elemek jelentésbeni külömbséget is hordoznak. Például a strong elemben található szöveget nagyobb súllyal veszi figyelembe a Google kereső, vagy az em elemben lévő szöveget más hangsúllyal ejtik ki a szövegfelolvasó programok. Ezek az elemek elsősorban a webalkalmazás szövegét feldolgozó programoknak szolgáltatnak fontos információkat.
​Kódpélda​
Hiperlink
A hiperlinkek, vagy linkek kattinthatóvá teszik a bennük foglalt szöveget. Linket az a elemmel lehet létrehozni. Van egy kötelező tulajdonsága a href ami azt a címet tartalmazza, amit a böngésző be fog tölteni kattintás esetén. Ez a cím lehet egy másik HTML dokumentum vagy egyéb állomány, internetes cím (URL), vagy e-mail cím.
1
<p>Ebben a szövegben egy szó <a href="document.html">kattintható</a>,
2
rákattintva a böngésző betölt egy másik HTML dokumentumot.</p>
Copied!
A linkek módosítják a szöveg megjelenését is, a böngésző kék szövegszínnel, és aláhúzva jeleníti meg a kattintható szöveget, így könnyű a linkeket felismerni.
Span
Van egy szövegközi elem, ami nem hordoz jelentéstartalmat, és nem módosítja a bele foglalt szöveget vizuálisan, ez a span elem (szabad fordításban dirib-darab).
1
<p>Ebben a szövegben van egy <span>szakasz</span>, aminek 
2
nem módosul a kinézete, és a szemantikai jelentése</p>
Copied!
Felmerül a kérdés, hogy mi az értelme egy elemnek, ami nem ad jelentést konteksztustól függően, és megjelenésben sem okoz érzékelhető változást. Több okból is előnyös lehet: segíti a dokumentum tartalmának strukturálását, illetve CSS segítségével módosíthatjuk a megjelenését.
Dekorációs elemek
Sortörés
A br (sortörés) elem új sorba töri a szöveget, amiben elhelyezzük, úgy hogy a br elem után következő szöveg már új sorba törik.
1
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
2
Donec facilisis sit amet nisi nec mattis.</p>
Copied!
Vízszintes vonal
A hr (vízszintes vonal) elem egy vízszintes vonalat hoz létre. Célja a tartalom tagolása.
1
<hr>
Copied!
Strukturális elemek
Általános konténer elem
A div (csoport, rész) elemmel hozhatunk létre általános gyűjtőelemeket, úgynevezett konténereket. A div nem hordoz semmilyen jelentéstartalmat, és a megjelenése is teljesen semleges, hasonlóan a korábban tárgyalt span elemhez, csak amíg a span szövegközi elem, addig a div blokkos elem.
Ezzel az elemmel foghatunk össze egy csoportba több elemet (ha úgy tetszik részekre bonthatjuk div elemekkel egy oldal tartalmát). A div-ekben bármilyen tartalom típusú elemet elhelyezhetünk, például címeket, szöveget, listákat, képet, linket, más div-eket, vagy egyéb strukturális elemeket.
1
<div>
2
    <!-- Ide kerülnek azok az elemek, amiket össze kell fogni egy csoportba -->
3
</div>
Copied!
A div szemantikus variációi
A HTML korábbi verzióiban a div elemet ruháztuk fel szerepekkel a role (szerep) tulajdonság segítségével, ez a lehetőség most is megvan, de megjelentek a HTML5-ben új elemek amik kiváltják ezt az igényt.
Navigáció
A nav elem kifejezetten egy weboldalon belüli (aloldalak közötti) navigációra szolgál, így linkeket helyezhetünk el benne.
1
<nav>
2
    <a href="/homepage">Home</a>
3
    <a href="/contact">Contact</a>
4
</nav>
Copied!
Bonyolultabb navigáció, például egy weboldal főmenüje esetében a linkeket lista elemekben csoportosíthatjuk a nav elemen belül.
1
<nav>
2
    <ul>
3
        <li><a href="/homepage">Home</a></li>
4
        <li><a href="/products">Products</a></li>
5
        <li><a href="/blog">Blog</a></li>
6
        <li><a href="/about">About us</a></li>
7
        <li><a href="/contact">Contact us</a></li>
8
    </ul>
9
</nav>
Copied!
A menü linkek listába helyezése lehetővé teszi több szintű almenü struktúra létrehozását.
1
<nav>
2
    <ul>
3
        <li><a href="/homepage">Home</a></li>
4
        <li><a href="/products">Products</a>
5
            <ul>
6
                <li><a href="/products/books">Books</a></li>
7
                <li><a href="/products/magazines">Magazines</a></li>
8
                <li><a href="/products/comic">Comic</a></li>
9
                <li><a href="/products/albums">Albums</a></li>
10
                <li><a href="/products/guides">Pocket guides</a></li>
11
            </ul>
12
        </li>
13
        <li><a href="/contact">Contact us</a></li>
14
    </ul>
15
</nav>
Copied!
Fejléc elem
A header elem használható egy weboldal fejléceként (ebbe kerül például az oldal logója, főmenüje), vagy kisebb tartalmi egységek fejléceként is szolgálhat. Nem összekeverendő a head elemmel!
Fő tartalmi egység
A main elembe kerül a lényegi tartalom egy oldalon, minden ami nem a tartalommal közvetlenül kapcsolatos (például navigáció), az ezen az elemen kívül helyezendő el. Egy HTML dokumentumban csak egy main elem helyezhető el.
Másodlagos tartalom
Másodlagos, a fő tartalomhoz csak kapcsolódó tartalmaz az aside elemben helyezhetünk el. Jellemző, hogy a weboldalak oldalsávjait (sidebar) aside elemekből építjük.
Lábléc elem
A footer elem a header elem párja, értelemszerűen vizuálisan a dokumentum (vagy a dokumentum egy alegységének) alján alkalmazandó.
Szekció
Egy nagyobb szerkezeti egységet tagolhatunk a section elemekkel kisebb egységekre.
Cikk
Az article egy nagyobb összefüggő szöveges tartalmi egység. Egy ilyen tartalmi egység lehet egy blogbejegyzés, hír, recept, fórum hozzászólás, közlemény... Egy HTML dokumentumban több article is lehet.
Űrlapok
Az űrlap elem
Űrlapokat a form elemmel hozhatunk létre, az összes kitölthető űrlap mező (pár kivételtől eltekintve) ebben az elemben helyezendő el. A form elem képes a tartalmát elküldeni a webszervernek.
1
<form>
2
    ...
3
</form>
Copied!
A beviteli elem
Az űrlap mezőit az input (beviteli mező) elemmel hozhatjuk létre. Az input elem viselkedését, kinézetét meghatározza a type (típus) tulajdonsága.
1
<form>
2
    <input id="name" type="text" placeholder="Your name">
3
</form>
Copied!
1
<form>
2
    <label>Szövegbeviteli mező</label> <input type="text"> <br>
3
    <label>E-mail</label> <input type="email"> <br>
4
    <label>Jelszó</label> <input type="password"> <br>
5
    <label>Állomány feltöltés</label> <input type="file"> <br>
6
    <label>Rádiógomb</label> <input type="radio"> <br>
7
    <label>Jelölőnégyzet</label> <input type="checkbox"> <br>
8
    <label>Gomb</label> <input type="button" value="Elküldés">
9
</form>
Copied!
Címke elem
Az űrlap beviteli mezőit a label elem látja el feliratokkal. A label elem for tulajdonságában megadott egyedi azonosító összeköti a label-t az azonosítóval ellátott beviteli mezővel. Ekkor ha a címkére kattintunk, a kurzor automatikusan beáll a beviteli mezőbe.
1
<form>
2
    <label for="name">Your Name</label>
3
    <input id="name" type="text">
4
</form>
Copied!
Ez a kötés létrejön akkor is, ha a beviteli mező a label gyermeke:
1
<form>
2
    <label>
3
        Your Name
4
        <input id="name" type="text">
5
    </label>
6
</form>
Copied!
Szövegdoboz
A textarea hasonló a szöveges beviteli mezőhöz, csak ez egy több soros, és átméretezhető beviteli eszköz.
A rows és cols (sorok és oszlopok) tulajdonságaival meghatározhatjuk a kiinduló méretét is.
1
<form>
2
    <textarea rows="4" cols="50"></textarea>
3
</form>
Copied!
Lenyíló lista
A select elem option elemeket tartalmaz, ezek a lenyíló lista választható opciói.
Az option elemek közül az lesz az alapértelmezett, amelyik rendelkezik a kiválasztott (selected) tulajdonsággal.
1
<select>
2
    <option selected>Almafa</option>
3
    <option>Körtefa</option>
4
    <option>Barackfa</option>
5
</select>
Copied!
Táblázatok
Táblázat
A table elem a táblázat szülőeleme, a sorokat a tr elemek képzik, az oszlopokat, vagy cellákat a td elemek.
1
<table>
2
    <tr>
3
        <td>Első sor, első oszlop</td>
4
        <td>Első sor, második oszlop</td>
5
        <td>Első sor, harmadik oszlop</td>
6
    </tr>
7
    <tr>
8
        <td>Második sor, első oszlop</td>
9
        <td>Második sor, második oszlop</td>
10
        <td>Második sor, harmadik oszlop</td>
11
    </tr>
12
</table>
Copied!
Minden sorban egyező számú oszlopot kell elhelyezni.
Táblázat fejléc
Táblázat cella helyett lehet táblázat fejléc cellát alkalmazni, ez a th elem. A táblázat fejléc cellában lévő tartalom vizuálisan hangsúlyosabban jelenik meg.
1
<!-- Fejléc cellák vízszintesen. -->
2
<table>
3
    <tr>
4
        <th>Fejléc</th>
5
        <th>Fejléc</th>
6
        <th>Fejléc</th>
7
    </tr>
8
    <tr>
9
        <td>Cella</td>
10
        <td>Cella</td>
11
        <td>Cella</td>
12
    </tr>
13
</table>
14
​
15
​
16
<!-- Fejléc cellák függőlegesen. -->
17
<table>
18
    <tr>
19
        <th>Fejléc</th>
20
        <td>Cella</td>
21
        <td>Cella</td>
22
    </tr>
23
    <tr>
24
        <th>Fejléc</th>
25
        <td>Cella</td>
26
        <td>Cella</td>
27
    </tr>
28
</table>
Copied!
Elavult elemek

Az idők során az újabb és újabb HTML verziókban számos korábbi elem került kivezetésre. Jellemzően ennek az oka, hogy a JavaScript, és a CSS átvett bizonyos HTML funkciókat, például a center elem korábban középre rendezte a szöveget, ezt mostmár CSS segítségével végezzük el, hasonló a frame vagy keret, amivel görgethető felületeket lehetett kialakítani az oldalakon.

Példák elavult elemekre: acronim, applet, basefont, big, center, dir, font, frame, frameset, isindex, layer, menu
Felsorolt elemek listája
Elem
Hosszú név
Megjelenítési mód
html
Root element
block
head
Document header
none
title
Title
none
meta
Metadata
none
link
Link
none
style
Style information
none
body
Document body
block
h1 h2 h3 h4 h5 h6
Heading
block
p
Paragraph
block
ul
Unordered list
block
ol
Ordered list
block
li
List item
list-item
a
Hiperlink
inline
img
Image
inline
b
Bold
inline
strong
Strong
inline
i
Italic
inline
em
Emphasis
inline
small
Small text
inline
time
Time
inline
sup
Superscript
inline
sub
Subscript
inline
s
Strikethrough
inline
span
Span
inline
br
Break line
inline
hr
Horisontal line
block
div
Division
block
nav
Navigation
block
header
Header
block
main
Main content
block
aside
Aside
block
footer
Footer
block
section
Section
block
article
Article
block
form
Form
block
input
Input field
inline-block
textarea
Text area
inline-block
button
Button
inline-block
label
Label
inline
table
Table
table
tr
Table row
table-row
td
Table cell
table-cell
th
Table cell header
table-cell
HTML - Previous
HTML állomány felépítése
Next - HTML
HTML hibák, és javításuk
Last modified 1yr ago