Syntaxe HTML značek

HTML značky (tagy) jsou uzavřeny ve špičatých závorkách < >

Každá značka má přesnou syntaxi. Zapíšeme-li značku chybně (neexistující značku), bude ji prohlížeč ignorovat (nedetekuje chybu). Text v ní umístěný se pak může ocitnout v jiném místě stránky či být jinak formátovaný, neboť není ohraničen správnou značkou. Některé chyby prohlížeče sami opraví. Nemůžeme však spoléhat, že všechny prohlížeče doplní chybějící kód stejně.

Základem spolehlivého webu je tedy dodržování správné syntaxe.

Zda je náš html kód správný (validní) si můžeme ověřit na stránkách validator.w3.org

Párové a nepárové tagy

• Párové tagy - určují začátek a konec nadpisu, odkazu, odstavce apod.
  

  <h1>Sedm divů světa</h1>
  <a href="http://cs.wikipedia.org">Encyklopedie Wikipedia</a>
  <p>
  Starověké civilizace vybudovaly celou řadu nádherných staveb,
  ale jen sedm z nich ohromilo antické spisovatele natolik,
  že je prohlásili za zázrak.
  </p>

  Počáteční a koncová značka může být umístěna před a za textem, nebo nad a pod textem, podle toho, co je pro nás přehlednější. Celý odstavec může být v editoru na jednom řádku, dlouhý odstavec můžeme rozdělit na víc řádků, na výsledné zobrazení v internetovém prohlížeči to nebude mít žádný vliv, odstavec se bude automaticky zalamovat podle velikosti okna prohlížeče.

  Návod pro PSPad

  Html kód stránky je přehlednější, píšeme-li html tagy na jednom řádku:

  

  Chceme-li pak vidět celý text dlouhých odstavců, provedeme jejich zalomení pomocí tlačítka
  (Pozici zalamování nastavíme kliknutím myší na pravítko)

  

  Tagy se mohou vnořovat do jiných tagů, např. obrázek do odkazu, odkaz do odstavce. Při vnořování se párové tagy nesmí křížit, tzn., že začátek i konec vnořeného tagu musí být uvnitř vnějšího tagu.

  Ukázka

  Odkaz uvnitř položky seznamu s odrážkami - správně:

  <p>Čerpáno z <a href="http://cs.wikipedia.org">Wikipedie</a></p>

  Špatně:

  <p>Čerpáno z <a href="http://cs.wikipedia.org">Wikipedie</p></a>
• Nepárové tagy - určují např. obrázek:
  <img src="obrazky/mapa.gif" width="450" height="320" alt="Mapa divů">
  nebo zalomení řádku:
  <br>

  Nepárové tagy nemají ukončovací značku, neuzavírají žádný text.

Přehled základních tagů

h1

hlavní nadpis

h2

podnadpisy

h3

podnadpisy další úrovně

p

odstavec

strong

tučné písmo (zdůrazněná část textu)

b

tučné písmo

em

kurzíva (zvýrazněná část textu, fráze)

i

kurzíva

br

zalomení řádku

a

odkaz

img

obrázek

ol

číslovaný seznam

li

položka seznamu

ul

seznam s odrážkami

li

položka seznamu

table

tabulka

tr

řádek tabulky

td

buňka tabulky

th

buňka záhlaví tabulky

div

blok

Nové tagy HTML5

Rozvržení webové stránky

header

záhlaví webové stránky, záhlaví článku

nav

navigační menu

main

obsah stránky, blok mezi záhlavím a zápatím

article

článek

section

část webové stránky obsahující články určitého zaměření, nebo části článku

asside

postranní panel obsahojící informace okrajově související s hlavní částí

footer

zápatí webové stránky, zápatí článku

HTML5 pro multimediální obsah

picture

obrázek

video

video

audio

zvuk

canvas

kreslící plátno