Pokud se chcete stát front-end vývojářem, jednou z nejčastějších rad, které dostanete, je naučit se HTML. Hypertext Markup Language, zkráceně HTML, je základem většiny webových stránek.
HTML se skládá z různých věcí, jako jsou značky, atributy a prvky. Zaměříme se na HTML tagy. Značky HTML používáme k tomu, abychom prohlížečům řekli, jak strukturovat obsah do nadpisů, nadpisů, odstavců, obrázků a ještě mnohem více. HTML tagy jsou tedy jako klíčová slova, která definují, jak bude prohlížeč zobrazovat nebo formátovat obsah.
Servery čtou značky HTML shora dolů. Neexistuje žádné omezení počtu HTML značek, které by webová stránka měla mít.
Všechny HTML značky jsou uzavřeny v <>
Každý HTML tag plní jinou funkci
Většina HTML tagů má otevírací a ukončující
Table of Contents
Toggle ,
,
,
a
.
H1 je největší značka nadpisu, zatímco H6 je nejmenší.
V dokumentu HTML mohou být značky nadpisů reprezentovány následovně:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Tagy
až
jsou uzavřeny v tagu .
Například značka , bude uzavřena jako;
<body>
<h1> This is heading 1 >/h1>
</body>
Značka
nebo jednoduše značka odstavce se používá, když chcete strukturovat obsah do odstavce. Stisknutím tlačítka ‚enter‘ v dokumentu HTML v editoru kódu nevytvoříte nový odstavec.
Pokud chcete více než jeden odstavec, musíte v dokumentu použít několik značek
. Značky odstavce by měly být uzavřeny ve značce .
Syntaxe značky odstavce je;
<p> ….some content here….</p>
Pokud chcete mít čtyři odstavce, váš kód bude strukturován jako;
<body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body>
Značka nebo jednoduše tučné zformátuje jakýkoli obsah mezi úvodním a koncovým tučným písmem.
Tučný tag může být mezi nadpisem, jako je H1, nebo dokonce uvnitř tagu odstavce.
Toto jsou příklady tučného štítku;
<b> Bold Tag </b>
Fráze ‚Bold Tag‘ se zobrazí tučně.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>
Páté vydání bude tučně.
Kurzíva označená jako přepisuje text uvnitř značek kurzívou.
Například, pokud máme
<i> These are italics </i>
Slova „toto jsou kurzíva“ se zobrazí kurzívou.
Značka podtržení neboli se používá, když chcete podtrhnout určitý kus textu v dokumentu HTML.
Například, pokud máme;
<u> underline these words </u>
Fráze mezi značkami bude podtržena.
Značka Center, , se používá k vystředění obsahu v dokumentu HTML.
Pokud máme například značku h2 napsanou jako
Centrování obsahu v HTML
Většina lidí používá termíny HTML tagy a prvky zaměnitelně. Ale jsou stejné? Technicky se prvky HTML a značky HTML liší.
HTML tagy definují HTML prvky. Abychom toho dosáhli, obsah je zabalen pomocí počátečního a závěrečného názvu značky, který odpovídá obsahu značky, se kterou pracujeme.
Toto je příklad prvku HTML:
<p> This is a paragraph </p>
je příkladem značky HTML
Atributy HTML poskytují další informace o prvcích HTML v dokumentu. Atributy se nacházejí v prvcích HTML.
Toto je příklad atributu HTML
<button id=" SubmitOrder" class="btn">Order</button>
HTML jako značkovací jazyk se vyvíjel v průběhu let od doby, kdy jej Tim Berners-Lee představil v roce 1993. První verze HTML měla 18 značek. S každou verzí HTML se přidávají nové značky; poslední upgrade byl HTML5 v roce 2014.
Bližší srovnání HTML a HTML5 ukazuje, že HTML5 má sémantické značky jako
,
a
, které jasně popisují obsah. Nyní máme více než 100 HTML tagů. Níže jsou uvedeny některé z nejoblíbenějších značek, které byste měli znát:
DOCTYPE není technicky značka, ale deklarace, která prohlížeči říká, jaký typ souboru bude načten. Tato značka sděluje prohlížeči typ HTML, který bude načten.
V HTML5 můžete svůj soubor deklarovat jako
<!DOCTYPE html>
Nebo
<!doctype html>
Poznámka: Deklarace nemá uzavírací značku a nerozlišuje malá a velká písmena.
Značka ….. následuje za značkou DOCTYPE. Tato značka definuje dokument jako webovou stránku; každý další prvek bude vnořen dovnitř. Značka HTML určuje začátek a konec dokumentu HTML.
Značka je reprezentována jako;
<html>Content</html>
Hlavička dokumentu HTML je reprezentována tagem
. Tato značka je uzavřena ve značce a poskytuje obecné informace o webové stránce.
Značka
obsahuje další značky, které uvádějí specifika webové stránky, jako je název a autor stránky. Obsah tohoto tagu se na webové stránce nezobrazuje
Toto je syntaxe značky
;
<head> …….. </head>
Tag
deklaruje název webové stránky. Tato značka je uzavřena ve značce <head>. Značka <title> se zobrazí v záhlaví nebo na kartě v okně prohlížeče, ale ne na skutečné webové stránce. </p>
<p>Syntaxe pro značku <title> je; </p>
<pre class="wp-block-prismatic-blocks"><title>HTML Tags for Beginners</title></pre>
<p>Když je uvnitř tag <head>, objeví se jako;</p>
<pre class="wp-block-prismatic-blocks"><head>
<title>HTML Tags for Beginners</title>
</head></pre>
<h3 id="h-body-body"><body> </body></h3>
<p>Tag <body> zobrazuje veškerý viditelný obsah na webové stránce. Obrázky, odkazy, prostý text, videa a další lze nalézt uvnitř značek <body> a </body>. </p>
<p>Některé z dalších značek, které najdete uvnitř těla, zahrnují značku </p>
<p> pro odstavec, značku <a> pro obrázky, značku <strong> pro tučný text a značku </p>
<ol> pro seřazený seznam, abychom zmínili alespoň některé. </p>
<p>Syntaxe značky <body> je;</p>
<pre class="wp-block-prismatic-blocks"><body> Content </body></pre>
<h3 id="h-h1-to-h6-tags"><span class="ez-toc-section" id="Znacky_az"></span>Značky </p>
<h1> až </p>
<h6><span class="ez-toc-section-end"></span></h3>
<p>V dokumentu HTML může být až 6 značek nadpisů. Každý z tagů je reprezentován číslem začínajícím od 1 do 6 jako </p>
<h1>, </p>
<h2>, </p>
<h3>, </p>
<h4>, </p>
<h5> a </p>
<h6>. </p>
<p>H1 je největší značka nadpisu, zatímco H6 je nejmenší. </p>
<p>V dokumentu HTML mohou být značky nadpisů reprezentovány následovně:</p>
<pre class="wp-block-prismatic-blocks"><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6></pre>
<p>Tagy </p>
<h1> až </p>
<h6> jsou uzavřeny v tagu <body>.</p>
<p>Například značka ,<H1> bude uzavřena jako;</p>
<pre class="wp-block-prismatic-blocks"><body>
<h1> This is heading 1 >/h1>
</body></pre>
<h3 id="h-p-p">
</h3>
<p>Značka </p>
<p> nebo jednoduše značka odstavce se používá, když chcete strukturovat obsah do odstavce. Stisknutím tlačítka ‚enter‘ v dokumentu HTML v editoru kódu nevytvoříte nový odstavec. </p>
<p>Pokud chcete více než jeden odstavec, musíte v dokumentu použít několik značek </p>
<p>. Značky odstavce by měly být uzavřeny ve značce <body >.</p>
<p>Syntaxe značky odstavce je; </p>
<pre class="wp-block-prismatic-blocks"><p> ….some content here….</p></pre>
<p>Pokud chcete mít čtyři odstavce, váš kód bude strukturován jako; </p>
<pre class="wp-block-prismatic-blocks"><body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body></pre>
<h3 id="h-b-b"><b> </b></h3>
<p>Značka <b> </b> nebo jednoduše tučné zformátuje jakýkoli obsah mezi úvodním <b> a koncovým </b> tučným písmem.</p>
<p>Tučný tag může být mezi nadpisem, jako je H1, nebo dokonce uvnitř tagu odstavce. </p>
<p>Toto jsou příklady tučného štítku;</p>
<pre class="wp-block-prismatic-blocks"><b> Bold Tag </b></pre>
<p>Fráze ‚Bold Tag‘ se zobrazí tučně. </p>
<pre class="wp-block-prismatic-blocks"><h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1> </pre>
<p>Páté vydání bude tučně.</p>
<h3 id="h-i-i"><i> </i></h3>
<p>Kurzíva označená jako <i> přepisuje text uvnitř značek kurzívou. </p>
<p>Například, pokud máme </p>
<pre class="wp-block-prismatic-blocks"><i> These are italics </i></pre>
<p>Slova „toto jsou kurzíva“ se zobrazí kurzívou. </p>
<h3 id="h-u-u"><u> </u></h3>
<p>Značka podtržení neboli <u> se používá, když chcete podtrhnout určitý kus textu v dokumentu HTML. </p>
<p>Například, pokud máme;</p>
<pre class="wp-block-prismatic-blocks"><u> underline these words </u></pre>
<p>Fráze mezi značkami bude podtržena. </p>
<h3 id="h-center-center"><center> </center></h3>
<p>Značka Center, <center>, se používá k vystředění obsahu v dokumentu HTML. </p>
<p>Pokud máme například značku h2 napsanou jako </p>
<h2> Centrování obsahu v HTML </h2>
<p>, můžeme ji vycentrovat následovně;</p>
<pre class="wp-block-prismatic-blocks"><center>
<h2> Centering Content in HTML </h2>
</center></pre>
<h3 id="h-span-span"><span></span></h3>
<p>Značka Span, <span>, je obecný vložený kontejner, který nemá výchozí styl. Pomocí značky span můžete seskupit texty, které chcete upravit. </p>
<p>Tag můžete rozložit do jiných tagů, jako jsou nadpisy a odstavce;</p>
<pre class="wp-block-prismatic-blocks"><h2> Learn HTML <span> from experts </span> and be ready for the market </h2>
</pre>
<pre class="wp-block-prismatic-blocks"><p> Learn HTML <span> from experts </span> and be ready for the market </p></pre>
<h3 id="h-div-div">
<div></div>
</h3>
<p>Značka rozdělení, zkráceně div, je značka, která umožňuje seskupit různé značky v dokumentu HTML. </p>
<p>Tag div může mít ‚class‘ pro přidání externího stylu pomocí CSS. </p>
<p>Takto bude reprezentován div obsahující značky h1, h2 a odstavce. </p>
<pre class="wp-block-prismatic-blocks"><div >
<h1> Learn HTML </h1>
<h2> HTML Tags </h2>
<p> HTML is a markup language……… </p>
</div></pre>
<h3 id="h-em-em"><em></em></h3>
<p>Zvýraznění neboli značka <em> se používá ke zdůraznění určitých slov v dokumentu HTML. </p>
<p>Obsah mezi značkami <em> se zobrazí šikmo nebo kurzívou. </p>
<p>Zdůrazněný obsah v rámci odstavce se může objevit v editoru kódu bude vypadat jako;</p>
<pre class="wp-block-prismatic-blocks"><p> The meeting will start at <em> 0800 hrs </em>, please keep time </p></pre>
<h3 id="h-sup-sup"><sup></sup></h3>
<p>Značka <sup> nebo horní index umožňuje, aby byl uzavřený text nad ostatními. Dokonalým příkladem je situace, kdy chcete odmocnit číslo X a matematicky jej vyjádřit, abyste získali X2</p>
<p>Syntaxe pro <sup> v rámci značky odstavce bude;</p>
<pre class="wp-block-prismatic-blocks"><H1> Harveys <sup>TM </sup> Company Limited </H1></pre>
<h3 id="h-sub-sub"><sub></sub></h3>
<p>Značka dolního indexu nebo <sub> je opakem značky horního indexu. Obsah uzavřený ve značce <sub> se zobrazí pod normálním řádkem textu. Dokonalým příkladem je zápis chemického vzorce vody jako H20. </p>
<p>Syntaxe značky dolního indexu bude;</p>
<pre class="wp-block-prismatic-blocks">Remember that H <sub> 2 </sub> 0 is the chemical formula for water</pre>
<h3 id="h-br"></h3>
<p> je samouzavírací značka, která znamená přestávku. Veškerý obsah po <br /> bude začínat na novém řádku. </p>
<p>Syntaxe pro <br /> v odstavci bude;</p>
<pre class="wp-block-prismatic-blocks"><p> HTML is the abbreviation of Hypertext Markup Language <br>
There has been an ongoing debate as to whether it is a programming language or not <br>
However, we cannot downplay its importance <br>
HTML has been used in more than 95% of websites today </p></pre>
<h3 id="h-ol-ol-and-li-li"><span class="ez-toc-section" id="a"></span>
<ol></ol>
<p> a </p>
<li> </li>
<span class="ez-toc-section-end"></span></h3>
<p>Značka uspořádaného seznamu nebo </p>
<ol> musí být použita s jinou značkou, jako je například </p>
<li>. </p>
<p>Tyto dva se mohou objevit v editoru kódu jako;</p>
<pre class="wp-block-prismatic-blocks"><ol>
<li> Asia </li>
<li> Africa </li>
<li> Europe </li>
</ol></pre>
<p>Po vykreslení v prohlížeči se obsah zobrazí očíslovaný. </p>
<h3 id="h-img-src"><img src=””/></h3>
<p>Možná budete chtít přidat obrázek pro vizuální přitažlivost nebo dokonce logo. V takovém případě se hodí samouzavírací značka obrázku <img src=””/>. </p>
<p>Syntaxe značky obrázku bude;</p>
<pre class="wp-block-prismatic-blocks"><img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/></pre>
<p>Obsah uzavřený v uvozovkách představuje zdrojovou adresu URL. </p>
<h3 id="h-wrapping-up"><span class="ez-toc-section" id="Zabalit_se"></span>Zabalit se <span class="ez-toc-section-end"></span></h3>
<p>Existuje více než 100 HTML tagů, ale výše uvedené jsou ty, které byste jako začátečník měli znát. HTML je podporováno ve většině editorů kódu, a proto máte jistotu, že když se začnete učit, nikdy neuděláte chybu. </p>
</p></div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1938007077406516"
crossorigin="anonymous"></script>
<!-- 1 elastic -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1938007077406516"
data-ad-slot="7557591081"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><div class="swp-content-locator"></div> </div>
<footer class="entry-meta" aria-label="Metainformace položky">
<span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" /></svg></span><span class="screen-reader-text">Rubriky </span><a href="https://etechblog.cz/etechblog/" rel="category tag">etechblog</a></span> <nav id="nav-below" class="post-navigation" aria-label="Příspěvky">
<div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero" /></svg></span><span class="prev"><a href="https://etechblog.cz/jak-vytvorit-ucet-wayfair-professional/" rel="prev">Jak vytvořit účet Wayfair Professional</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span><span class="next"><a href="https://etechblog.cz/zvyste-sve-skore-pomoci-techto-10-praktickych-testu-gmat/" rel="next">Zvyšte své skóre pomocí těchto 10 praktických testů GMAT</a></span></div> </nav>
</footer>
</div>
</article>
</main>
</div>
<div class="widget-area sidebar is-right-sidebar" id="right-sidebar">
<div class="inside-right-sidebar">
<aside id="custom_html-2" class="widget_text widget inner-padding widget_custom_html"><div class="textwidget custom-html-widget"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1938007077406516"
crossorigin="anonymous"></script>
<!-- 1 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1938007077406516"
data-ad-slot="7557591081"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div></aside>
<aside id="recent-posts-2" class="widget inner-padding widget_recent_entries">
<h2 class="widget-title">Nejnovější příspěvky</h2>
<ul>
<li>
<a href="https://etechblog.cz/5-beznych-nastaveni-serveru-pro-vasi-webovou-aplikaci/">5 běžných nastavení serveru pro vaši webovou aplikaci</a>
</li>
<li>
<a href="https://etechblog.cz/jak-aktualizovat-radky-a-sloupce-pomoci-python-pandas/">Jak aktualizovat řádky a sloupce pomocí Python Pandas</a>
</li>
<li>
<a href="https://etechblog.cz/jak-napsat-vas-prvni-program-v-ruby/">Jak napsat váš první program v Ruby</a>
</li>
<li>
<a href="https://etechblog.cz/jak-nastavit-server-openvpn-v-debian-11/">Jak nastavit server OpenVPN v Debian 11</a>
</li>
<li>
<a href="https://etechblog.cz/frakcni-batoh-pomoci-c/">Frakční batoh pomocí C++</a>
</li>
<li>
<a href="https://etechblog.cz/vyberte-spousteci-zarizeni-zdroje-spousteni-uefi-oprava/">Vyberte spouštěcí zařízení – zdroje spouštění UEFI [Oprava]</a>
</li>
<li>
<a href="https://etechblog.cz/oprava-chyboveho-kodu-xbox-8c230002/">Oprava chybového kódu Xbox 8C230002</a>
</li>
<li>
<a href="https://etechblog.cz/oprava-chyboveho-kodu-54-itunes-na-pocitaci-se-systemem-windows/">Oprava chybového kódu 54 iTunes na počítači se systémem Windows</a>
</li>
<li>
<a href="https://etechblog.cz/operaci-se-nepodarilo-dokoncit-chyba-0x00000771-chyba-tiskarny/">Operaci se nepodařilo dokončit (chyba 0x00000771) Chyba tiskárny</a>
</li>
<li>
<a href="https://etechblog.cz/klavesa-f5-pro-obnoveni-nefunguje-v-systemu-windows-11/">Klávesa F5 pro obnovení nefunguje v systému Windows 11</a>
</li>
<li>
<a href="https://etechblog.cz/casting-do-zarizeni-nefunguje-v-systemu-windows-11-10/">Casting do zařízení nefunguje v systému Windows 11/10</a>
</li>
<li>
<a href="https://etechblog.cz/jak-zabranit-aplikaci-excel-v-odstranovani-uvodnich-nul/">Jak zabránit aplikaci Excel v odstraňování úvodních nul</a>
</li>
<li>
<a href="https://etechblog.cz/jak-oznacit-soubory-v-systemu-windows-11-10-a-pouzit-je-k-efektivnimu-vyhledavani-souboru/">Jak označit soubory v systému Windows 11/10 a použít je k efektivnímu vyhledávání souborů</a>
</li>
<li>
<a href="https://etechblog.cz/obchazeni-licence-windows-podporuje-pouze-jeden-jazyk-zobrazeni/">Obcházení licence Windows podporuje pouze jeden jazyk zobrazení</a>
</li>
<li>
<a href="https://etechblog.cz/chyba-dat-7-zip-pri-extrahovani-oprava/">Chyba dat 7-Zip při extrahování [Oprava]</a>
</li>
<li>
<a href="https://etechblog.cz/co-jsou-kody-dalkoveho-ovladani-platformy-comcast-xfinity-x1-pro-konfiguraci/">Co jsou kódy dálkového ovládání platformy Comcast Xfinity X1 pro konfiguraci</a>
</li>
<li>
<a href="https://etechblog.cz/proc-se-gimp-otevira-tak-dlouho-na-mem-pc/">Proč se GIMP otevírá tak dlouho na mém PC?</a>
</li>
<li>
<a href="https://etechblog.cz/jak-zalohovat-nebo-obnovit-vychozi-plany-napajeni-v-systemu-windows-11-10/">Jak zálohovat nebo obnovit výchozí plány napájení v systému Windows 11/10</a>
</li>
<li>
<a href="https://etechblog.cz/co-je-soubor-dng-jak-jej-upravit-na-pocitaci-se-systemem-windows/">Co je soubor DNG? Jak jej upravit na počítači se systémem Windows?</a>
</li>
<li>
<a href="https://etechblog.cz/wmi-provider-host-vysoke-vyuziti-procesoru-v-systemu-windows-11-10/">WMI Provider Host Vysoké využití procesoru v systému Windows 11/10</a>
</li>
</ul>
</aside><aside id="swp_popular_posts_widget-2" class="widget inner-padding widget_swp_popular_posts_widget"><div class="widget-text swp_widget_box" style="background:transparent;"><h2 class="widget-title"><span class="widgettitle widget-title swp_popular_posts_title" style="">Popular Posts</span></h2></div></aside> </div>
</div>
</div>
</div>
<div class="site-footer">
<footer class="site-info" aria-label="Web" itemtype="https://schema.org/WPFooter" itemscope>
<div class="inside-site-info grid-container">
<div class="copyright-bar">
<span class="copyright">© 2024 etechblog.cz</span> • Vytvořeno s <a href="https://generatepress.com" itemprop="url">GeneratePress</a> </div>
</div>
</footer>
</div>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(86534937, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/86534937" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script><link rel='stylesheet' id='aal_style-css' href='https://etechblog.cz/wp-content/plugins/wp-auto-affiliate-links/css/style.css?ver=6.5.2' media='all' />
<script id="social_warfare_script-js-extra">
var socialWarfare = {"addons":[],"post_id":"63477","variables":{"emphasizeIcons":false,"powered_by_toggle":false,"affiliate_link":"https:\/\/warfareplugins.com"},"floatBeforeContent":""};
</script>
<script src="https://etechblog.cz/wp-content/plugins/social-warfare/assets/js/script.min.js?ver=4.4.6.3" id="social_warfare_script-js"></script>
<!--[if lte IE 11]>
<script src="https://etechblog.cz/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.4.0" id="generate-classlist-js"></script>
<![endif]-->
<script id="generate-menu-js-extra">
var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"Otev\u0159\u00edt podnab\u00eddku","closeSubMenuLabel":"Zav\u0159\u00edt podnab\u00eddku"};
</script>
<script src="https://etechblog.cz/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.4.0" id="generate-menu-js"></script>
<script src="https://etechblog.cz/wp-content/plugins/visual-footer-credit-remover/script.js?ver=6.5.2" id="jabvfcr_script-js"></script>
<script type="text/javascript"> var swp_nonce = "ead08fc7b3";function parentIsEvil() { var html = null; try { var doc = top.location.pathname; } catch(err){ }; if(typeof doc === "undefined") { return true } else { return false }; }; if (parentIsEvil()) { top.location = self.location.href; };var url = "https://etechblog.cz/x-bezne-pouzivane-html-znacky-ktere-musi-znat-zacatecnik/";if(url.indexOf("stfi.re") != -1) { var canonical = ""; var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length; i ++) { if (links[i].getAttribute("rel") === "canonical") { canonical = links[i].getAttribute("href")}}; canonical = canonical.replace("?sfr=1", "");top.location = canonical; console.log(canonical);};var swpFloatBeforeContent = false; var swp_ajax_url = "https://etechblog.cz/wp-admin/admin-ajax.php"; var swp_post_id = "63477";var swpClickTracking = false;</script>
</body>
</html>
<script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'8769947068452324',t:'MTcxMzQ5NDk1Ni42MDYwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script> 