HTML elementy: jednoduché a párové tagy (otvírací a uzavírací tag). Koncept HTML tagu Jak správně psát párové tagy

Označit ( pl. tagy, někdy tag) je prvek jazyk HTML, který se používá k označení zdrojového textu webové stránky. Tagy jsou zkratky nebo zkratky anglických slov uzavřených v lomených závorkách, například tag

…

zkratka anglického slova odstavec, to znamená, že text uzavřený v této značce budou prohlížeče rozpoznány jako odstavec.

Každá značka v HTML má zvláštní význam a je zodpovědná za zobrazení určitých dat. Nezáleží na velikosti písmen v názvech tagů, například tag

…

a tag

…

- To je to samé. To znamená, že značky lze psát jak malými, tak velkými písmeny. Dříve bylo běžnou praxí psát všechny tagy velkými písmeny, aby se tagy lišily od běžného textu. Nyní již taková potřeba není, protože mnoho editorů má zvýraznění syntaxe.

Klasifikace značek

V HTML je více než 90 značek Typicky jedna značka ovlivňuje pouze část dokumentu, například značku nadpisu první úrovně... V takových případech se používají párové značky: otevírací A zavírání. Úvodní tag (například ) vytváří efekt a uzavírací tag ( ) efekt zastaví. Jak můžete vidět z příkladu, koncová značka má vždy tento symbol (/) - lomítko. Tyto značky se nazývají čtyřhra.

Některé značky poskytují jednorázový efekt tam, kde se objeví. Například značka vodorovného pruhu nebo značka zobrazení obrázku . Takové štítky nemají uzavírací štítky. Takové značky se nazývají nepárové.

Typy značek

Kromě toho jsou značky rozděleny do několika typů, které se liší svými funkcemi:

štítky s názvy dokumentů;
blokové prvky;
vložené prvky;
univerzální prvky;
seznamy;
stoly;
rámy.

Toto rozdělení není striktní, takže některé tagy jsou v různých skupinách. Například značky pro vytváření seznamů a

Po načtení v prohlížeči se samotné značky nezobrazují, ale ovlivňují způsob zobrazení jejich obsahu. Pokud je značka nesprávně napsána, je zcela ignorována.

Všechny značky mají určitou strukturu, kterou je třeba při zápisu dodržovat. Navíc téměř všechny značky mají různé atributy, které mohou změnit způsob zobrazení obsahu.

Podívejme se na správnou strukturu značek obsahujících atributy:

Váš vlastní webmaster

Jako příklad jsem uvedl dvě zcela odlišné značky. První single - zodpovědný za zobrazování obrázků, atribut - src="logo.jpg" . Druhý … spárovaný je zodpovědný za vytváření odkazů, atribut je href = "site" .

Závěr 1: Atributy mohou mít párové a nepárové tagy.

Závěr 2: Pouze otevírací tagy mohou mít atributy, uzavírací tagy atributy nemají.

Obrázek pro upřesnění:

Obrázek 1. Struktura HTML tagu

Podívejme se na příklad jednoduché webové stránky, na kterou jsme se v lekci podívali.

Už jste četli, že veškerý jazyk se skládá ze značek. V této lekci se blíže podíváme na HTML tagy. V jazyce HTML se tagy dělí na jednoduché (nespárované) a párové tagy. Jednotlivé značky HTML se tedy skládají z jedné značky, to znamená, že nemají uzavírací značku. A párové deskriptory mají otevírací a uzavírací značku.

Jednotlivé značky nemají uzavírací značku. Například:
, . Dříve psali takto:
, , nyní tento styl psaní jednotlivých značek není relevantní, takže takto nepište. Nejpoužívanější jednotlivé značky:
- přesun na nový řádek, - dělící čára, - vložit obrázek.

Párových značek je mnohem více. Párový deskriptor má úvodní a závěrečný tag. Spárovaný tag tvoří kontejner. Obsah kontejneru je to, co je mezi otevírací a zavírací značkou. V příkladu z tohoto článku jste viděli značku Co jsou deskriptory v HTML? , jedná se tedy o párovou značku, obsahem této značky je text „Co jsou značky v HTML?“ Jeho začátek je tag a jeho konec je .

Hlavní chybou začátečníků při psaní párových značek je zmatek při vnořování. Například toto je správný záznam:

Tučný odstavec

Jak správně psát párové značky

HTML5 je rozšíření HTML4, takže zachovává většinu nebo všechny deskriptory z HTML4 a přidává své vlastní. HTML5 zavedlo speciální značky pro rozdělení webu do hlavních bloků: záhlaví, menu, zápatí, postranní panel a obsah.

Vyhledávače Yandex a Google jsou citlivé na rozvržení HTML dokumenty, kontroluje jejich platnost. Hledají klíčová slova uzavřená ve speciálních deskriptorech a podobně. Ale o tom tato sekce není. To platí pro propagaci (SEO).

Ano, značek je poměrně dost. Ale není potřeba je konkrétně učit. Dokud budete něco psát, všechny deskriptory, párové i jednotlivé, si snadno zapamatujete. Časem samozřejmě.

HTML tagy jsou základem jazyka HTML. Značky se používají k vymezení začátku a konce prvků ve značkách.

Každý HTML dokument se skládá ze stromu HTML prvků a textu. Každý prvek HTML je identifikován počáteční (otvírací) a koncovou (uzavírací) značkou. Úvodní a závěrečné tagy obsahují název tagu.

Všechny prvky HTML jsou rozděleny do pěti typů:

prázdné prvky - , ,
, , , , , , , , , , , , ;
prvky s neformátovaným textem - , ;
prvky, které vystupují neformátovaný text — , ;
prvky z jiného jmenného prostoru - MathML a SVG;
běžné prvky - všechny ostatní prvky.

Tabulka poskytuje úplný seznam prvků podporovaných HTML4 a HTML5. Experimentální a starší značky jsou vyloučeny. Prvky přidané do specifikace HTML5 jsou zvýrazněny modrozelenou barvou.

Slouží k přidávání komentářů.

Deklaruje typ dokumentu a poskytuje prohlížeči základní informace – jeho jazyk a verzi.

Vytváří hypertextové odkazy.

Označuje text jako zkratku nebo akronym. Vysvětlující text je specifikován pomocí atributu title.

Určuje kontaktní informace autora/vlastníka dokumentu nebo článku. V prohlížeči zobrazeno kurzívou.

Jedná se o hypertextový odkaz s textem odpovídajícím určité oblasti na obrazové mapě nebo aktivní oblasti v rámci obrazové mapy. Vždy vnořeno do značky.

Část obsahu, která tvoří nezávislou část dokumentu nebo webové stránky, jako je článek v časopise, příspěvek na blogu, komentář.

Představuje obsah stránky, který nepřímo souvisí s hlavním obsahem stránky/webu.

Načte zvukový obsah na webovou stránku.

Nastaví tučnou pasáž textu, aniž by zvýrazněnému textu přidával důraz nebo důležitost.

Určuje základní adresu (URL), ze které se počítají všechny relativní adresy. To pomůže vyhnout se problémům při přesunu stránky na jiné místo, protože všechny odkazy budou fungovat jako dříve.

Izoluje pasáž textu napsanou v jazyce, ve kterém se text čte zprava doleva od zbytku textu.

Zobrazí text ve směru určeném atributem dir, přičemž přepíše aktuální směr textu.

Zvýrazňuje text jako citát, který se používá k popisu velkých citací.

Představuje tělo dokumentu (obsah, který není součástí metadat dokumentu).

Zalomit text na nový řádek.

Vytvoří interaktivní tlačítko. Do značky můžete umístit obsah – text nebo obrázek.

Kontejner plátna pro dynamické zobrazování obrázků, jako jsou jednoduché obrázky, tabulky, grafy atd. Pro kreslení se používá skriptovací jazyk JavaScript.

Přidá k tabulce popisek. Vkládá se bezprostředně za značku .

Používá se k označení zdroje citace. Zobrazeno kurzívou.

Představuje kus kódu programu zobrazený v rodině jednoprostorových písem.

Vybere jeden nebo více sloupců tabulky pro formátování, které neobsahují stejný typ informací.

Vytvoří strukturní skupinu sloupců, která identifikuje mnoho logicky homogenních buněk.

Prvek se používá k přiřazení hodnoty atributu value, která je ve strojově čitelném formátu a může být zpracována počítačem, s obsahem značky.

Prvek kontejneru pro prvek rozevíracího seznamu. Hodnoty variant jsou umístěny v prvcích.

Používá se k popisu termínu ze značky.

Označí text jako smazaný přeškrtnutím.

Vytvoří interaktivní widget, který může uživatel otevřít nebo zavřít. Představuje kontejner pro obsah, viditelný název widgetu je umístěn ve značce.

Identifikuje slovo jako termín uvedením kurzívy. Následující text by měl obsahovat definici tohoto pojmu.

Interaktivní prvek, se kterým uživatel interaguje za účelem dokončení úkolu, jako je dialogové okno, inspektor nebo okno. Bez atributu open není pro uživatele viditelný.

Značka kontejneru pro části dokumentu HTML. Používá se k seskupení prvků bloku pro formátování pomocí stylů.

Značka kontejneru obsahující výraz a jeho popis.

Používá se k určení termínu.

Zvýrazňuje důležité pasáže textu jejich zobrazením kurzívou.

Značka kontejneru pro vkládání externího interaktivního obsahu nebo pluginu.

Seskupuje související prvky do formuláře nakreslením rámečku kolem nich.

Název/titulek prvku.

Samostatná značka kontejneru pro obsah, jako jsou ilustrace, diagramy, fotografie, příklady kódu, obvykle s titulkem.

Definuje koncovou oblast (zápatí) dokumentu nebo oddílu.

Formulář pro shromažďování a odesílání informací od uživatelů na server. Bez atributu action to nefunguje.

Vytvořte šest úrovní nadpisů pro související sekce.

Prvek kontejneru pro metadata dokumentu HTML, jako jsou , , , , .

Sekce pro úvodní informace o webu nebo skupině navigačních odkazů. Může obsahovat jeden nebo více nadpisů, logo, informace o autorovi.

Vodorovná čára pro tematické členění odstavců.

Kořenový prvek dokumentu HTML. Řekne prohlížeči, že se jedná o dokument HTML. Je to kontejner pro všechny ostatní html prvky.

Kurzívou pasáž textu bez dalšího zdůraznění.

Vytvoří vložený rámec načtením jiného dokumentu do aktuálního dokumentu HTML.

Vloží obrázky do dokumentu HTML pomocí atributu src, jehož hodnota je adresa URL vloženého obrázku.

Vytváří bohatá pole formuláře, do kterých může uživatel zadávat data.

Zvýrazní text podtržením. Používá se ke zvýraznění změn provedených v dokumentu.

Vybírá text, který má uživatel zadat pomocí klávesnice v jednoprostorovém písmu.

Slouží k uložení dalších informací o stránce. Tyto informace používají prohlížeče ke zpracování stránky a vyhledávače k jejímu indexování. V bloku může být několik značek, protože v závislosti na použitých atributech nesou různé informace.

Ukazatel měření v daném rozsahu.

Část dokumentu obsahující navigační odkazy na web.

Definuje sekci, která nepodporuje skriptování.

Kontejner pro vkládání multimédií (např. audio, video, Java applety, ActiveX, PDF a Flash). Do aktuálního dokumentu HTML můžete také vložit jinou webovou stránku. Tag se používá k předání parametrů pluginu.

Objednaný číslovaný seznam. Číslování může být číselné nebo abecední.

Kontejner s názvem pro skupinu prvků.

Určuje možnost/možnost k výběru z rozevíracího seznamu , nebo .

Pole pro zobrazení výsledku výpočtu vypočteného pomocí skriptu.

Odstavce v textu.

Definuje parametry pro pluginy vytvořené pomocí prvku.

Prvek kontejneru obsahující jeden prvek a nula nebo více prvků. Sám o sobě nic nezobrazuje. Umožňuje prohlížeči vybrat nejvhodnější obrázek.

Výstup textu bez formátování, zachování mezer a zalomení textu. Lze použít k zobrazení počítačového kódu, e-mailových zpráv atd.

Indikátor dokončení úkolu jakéhokoli druhu.

Definuje krátkou citaci.

Kontejner pro východoasijské symboly a jejich dekódování.

Definuje svůj vnořený text jako základní komponentu anotace.

Přidá krátký popis nad nebo pod znaky obsažené v prvku, zobrazený menším písmem.

Označí vložený text jako další anotaci.

Pokud prohlížeč prvek nepodporuje, zobrazí alternativní text.

Zobrazuje přeškrtnutý text, který není aktuální.

Používá se k zobrazení textu představujícího výsledek programového kódu nebo provádění skriptu a také systémových zpráv. Zobrazeno jednoprostorovým písmem.

Používá se k definování skriptu na straně klienta (obvykle JavaScript). Obsahuje buď text skriptu, nebo odkazuje na externí soubor skriptu pomocí atributu src.

Definuje logickou oblast (sekci) stránky, obvykle se záhlavím.

Ovládací prvek, který umožňuje vybrat hodnoty z navržené sady. Hodnoty variant jsou umístěny v .

Zobrazí text menší velikostí písma.

Určuje umístění a typ alternativních zdrojů médií pro , , .

Kontejner pro inline prvky. Lze použít k formátování pasáží textu, jako je zvýraznění jednotlivých slov barvou.

Zdůrazní text a zvýrazní ho tučně.

Zahrnuje vložitelné šablony stylů.

Určuje spodní index psaní symbolů, například index prvků v chemických vzorcích.

Vytvoří viditelný název pro značku. Zobrazí se s vyplněným trojúhelníkem, kliknutím na něj můžete zobrazit podrobnosti o titulu.

Určuje pravopis znaků v horním indexu.

Tag pro vytvoření tabulky.
	Definuje tělo tabulky.
		Vytvoří buňku tabulky.
	Používá se k deklaraci fragmentů kódu HTML, které lze naklonovat a vložit do dokumentu pomocí skriptu. Obsah značky není jejím potomkem.
	Vytváří velká pole pro zadávání textu.
	Definuje zápatí tabulky.
	Vytvoří název buňky tabulky.
	Definuje název tabulky.
	Definuje datum/čas.
	Název dokumentu HTML, který se zobrazuje v horní části záhlaví prohlížeče. Může se také objevit ve výsledcích vyhledávání, takže to je třeba vzít v úvahu při zadávání názvu.

Vytvoří řádek tabulky.
	Přidá titulky pro prvky a .
	Zvýrazní pasáž textu podtržením bez dalšího zdůraznění.
	Vytvoří seznam s odrážkami.
	Zvýrazňuje proměnné z programů jejich zobrazením kurzívou.
	Přidá video soubory na stránku. Podporuje 3 video formáty: MP4, WebM, Ogg.
	Označuje prohlížeč, kde by se mohl přerušit dlouhý řádek.

Cheat list se značkami

Pro snadné použití jsem seskupil značky do tematických sekcí a přidal hodnoty vlastností zobrazení pro každou značku. Chcete-li přejít na tabulku, klikněte na obrázek.

Element HTML je základní strukturní jednotka webové stránky napsaná v HTML.

Spárované a jednotlivé HTML tagy

Syntaxe prvků HTML sestávajících ze spárovaných značek je:

Prvek začíná úvodní značkou.
Prvek končí uzavírací značkou.
Obsah prvku je vše mezi úvodním a závěrečným tagem. Obsahem může být text a/nebo jiné HTML prvky.

Poznámka: Nezapomeňte do závěrečného tagu vložit znak „/“, který prohlížeči sdělí, že váš prvek skončil a že to, co následuje za ním, je další prvek. Pokud do uzavírací značky nevložíte znak „/“, prohlížeč jej zamění za nový prvek vnořený do předchozího, o kterém si prohlížeč stále myslí, že není uzavřen.

Syntaxe prvků HTML skládajících se z jednotlivých značek je:

Prvek se skládá pouze z úvodní značky.

Prvky sestávající z jednotlivých značek se nazývají prázdné. V HTML je celkem 16 jednotlivých značek:

Vnořené prvky

HTML elementy sestávající ze spárovaných tagů mohou buď obsahovat libovolné další elementy, nebo mohou být samy vnořeny do jiných elementů a hloubka vnoření elementů není omezena.

Následující příklad se skládá ze tří prvků, z nichž dva jsou vnořené:

Můj první odstavec

Když je jeden prvek vnořen do druhého, musíte zajistit, aby vnořený prvek začínal a končil ve stejném prvku. Takže například následující kód je nesprávný:

Toto je velmi

Zajímavý

Zde prvek překračuje hranice prvku

Příklad se správným vnořením:

Je to velmi zajímavé

Zde je prvek správně vnořen - je zcela uvnitř prvku

Prázdné znaky

Prohlížeč ignoruje mezery v kódu HTML, takže je můžete využít ve svůj prospěch, aby byl váš kód čitelnější. Mezi prázdné znaky patří tabulátory, konce řádků a pravidelné prostory, lze je použít v libovolném množství. Příklad kódu, který používá mezery:

Titul Můj první titul

Můj první odstavec

Ukázkový kód by mohl být napsán bez použití mezer, ale takový kód by byl hůře čitelný:

Titul Můj první titul

Můj první odstavec

Jak se kód dokumentu HTML postupem času zvětšuje a je složitější, uvidíte, že použití mezer ve skutečnosti zlepšuje čitelnost kódu.

HTML je prostě prosté textový soubor s příponou .htm (html). Pro tvoření nejjednodušší stránka zpočátku, když jen trénujete, potřebujete pouze poznámkový blok. Otevřete poznámkový blok a napište nějaký text.

Každý prvek HTML je značka ohraničená závorkami. Jakýkoli soubor, html stránka začíná tagem a končí tagem.

Tento tag jednoduše indikuje prohlížeči (to je program, ve kterém si prohlížíte internetové stránky), že tento dokument je html značkovací dokument.

Značka znamená začátek html dokumentu a koncová značka znamená konec html dokumentu.

V rámci těchto značek existuje několik dalších důležitých značek. Bezprostředně za značkou jsou značky označující název stránky a tělo stránky.

Moje první HTML stránka

Značka znamená nadpis nadpisu okna při zobrazení této stránky.
Nyní můžete vytvořit nový Textový dokument v poznámkovém bloku zkopírujte výše uvedený text a uložte jej jako Page1.html a spusťte jej v prohlížeči, v záhlaví okna prohlížeče uvidíte název stránky a prázdnou stránku, protože V těle stránky ve značkách nic nezobrazujeme.

Výše uvedený text pro nás tedy bude základní kostrou každé webové stránky.

Spárované a nespárované značky!

, , Jsou to jen párové značky - značky, které přicházejí jako pár: značka a její uzavření, závěrečná značka se symbolem /. U párových tagů je hodnota obsažená mezi začátkem tagu a jeho koncem akcí tagu. Akce bude pokračovat, dokud nebude nalezena značka se symbolem /.

Nespárované tagy – nemají uzavírací tag. Níže uvedeme příklady takových značek.

- Nadpis html stránky, kde jsou zahrnuty klíčová slova pro vyhledávače, různé skripty atd.

— Tělo samotného html dokumentu.

Nespárovaná značka.

Poznámka: Ve většině případů se nyní při stavbě webových stránek používají hotové rutiny, pluginy atd. – pro rychlejší vytváření stránek, ale pro použití a používání takových rutin a šablon je stále vyžadována minimální znalost dat relace.

Kategorie