PROFILPELAJAR.COM

	HTML5; (Hypertext Markup Language)
Fájlkiterjesztés	HTML: .html, .htm; XHTML: .xhtml, .xht, .xml
MIME-típus	HTML: text/html; XHTML: application/xhtml+xml, application/xml
Fejlesztő	W3C HTML WG, WHATWG
Kiadás dátuma	2014. október 28.
Formátum típusa	jelölőnyelv
Mac OS típuskód	TEXT
Uniform	public.html
Standard	WHATWG Editor's draft; W3C Editor's draft;
Weboldal	html.spec.whatwg.org/multipage/

A HTML5 a HTML (Hypertext Markup Language, a web fő jelölőnyelve) korábbi verzióinak az átdolgozott változata. A kifejlesztésének egyik fő célja, hogy a webes alkalmazásokhoz ne legyen szükség pluginek (pl. Adobe Flash, Microsoft Silverlight, Oracle JavaFX) telepítésére.

A specifikáció a HTML4 és az XHTML1 új verzióját jelenti, a hozzájuk tartozó DOM2 HTML API-val együtt. A HTML5 specifikációban leírt formátumba történő migráció HTML4-ről, vagy XHTML1-ről a legtöbb esetben egyszerű, mivel a visszamenőleges kompatibilitás biztosított.

A specifikáció a közeljövőben támogatni fogja a Web Forms 2.0 specifikációt is.

Jelölés

A HTML5 bevezet jó néhány új elemet (címkét) és tulajdonságot, amelyek a modern weblapokon jellemzően alkalmazott szerkezetekre kínálnak új megoldást. Néhány változtatás szemantikai jellegű, például az általánosan használt <div> és a soron belüli részek formázását biztosító <span> helyett a <nav> (a weboldal navigációs területe) és a <footer> (lábléc). Más elemek új funkciók elérését biztosítják szabványosított felületen, mint az <audio> és a <video> elemek.

Néhány a HTML 4.01-ben már érvénytelenített elem az új szabványba már nem került be. Ilyenek a mai weblapokon még gyakran jelenlévő <font> és <center> elemek, amelyek hatását most már végleg CSS kóddal kell megvalósítani. Újra hangsúlyt helyeztek a DOM szkriptek (gyakorlatilag a JavaScript) jelentőségére a weboldalak viselkedésével kapcsolatban.

A jelölések hasonlósága ellenére a HTML5 szintaxisa már nem az SGML-en alapul. Ezzel együtt úgy tervezték, hogy visszafelé kompatibilis legyen, így a korábbi HTML szabványokhoz készült elemzők a szokásos elemeket megérthetik.

Oldalstruktúra

A HTML5 !DOCTYPE tagja (címkéje) is megváltozott. Lerövidítették, egyszerűsítették:

<!DOCTYPE html>

A kezdőtag után jön a html nyitó- és zárótag. Ezek közé kerül minden:

<html lang="hu"> </html>

Ezután a head tagek jönnek. Ezek közé kerülnek a háttérinformációk:

<head> </head>

A head tag zárótagje után jönnek a body tagek. Ez így fest:

<body> </body>

Ez a struktúra. Összegezve így néz ki:

<!DOCTYPE html>
<html lang="hu">
    <head>
    </head>
    <body>
    </body>
</html>

A head tagek közé kell betenni minden háttérinformációt.

Meta tagek.^[1] Lehet benne keresőkulcsszó, tartalom, oldaldefiníció.
Linkek. CSS-re (Cascading StyleSheets, egymásbaágyazott stíluslapok), vagy faviconra mutatnak.
Script tagek, bennük scriptekkel, vagy azokhoz tartozó elérési utakkal.
Base tagek. Ezeknek általában href attribútuma van, amik a weboldal egyes (általában fő-) oldalára mutatnak.
Title tagek. Ezekben van az oldal címe.

A body tagek között kap helyet az oldal és többek között néhány (ha van) script (kivétel a PHP). A weboldalak alapstruktúrája általában

egy fejléc, logóval és szlogennel,
egy menüsor, oldalt, vagy a fejléc alatt/felett,
egy tartalom doboz, ebben van minden tartalom.
egy lábléc, másolásvédelmi szöveggel, vagy hasonlókkal.

Ez így fest, csupa HTML5-tel:

<!DOCTYPE html>
<html lang="hu">
    <head>
        <title>
            Oldal neve
        </title>
        <link rel="stylesheet" href="/style.css" />
        <script type="text/javascript">
            /* Javascript, ha kell. */
        </script>
        <meta charset="kívánt karakterkódolás" />
    </head>
    <body>
        <header id="fejlec">
            <img src="elérésiút" alt="logo, kép" />
            <h1 id="szlogen">
                Szlogen
            </h1> 
        </header>
        <section id="tartalom">
            <nav id="menusav">
                <a href="/oldal1">Menü1</a>
                <a href="/oldal2">Menü2</a>
                <a href="/oldal3">Menü3</a>
                <a href="/oldal4">Menü4</a>
                <a href="/oldal5">Menü5</a>
            </nav>
            <article id="lenyeg">
                <header>
                    <h2>Cikk címe</h2>
                    <h3>Cikk alcíme</h3>
                </header>
                <p>
                    Első bekezdés.
                </p>
                <p>
                    Második bekezdés.
                </p>
            </article>
        </section>
        <footer>
            <p>
                Lábléc szövege
            </p>
        </footer>
    </body>
</html>