Místo pro zvědavé medvědy

Search
bear-hugs-alan-kabes-webdesign
V TÉTO CHVÍLI SE NA ČLÁNKU PRACUJE, DĚKUJI ZA POCHOPENÍ (24/04/2024)

Struktura HTML

V HTML takzvaně “tagujeme”, tedy používáme značky, kterými jsou právě tzv. Tagy.

HTML soubor je ve své podstatě prostý text, který uzavřeme do tagů a tím jim dáme funkci. Tagy určují, jak bude text následně vypadat.

Tyto Tagy je nutné uzavřít do ostrých závorek, aby plnily svou funkci. Protože to, co není v závorkách se bude zobrazovat jako samostatný text.

Jednoduše popsáno:

<tag> náš text </tag>

Z tohoto je zřejmé, že zde máme tzv. párové tagy. Kde značka na začátku <tag> určuje funkci a značka na konci </tag> funkci ukončuje.

Základní párové Tagy jsou například:

  • <head> obsah </head> hlavička.
  • <body> obsah </body> tělo stránky.
  • <h1> nadpis </h1> text první úrovně – z pravidla nadpis.
  • <h2> nadpis </h2> text druhé úrovně – z pravidla nadpis kapitoly.
  • <h3><h6> text </h3></h6> jsou ostatní úrovně textu a zobrazují se zároveň i podle odstupňované velikosti, čím nižší číslo, tím menší písmo a tedy důležitost.
  • <p> text </p> je odstavec z ang. paragraph, velmi používaný, protože formátuje text do odstavců.
  • <b> text </b> je pro tučné písmo, z ang. bold, dnes jej ale více nahrazuje tag <strong> text </strong> jako zvýraznění textu i pro prohlížeče, opět původ je z ang. strong – silný. Při použití prvního tagu <b> se text jen zvýrazní. Při použití novějších tagů <strong> je vnímán text pro internetové vyhledávače jako důležitá informace oproti ostanímu textu a zlepšuje to následně výkonnost SEO.
  • <i> text </i> je pro kurzívu, naklonění textu, původně z ang. italic. Stejně jako u předešlého tagu je dnes ale více nahrazován tagem <em> text </em> z ang. emphasis – důležitý. Při použití tagu <i> se text pouze nakloní. Ovšem při použití novějšího tagu <em> je text (slovo/a) vnímán internetovými vyhledávači jako důležitá informace oproti ostanímu textu a zlepšuje to následně výkonnost SEO.
  • <u> text </u> je na podtržení textu, původem u ang. underline. Většinou se tomuto tagu vyhýbáme, protože podtrženy bývají z principu odkazy.
  • <s> text </s> slouží pro přeškrtnutí textu, je z ang. strike. Například pro text, který již není aktuální, ale zůstane v textu pro pochopení obsahu. Nebo nahrazení například nové ceny v e-shopu.
  • <mark> text </mark> je pro zvýzraznění daného textu z anglického mark – označit. Tento tag nevnímají ovšem vyhledávače jako u tagů <strong> anebo <em>, ale text se označí žlutě, jako zvýrazňovačem.

Zde jako příklad:

ZVÝRAZNĚNÍ TOHOTO TEXTU

Zápis kódem vypadá takto:

				
					<mark>ZVÝRAZNĚNÍ TOHOTO TEXTU</mark>
				
			
  • <span> text </span> jsou tagy pro vymezující odlišný text. Je to element řádkový. Ve své podstatě oproti předchozím tagům nenese žádný konkrétní význam a ani nic neformátuje. Je tzv. neutrálním tagem a spouží především v kombinaci s se stylováním CSS.
  • <div> text </div> je podobně jako předchozí tag pro vymezení odlišnosti v textu. Rozdíl je předvším v tm, že <div> je element blokový. Ve své podstatě oproti předchozím tagům nenese žádný konkrétní význam a ani nic neformátuje. Je tzv. neutrálním tagem a spouží především v kombinaci s se stylováním CSS.
				
					<p>První řádek textu.</p>
<p>Druhý řádek textu.</p>

				
			

2) Závěrečné lomítko (<br>): Pro vytvoření nového řádku uvnitř jednoho elementu, například v rámci odstavce, nebo názvu odkazu, můžete použít element <br>. Tento element vytvoří pouze nový řádek, bez oddělení odstavce.

První řádek textu.
Druhý řádek textu.

Zápis kódem vypadá takto:

				
					<p>První řádek textu.<br>Druhý řádek textu.</p>

				
			

Oba tyto přístupy vytvářejí nový řádek v HTML, takže to bude záležet na vašem designu a kontextu, který zvolíte.