close

Úvod do struktury HTML: Základní prvky a syntaxe

Struktura HTML hraje klíčovou roli při vytváření webových stránek. Definuje, jak je obsah organizován a zobrazen na webové stránce. Zde je úvod do základní struktury HTML:

1. Doctype

Doctype(deklarace typu dokumentu) definuje verzi HTML, kterou webová stránka používá. Měl by být umístěn na začátek souboru HTML.

2. HTML tag

Značka html je kořenovým prvkem každého souboru HTML. Zapouzdřuje celý obsah webové stránky.

3. head tag

Tag head obsahuje informace o webové stránce, které se přímo nezobrazují v prohlížeči. Zde se definuje titulek stránky, meta tagy, odkazy na soubory CSS a JavaScript a různé další prvky.

4. body tag

Značka body obsahuje veškerý obsah, který je zobrazen na webové stránce. Zde jsou definovány prvky jako text, obrázky, videa, odkazy a další součásti uživatelského rozhraní.

5. Vnořené značky

HTML používá hierarchickou strukturu s otevíracími a zavíracími značkami. Podřízené značky jsou umístěny uvnitř nadřazených značek. Například značka p(odstavec) může obsahovat značky span(vložený text), silné značky(tučný text) a mnoho dalších značek.

6. Společné značky

HTML poskytuje řadu značek pro formátování a zobrazování obsahu. Například značky h1-h6(nadpisy), značka p(odstavec), značka img(obrázek), značka(odkaz) a mnoho dalších.

 

Zde je příklad kompletní struktury HTML stránky:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

Ve výše uvedeném příkladu máme kompletní HTML stránku s hlavními prvky, jako jsou doctype, html tag, head tag a body tag. V sekci head definujeme název stránky, soubory CSS a JavaScript, které se mají použít. Sekce těla obsahuje prvky jako záhlaví, hlavní a zápatí pro zobrazení obsahu webové stránky.

 

Použitím správné struktury HTML můžete vytvářet dobře organizované, čitelné a interaktivní webové stránky.