Možná struktura HTML kódu

<!DOCTYPE HTML> <!--Značí, že se jedná o dokument HTML5.-->
<html> <!--Začátek dokumentu.-->
  
<head> <!--Mezi značky head se vkládají meta data, jako např. title, style, script, meta, link atd. Není pro uživatele běžně viditelné. -->
  <meta charset="UTF-8"> <!--Kódování stránky. Může být i např. "windows-1250".-->
  <title>Základy kódování HTML | Smuton.cz</title> <!--Titulek stránky, který je vidět v záložce prohlížeče.-->
  <meta name="description" content="Popisek stránky, který může být vidět ve výsledcích vyhledávání.">
  <meta name="keywords" content="HTML, CSS, JavaScript, další keywords"> <!--Dříve se používalo jako výpis klíčových slov. Dneska již nikoliv.-->
  <meta name="author" content="Smuton.cz"> <!--Informace o autorovi dané stránky.-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Díky této značce bude web vypadat dobře i na mobilních zařízeních.-->
  <meta name="robots" content="index, follow" /> <!--Říká robotům, zda tuto aktuální stránku mají indexovat do výsledků vyhledávání (SERPu).-->
  <meta http-equiv="refresh" content="30"> <!--Definuje, že stránka se bude každých 30 vteřin obnovovat.-->
  <link rel="alternate" hreflang="cs-CZ" href="https://www.smuton.cz/" /> <!--V případě více jazykových mutací, dáváme robotům vědět, kde najdou stránku s jiným jazykem.-->
  <link rel="alternate" hreflang="en-GB" href="#" /> <!--Říká robotům, že najdou EN verzi webu a pro GB uživatele, na dané URL.-->
  <style> /*Stylovaní obsahu v části body. Styly lze také vytvořit externě pomocí tagu <link>.*/
  h1 {
  background-color: #b85151; /*Nastavení dvojitého rámečku na jednoduchý*/
  width: 100%; /*Nastavení šířky tabulky*/
}
  /*<link rel="stylesheet" href="vlastnistyly.css"> Takto lze přidat externí styly, respektive přidat cestu k souboru .css, kam se píšou styly zvlášť mimo HTML dokument.
  </style>
</head>
  
<body> <!--Začátek těla stránky. Mezi tagy body se umisťuje obsah, který je viditelný pro uživatele.-->
<h1>Nadpis nejvyšší úrovně</h1> <!--Nadpis nejvyšší úrovně. Stále důležitý pro SEO.-->
<p>Běžný odstavec.</p> <!--Běžný odstavec, kam píšeme obyčejný text.-->
<h2>Nadpis druhé úrovně</h2>
<p>Běžný odstavec.</p> <!--Běžný odstavec, kam píšeme obyčejný text.-->
<h3>Nadpis třetí úrovně</h3>
<p>Běžný odstavec.</p> <!--Běžný odstavec, kam píšeme obyčejný text.-->
</body> <!--Konec těla stránky. Za tímto tagem již nebude nic vidět.-->
  
</html> <!--Konec dokumentu.-->

Výsledek HTML kódu:

Nadpis nejvyšší úrovně

Běžný odstavec.

Nadpis druhé úrovně

Běžný odstavec.

Nadpis třetí úrovně

Běžný odstavec.

 

Proč HTML tahák?

HTML tahák je k dispozici všem, kteří umí základy HTML či CSS stejně jako já a stále se učí. Zkušeným borcům tahák zřejmě tolik nedá. Našli jste chybu? Dejte mi vědět a rád ji opravím.

HTML tahák