HTML elemek

A HTML elemek a weboldalak, és webes alkalmazások építőelemei, ebben a fejezetben ezekből az építőkockákból ismerhetjük meg a legfontosabbakat:

Gyökérelem

A html elem az összes többi elem szülője. Ebbe kerül az oldal teljes tartalma.

<html>
    <!-- Ide kerül az oldal tartalma -->
</html>

Jellemző, hogy az oldalak nyelvét a html elemen a lang (nyelv) tulajdonsággal határozhatjuk meg.

<html lang="hu">

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).

<html>
    <head>
        ...
    </head>
</html>

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.

<title>Az oldal címe</title>

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.

<meta name="description" content="Oldal rövid leírása">

Kivétel a charset amivel az oldal karakter kódolását határozhatjuk meg, ez csak egy charset tulajdonsággal rendelkezik.

<meta charset="UTF-8">

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

<meta name="description" content="Oldal rövid leírása">
<meta name="keywords" content="Kulcsszavak, vesszővel, elválasztva">
<meta name="author" content="Szerző Krisztina">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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.

<link rel="shortcut icon" type="image/png" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />

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.

<style>
    p {
        color: red;
    }
</style>

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.

<html>
    <head>
        ...
    </head>
    <body>
        ...
    </body>    
</html>

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.

<h1>1-es cím</h1>
<h2>2-es cím</h2>
<h3>3-as cím</h3>
<h4>4-es cím</h4>
<h5>5-ös cím</h5>
<h6>6-os cím</h6>

Bekezdések

Az oldal szöveges tartalmát bekezdésekben p helyezhetjük el.

<p>Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Praesent et ligula magna. 
Aliquam vestibulum fringilla tincidunt. 
Etiam in leo mi. Nunc magna quam, 
consectetur eget elit in, cursus lacinia 
justo. Aenean condimentum suscipit lectus 
sit amet pharetra. Maecenas varius ac 
libero nec varius. Praesent aliquam 
tincidunt tortor, nec imperdiet nisi 
pharetra a.</p>

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:

<ol>
    <li>Ez egy lista elem</li>
    <li>Ez is egy lista elem</li>
    <li>És ez is</li>
</ol>

Pontozott lista:

<ul>
    <li>Ez egy lista elem</li>
    <li>Ez is egy lista elem</li>
    <li>És ez is</li>
</ul>

A listákat egymásba is lehet ágyazni, így lehet több szintű listákat létrehozni.

<ol>
    <li>Ez egy lista elem</li>
    <li>Ez is egy lista elem</li>
    <li>És ez is, de ennek vannak gyermekei
        <ul>
            <li>Ez egy lista elem</li>
            <li>Ez is egy lista elem</li>
            <li>És ez is</li>
        </ul>
    </li>
</ol>

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.

<img src="images/kutya.jpg" alt="6 hetes alvó labradorkölyök">

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.

<img src="page-decoration.png" alt="">

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.

<img
    src="puppy.png"
    width="360"
    height="240"
    alt="3 hónapos labradorkölyök"
>

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.

<p>A <strong>Web</strong> alapelveit <em>Tim Berners-Lee</em>, a
CERN részecskefizikai kutatóközpont munkatársa dolgozta ki
1989-ben. Eredeti  célja a különböző intézményekben világszerte 
dolgozó kutatók közötti  automatizált <em>információmegosztás</em> 
volt.</p>

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

<p>
    <b>Vastagon szedett szöveg</b> <br>
    <strong>Fontos szöveg</strong> <br>
    <i>Dőlt betűs szöveg</i> <br>
    <em>Hangsúlyos szöveg</em> <br>
    <mark>Kiemelt szöveg</mark>
</p>

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.

<p>
    <small>Kis méretű szöveg</small> <br>
    <time>20:00</time> <br>
    E=mc<sup>2</sup> <br>
    H<sub>2</sub>O <br>
    <s>Elavult imformáció</s>
</p>

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.

<p>Ebben a szövegben egy szó <a href="document.html">kattintható</a>,
rákattintva a böngésző betölt egy másik HTML dokumentumot.</p>

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).

<p>Ebben a szövegben van egy <span>szakasz</span>, aminek 
nem módosul a kinézete, és a szemantikai jelentése</p>

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.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Donec facilisis sit amet nisi nec mattis.</p>

Vízszintes vonal

A hr (vízszintes vonal) elem egy vízszintes vonalat hoz létre. Célja a tartalom tagolása.

<hr>

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.

<div>
    <!-- Ide kerülnek azok az elemek, amiket össze kell fogni egy csoportba -->
</div>

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.

<nav>
    <a href="/homepage">Home</a>
    <a href="/contact">Contact</a>
</nav>

Bonyolultabb navigáció, például egy weboldal főmenüje esetében a linkeket lista elemekben csoportosíthatjuk a nav elemen belül.

<nav>
    <ul>
        <li><a href="/homepage">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/about">About us</a></li>
        <li><a href="/contact">Contact us</a></li>
    </ul>
</nav>

A menü linkek listába helyezése lehetővé teszi több szintű almenü struktúra létrehozását.

<nav>
    <ul>
        <li><a href="/homepage">Home</a></li>
        <li><a href="/products">Products</a>
            <ul>
                <li><a href="/products/books">Books</a></li>
                <li><a href="/products/magazines">Magazines</a></li>
                <li><a href="/products/comic">Comic</a></li>
                <li><a href="/products/albums">Albums</a></li>
                <li><a href="/products/guides">Pocket guides</a></li>
            </ul>
        </li>
        <li><a href="/contact">Contact us</a></li>
    </ul>
</nav>

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.

<form>
    ...
</form>

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.

<form>
    <input id="name" type="text" placeholder="Your name">
</form>
<form>
    <label>Szövegbeviteli mező</label> <input type="text"> <br>
    <label>E-mail</label> <input type="email"> <br>
    <label>Jelszó</label> <input type="password"> <br>
    <label>Állomány feltöltés</label> <input type="file"> <br>
    <label>Rádiógomb</label> <input type="radio"> <br>
    <label>Jelölőnégyzet</label> <input type="checkbox"> <br>
    <label>Gomb</label> <input type="button" value="Elküldés">
</form>

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.

<form>
    <label for="name">Your Name</label>
    <input id="name" type="text">
</form>

Ez a kötés létrejön akkor is, ha a beviteli mező a label gyermeke:

<form>
    <label>
        Your Name
        <input id="name" type="text">
    </label>
</form>

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.

<form>
    <textarea rows="4" cols="50"></textarea>
</form>

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.

<select>
    <option selected>Almafa</option>
    <option>Körtefa</option>
    <option>Barackfa</option>
</select>

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.

<table>
    <tr>
        <td>Első sor, első oszlop</td>
        <td>Első sor, második oszlop</td>
        <td>Első sor, harmadik oszlop</td>
    </tr>
    <tr>
        <td>Második sor, első oszlop</td>
        <td>Második sor, második oszlop</td>
        <td>Második sor, harmadik oszlop</td>
    </tr>
</table>

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.

<!-- Fejléc cellák vízszintesen. -->
<table>
    <tr>
        <th>Fejléc</th>
        <th>Fejléc</th>
        <th>Fejléc</th>
    </tr>
    <tr>
        <td>Cella</td>
        <td>Cella</td>
        <td>Cella</td>
    </tr>
</table>


<!-- Fejléc cellák függőlegesen. -->
<table>
    <tr>
        <th>Fejléc</th>
        <td>Cella</td>
        <td>Cella</td>
    </tr>
    <tr>
        <th>Fejléc</th>
        <td>Cella</td>
        <td>Cella</td>
    </tr>
</table>

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

PreviousHTML állomány felépítéseNextHTML hibák, és javításuk

Last updated