HTML se skládá ze značek (tzv. tagů). Těmito tagy pak “obalujeme” běžný text a tak mu přidělujeme určité vlastnosti (”tento text je nadpis”, “toto je běžný text”, “toto je odkaz”, …).
Tyto tagy mohou být párové nebo nepárové. Párové tagy označují text od začátku až do konce. Nepárové tagy nemají ukončovací část.
Tagy zapisujeme do špičatých závorek <> (Ve Windows se zapisují jako *ctrl + alt +* , resp. *ctrl + alt + .* případně pomocí numerického kódu Alt + 60 a Alt + 62 . Na macOS kombinace option + , a option + . případně dedikovanou klávesou pod escape v kombinaci s klávesou shift). Například označení pro nadpis by mohlo vypadat takto:
<h1>Toto je nadpis úrovně jedna</h1>
Všimněte si, že počáteční i koncový tag má vždy stejné označení jen koncový je doplněn o lomítko. V případě, že potřebujeme označit text uvnitř jiného tagu musíme si dát pozor na pořadí v jakém tagy ukončujeme. Nejprve je ukončen “vnitřní” tag až poté se ukončuje tag “venkovní”. Pokud bychom například chtěli v běžném textu použít kurzívu na část věty zápis v kódu by vypadal takto:
<p>Toto je věta běžného textu kde <em>tato částje psána kurzívou</em> </p>
Pro správné fungování a zobrazení je potřeba dodržovat předem definovanou základní strukturu.
<!DOCTYPE html>
<!-- deklarace typu dokumentu. Tímto sdělím prohlížeči že otvírá HTML5 dokument -->
<html lang="cs"> <!-- Začátek hlavního HTML dokumentu, "cs" určuje jazyk stránky -->
<head>
<!-- Začátek hlavičky stránky, obsahuje meta informace a odkazy na externí zdroje -->
<meta charset="UTF-8"> <!-- Nastavení kódování znaků na UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Nastavení zobrazení na mobilní zařízení -->
<title>Můj web</title> <!-- Titulek stránky, zobrazuje se v záhlaví prohlížeče -->
</head>
<body> <!-- Začátek těla stránky, obsahuje veškerý viditelný obsah -->
<!-- Toto je komentář v HTML -->
<!-- Vložte zde obsah vaší stránky, například text, obrázky, odkazy atd. -->
</body>
</html> <!-- Konec hlavního HTML dokumentu -->
Z víše uvedeného je snadno poznat nejen jak vypadá struktura webové stránky tak i jakým způsobem zapisovat komentáře. Je však potřeba upozornit ještě na jednu důležitou věc. Pokud vkládám tag do jiného tagu, vždy odsadím pomocí tabulátoru. Toto nemá vliv na funkčnost, ale hlavně na přehlednost.
Na tomto kódu je možné si všimnout že některé tagy obsahují ještě dodatečnou informaci, kromě samotného tagu. Například tag <html **lang=”cs”**> tato část se nazývá atribut.
Při psaní webových stránek se často potkáme s pojmem Element. Element je výsledný objekt na stránce, který je definován v kódu pomocí tagu.
<aside> <img src="/icons/exclamation-mark_pink.svg" alt="/icons/exclamation-mark_pink.svg" width="40px" /> Velmi často se můžete setkat s tím že je HTML chybně označováno jako programovací jazyk. Toto ale není pravda. HTML slouží pouze k vytváření dokumentů, neumožňuje provádět logické operace. Proto se v HTML píše ale neprogramuje.
</aside>