Jednoduché a dvojité štítky. Značky v HTML

Už ste čítali, že celý jazyk sa skladá zo značiek. V tejto lekcii sa bližšie pozrieme na značky HTML. V jazyku HTML sa značky delia na jednoduché (nespárované) a párové značky. Jednotlivé značky HTML teda pozostávajú z jednej značky, to znamená, že nemajú uzatváraciu značku. A párové deskriptory majú otváraciu a zatváraciu značku.

Slobodný HTML tagy

Jednotlivé značky nemajú uzatváraciu značku. Napríklad:
, . Predtým písali takto:
, , teraz tento štýl písania jednotlivých značiek nie je relevantný, takže takto nepíšte. Najpoužívanejšie jednotlivé značky:
- prechod na nový riadok, - deliaca čiara, - vložiť obrázok.

Spárované značky HTML

Párových značiek je oveľa viac. Párový deskriptor má otváraciu a uzatváraciu značku. Spárovaná značka tvorí kontajner. Obsah nádoby je to, čo je medzi otváracou a zatváracou značkou. V príklade z tohto článku ste videli značku Čo sú deskriptory v HTML? , takže ide o párovú značku, obsahom tejto značky je text „Čo sú značky v HTML?“ Jeho začiatok je tag a jeho koniec je .

Hlavnou chybou začiatočníkov pri písaní párových značiek je zmätok pri hniezdení. Napríklad toto je správny záznam:

Tučný odsek

. A tu je chyba:

Tučný odsek

, HTML dokument s takýmto rozložením sa považuje za neplatný. Aby nedošlo k zámene vnorovania, urobte toto: vytvorte párové značky, potom do nich vnorte ďalšie a na konci napíšte text do oboch značiek

Ako správne písať párové značky

.

Čo je nové v HTML5 z hľadiska značiek?

HTML5 je rozšírením HTML4, takže zachováva väčšinu alebo všetky deskriptory z HTML4 a pridáva svoje vlastné. HTML5 zaviedlo špeciálne značky na rozdelenie stránky do hlavných blokov: hlavička, menu, päta, bočný panel a obsah.

Prečo je dôležité naučiť sa používať značky?

Vyhľadávače Yandex a Google sú citlivé na HTML rozloženie dokladov, kontrolu ich platnosti. Hľadajú kľúčové slová uzavreté v špeciálnych deskriptoroch atď. Ale o tom táto časť nie je. Týka sa to propagácie (SEO).

Ako sa naučiť všetky HTML značky?

Áno, existuje pomerne veľa značiek. Netreba ich však špeciálne učiť. Pokiaľ budete niečo písať, všetky deskriptory, párové aj jednotlivé, si ľahko zapamätáte. Postupom času, samozrejme.

Element HTML je základná štrukturálna jednotka webovej stránky napísaná v HTML.

Párové a samostatné HTML tagy

Syntax prvkov HTML pozostávajúcich zo spárovaných značiek je:

  • Prvok začína otváracou značkou.
  • Prvok končí uzatváracou značkou.
  • Obsah prvku je všetko medzi otváracou a zatváracou značkou. Obsahom môže byť text a/alebo iné HTML prvky.

Poznámka: Nezabudnite vložiť "/" do záverečnej značky, informuje prehliadač, že váš prvok skončil a že to, čo nasleduje po ňom, je ďalší prvok. Ak do koncovej značky nevložíte znak „/“, prehliadač si ho pomýli nový prvok, vnorený do predchádzajúcej, ktorá podľa prehliadača stále nie je uzavretá.

Syntax pre prvky HTML pozostávajúce z jednotlivých značiek je:

  • Prvok pozostáva len z otváracej značky.

Prvky pozostávajúce z jednotlivých značiek sa nazývajú prázdne. V HTML je celkom 16 jednotlivých značiek:

Vnorené prvky

HTML elementy pozostávajúce zo spárovaných tagov môžu buď obsahovať akékoľvek iné elementy, alebo môžu byť samotné vnorené do iných elementov a hĺbka vnorenia elementov nie je obmedzená.

Nasledujúci príklad pozostáva z troch prvkov, z ktorých dva sú vnorené:

Môj prvý odstavec

Keď je jeden prvok vnorený do iného, ​​musíte zabezpečiť, aby vnorený prvok začínal a končil v tom istom prvku. Takže napríklad nasledujúci kód je nesprávny:

Toto je veľmi

zaujímavé

Tu prvok presahuje hranice prvku

Príklad so správnym vnorením:

To je veľmi zaujímavé

Tu je prvok správne vnorený - je úplne v rámci prvku

Medzery

Prehliadač ignoruje medzery v kóde HTML, takže ich môžete použiť vo svoj prospech, aby bol váš kód čitateľnejší. Medzi biele znaky patria tabulátory, zlomy riadkov a pravidelné priestory, môžu byť použité v akomkoľvek množstve. Príklad kódu, ktorý používa medzery:

Názov Môj prvý titul

Môj prvý odstavec

Príklad kódu mohol byť napísaný bez použitia medzery, ale tento kód bude menej čitateľný:

Titul Môj prvý titul

Môj prvý odstavec

Keď sa kód dokumentu HTML časom zväčší a bude zložitejší, uvidíte, že používanie medzier skutočne zlepšuje čitateľnosť kódu.

HTML tagy sú základom jazyka HTML. Značky sa používajú na vymedzenie začiatku a konca prvkov v značke.

Každý HTML dokument pozostáva zo stromu HTML prvkov a textu. Každý prvok HTML je identifikovaný počiatočnou (otváracou) a koncovou (zatváracou) značkou. Otvárací a uzatvárací štítok obsahuje názov štítku.

Všetky prvky HTML sú rozdelené do piatich typov:

  • prázdne prvky - , ,
    , , , , , , , , , , , , ;
  • prvky s neformátovaným textom - , ;
  • prvky, ktoré zobrazujú neformátovaný text - , ;
  • prvky z iného menného priestoru - MathML a SVG;
  • bežné prvky - všetky ostatné prvky.

Tabuľka poskytuje úplný zoznam prvkov podporovaných HTML4 a HTML5. Experimentálne a staršie značky sú vylúčené. Prvky pridané do špecifikácie HTML5 sú zvýraznené modrozelenou farbou.

Úplný zoznam HTML prvky Tabuľka 1. Prvky HTML Popis značky
Používa sa na pridávanie komentárov.
Deklaruje typ dokumentu a poskytuje prehliadaču základné informácie – jeho jazyk a verziu.
Vytvára hypertextové odkazy.
Identifikuje text ako skratku alebo akronym. Vysvetľujúci text je špecifikovaný pomocou atribútu title.
Určuje kontaktné informácie autora/vlastníka dokumentu alebo článku. V prehliadači sa zobrazuje kurzívou.
Ide o hypertextový odkaz s textom zodpovedajúcim určitej oblasti na obrázkovej mape alebo aktívnej oblasti v rámci obrázkovej mapy. Vždy vnorené do značky.
Časť obsahu, ktorá tvorí nezávislú časť dokumentu alebo webovej stránky, ako napríklad článok v časopise, blogový príspevok, komentár.
Predstavuje obsah stránky, ktorý nepriamo súvisí s hlavným obsahom stránky/stránky.
Načíta zvukový obsah na webovú stránku.
Nastaví pasáž textu na tučné písmo bez pridania dôrazu alebo dôležitosti zvýraznenému textu.
Určuje základnú adresu (URL), z ktorej sa vypočítavajú všetky relatívne adresy. Pomôže to predísť problémom pri presúvaní stránky na iné miesto, pretože všetky odkazy budú fungovať ako predtým.
Izoluje pasáž textu napísanú v jazyku, v ktorom sa text číta sprava doľava od zvyšku textu.
Zobrazí text v smere určenom atribútom dir, pričom prepíše aktuálny smer textu.
Zvýrazňuje text ako citát, ktorý sa používa na opis veľkých úvodzoviek.
Predstavuje telo dokumentu (obsah, ktorý nie je súčasťou metadát dokumentu).

Zalomiť text do nového riadku.
Vytvorí interaktívne tlačidlo. Do značky môžete umiestniť obsah – text alebo obrázok.
Kontajner plátna na dynamické zobrazovanie obrázkov, ako sú jednoduché obrázky, tabuľky, grafy atď. Na kreslenie sa používa skriptovací jazyk JavaScript.
Pridá k tabuľke popis. Vkladá sa hneď za značku .
Používa sa na označenie zdroja citácie. Zobrazené kurzívou.
Predstavuje časť kódu programu zobrazenú v rodine jednopriestorových písiem.
Vyberie jeden alebo viac stĺpcov tabuľky na formátovanie, ktoré neobsahujú rovnaký typ informácií.
Vytvorí štrukturálnu skupinu stĺpcov, ktorá identifikuje mnoho logicky homogénnych buniek.
Prvok sa používa na priradenie hodnoty atribútu value, ktorá je v strojovo čitateľnom formáte a môže byť spracovaná počítačom, s obsahom značky.
Prvok kontajnera pre prvok rozbaľovacieho zoznamu. Hodnoty variantov sú umiestnené v prvkoch.
Používa sa na opis výrazu zo značky.
Označí text ako odstránený prečiarknutím.
Vytvorí interaktívnu miniaplikáciu, ktorú môže používateľ otvoriť alebo zatvoriť. Predstavuje kontajner pre obsah, viditeľný názov miniaplikácie je umiestnený v značke.
Identifikuje slovo ako výraz uvedením kurzívy. Nasledujúci text by mal obsahovať definíciu tohto pojmu.
Interaktívny prvok, s ktorým používateľ interaguje, aby dokončil úlohu, ako napríklad dialógové okno, inšpektor alebo okno. Bez atribútu open nie je pre používateľa viditeľný.
Kontajnerová značka pre sekcie dokumentu HTML. Používa sa na zoskupenie prvkov bloku na formátovanie so štýlmi.
Kontajnerová značka obsahujúca výraz a jeho popis.
Používa sa na určenie termínu.
Zvýrazňuje dôležité pasáže textu ich zobrazením kurzívou.
Kontajnerová značka na vkladanie externého interaktívneho obsahu alebo doplnku.
Zoskupuje súvisiace prvky do formulára tak, že okolo nich nakreslí rámček.
Názov/nadpis prvku.
Samostatná kontajnerová značka pre obsah, ako sú ilustrácie, diagramy, fotografie, príklady kódu, zvyčajne s popisom.
Definuje koncovú oblasť (pätu) dokumentu alebo sekcie.
Formulár na zhromažďovanie a odosielanie informácií od používateľov na server. Bez atribútu action to nefunguje.
Vytvorte šesť úrovní nadpisov pre súvisiace sekcie.
Element kontajnera pre metadáta dokumentu HTML, ako napríklad , , , , .
Časť pre úvodné informácie o stránke alebo skupine navigačných odkazov. Môže obsahovať jeden alebo viac nadpisov, logo, informácie o autorovi.
Vodorovná čiara pre tematické členenie odsekov.
Koreňový prvok dokumentu HTML. Informuje prehliadač, že ide o dokument HTML. Je to kontajner pre všetky ostatné html prvky.
Kurzíva pasáž textu bez dodatočného zvýraznenia.
Vytvorí vložený rámec načítaním iného dokumentu do aktuálneho dokumentu HTML.
Vloží obrázky do dokumentu HTML pomocou atribútu src, ktorého hodnota je adresa URL vloženého obrázka.
Vytvára polia bohatého formulára, do ktorých môže používateľ zadávať údaje.
Zvýrazní text podčiarknutím. Používa sa na zvýraznenie zmien vykonaných v dokumente.
Vyberie text, ktorý má používateľ zadať pomocou klávesnice jednopriestorovým písmom.
Používa sa na uloženie dodatočných informácií o stránke. Tieto informácie používajú prehliadače na spracovanie stránky a vyhľadávače na jej indexovanie. V bloku môže byť niekoľko značiek, pretože v závislosti od použitých atribútov nesú rôzne informácie.
Indikátor merania v danom rozsahu.
Časť dokumentu obsahujúca navigačné odkazy na lokalitu.
Definuje sekciu, ktorá nepodporuje skriptovanie.
Kontajner na vkladanie multimédií (napr. audio, video, Java applety, ActiveX, PDF a Flash). Do aktuálneho dokumentu HTML môžete vložiť aj inú webovú stránku. Značka sa používa na odovzdávanie parametrov doplnku.
Objednaný číslovaný zoznam. Číslovanie môže byť číselné alebo abecedné.
Kontajner s názvom pre skupinu prvkov.
Určuje možnosť/možnosť na výber z rozbaľovacieho zoznamu , alebo .
Pole pre zobrazenie výsledku výpočtu vypočítaného pomocou skriptu.

Odseky v texte.
Definuje parametre pre pluginy vložené pomocou prvku.
Prvok kontajnera obsahujúci jeden prvok a nula alebo viac prvkov. Sama o sebe nič nezobrazuje. Umožňuje prehliadaču vybrať najvhodnejší obrázok.
Vydáva text bez formátovania, zachováva medzery a zalomenia textu. Môže sa použiť na zobrazenie počítačového kódu, e-mailových správ atď.
Indikátor dokončenia úlohy akéhokoľvek druhu.
Definuje krátku citáciu.
Kontajner pre východoázijské symboly a ich dekódovanie.
Definuje svoj vnorený text ako základný komponent anotácie.
Pridá krátky popis nad alebo pod znaky obsiahnuté v prvku zobrazený menším písmom.
Označí vložený text ako dodatočnú anotáciu.
Zobrazuje alternatívny text, ak prehliadač daný prvok nepodporuje.
Zobrazuje text, ktorý nie je aktuálny, s prečiarknutím.
Používa sa na zobrazenie textu reprezentujúceho výsledok programového kódu alebo vykonávania skriptu, ako aj systémových správ. Zobrazuje sa jednopriestorovým písmom.
Používa sa na definovanie skriptu na strane klienta (zvyčajne JavaScript). Obsahuje buď text skriptu, alebo odkazuje na externý súbor skriptu pomocou atribútu src.
Definuje logickú oblasť (sekciu) stránky, zvyčajne s hlavičkou.
Ovládací prvok, ktorý vám umožňuje vybrať hodnoty z navrhovanej sady. Hodnoty variantov sú umiestnené v .
Zobrazí text menšou veľkosťou písma.
Určuje umiestnenie a typ alternatívnych mediálnych prostriedkov pre , , .
Kontajner pre inline prvky. Dá sa použiť na formátovanie pasáží textu, ako je zvýraznenie jednotlivých slov.
Zvýrazňuje text a zvýrazní ho tučným písmom.
Obsahuje vložiteľné štýly.
Určuje dolný index písanie symbolov, napríklad index prvkov v chemických vzorcoch.
Vytvorí viditeľný názov pre značku. Zobrazený s vyplneným trojuholníkom, kliknutím naň môžete zobraziť podrobnosti o titule.
Určuje horný index pravopisu znakov.
Značka na vytvorenie tabuľky.
Definuje telo tabuľky.
Vytvorí bunku tabuľky.
Používa sa na deklarovanie fragmentov kódu HTML, ktoré možno naklonovať a vložiť do dokumentu pomocou skriptu. Obsah značky nie je jej potomkom.
Vytvára veľké polia na zadávanie textu.
Definuje pätu tabuľky.
Vytvorí názov bunky tabuľky.
Definuje názov tabuľky.
Definuje dátum/čas.
Názov dokumentu HTML, ktorý sa zobrazuje v hornej časti záhlavia prehliadača. Môže sa zobraziť aj vo výsledkoch vyhľadávania, takže to treba vziať do úvahy pri poskytovaní názvu.
Vytvorí riadok tabuľky.
Pridáva titulky pre prvky a .
Zvýrazní pasáž textu podčiarknutím bez ďalšieho zvýraznenia.
Vytvorí zoznam s odrážkami.
Zvýrazňuje premenné z programov ich zobrazením kurzívou.
Pridá video súbory na stránku. Podporuje 3 video formáty: MP4, WebM, Ogg.
Označuje prehliadač, kde sa môže prerušiť dlhý riadok.
Cheat list so značkami

Pre uľahčenie používania som značky zoskupil do tematických sekcií a pridal hodnoty vlastností zobrazenia pre každú značku. Ak chcete prejsť na tabuľku, kliknite na obrázok.

HTML je bežný textový súbor s príponou .htm (html). Na vytvorenie jednoduchej stránky na začiatku, keď práve trénujete, potrebujete iba poznámkový blok. Otvorte poznámkový blok a napíšte nejaký text.

Každý prvok HTML je značka ohraničená zátvorkami. Akýkoľvek súbor, html stránka začína značkou a končí značkou.

Táto značka jednoducho indikuje prehliadaču (to je program, v ktorom si prezeráte internetové stránky), že tento dokument je html značkovací dokument.

Značka znamená začiatok html dokumentu a záverečná značka znamená koniec html dokumentu.



V rámci týchto značiek existuje niekoľko ďalších dôležitých značiek. Hneď za značkou sú značky označujúce názov stránky a telo stránky.


Moja prvá HTML stránka




Značka znamená názov nadpisu okna pri zobrazení tejto stránky.
Teraz môžete vytvoriť nový textový dokument v programe Poznámkový blok, skopírovať text uvedený vyššie a uložiť ho ako Page1.html a spustiť ho v prehliadači, v záhlaví okna prehliadača uvidíte názov stránky a prázdna strana, pretože V značkách nezobrazujeme nič v tele stránky.

Takže vyššie uvedený text bude pre nás základnou kostrou akejkoľvek webovej stránky.

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

, , Sú to len párové značky - tie značky, ktoré prichádzajú ako pár: značka a jej uzatváranie, uzatváracia značka so symbolom /. V prípade párových značiek je hodnota obsiahnutá medzi začiatkom značky a jej koncom akciou značky. Akcia bude pokračovať, kým sa nenájde značka so symbolom /.

Nespárované značky – nemajú uzatváraciu značku. Nižšie uvádzame príklady takýchto značiek.

— Názov html stránky, ktorý obsahuje kľúčové slová pre vyhľadávače, rôzne skripty atď.

— Telo samotného html dokumentu.


Nespárovaná značka.

Poznámka: Vo väčšine prípadov sa teraz pri vytváraní webových stránok používajú hotové rutiny, pluginy atď. – pre rýchlejšie vytváranie stránok, ale na použitie a používanie takýchto rutín a šablón je stále potrebná minimálna znalosť údajov relácie.

Označiť ( pl. tagy, niekedy tag) je prvok jazyka HTML, ktorý sa používa na označenie zdrojového textu webovej stránky. Značky sú skratky alebo skratky anglických slov uzavreté v lomených zátvorkách, napríklad tag

…

skratka anglického slova odsek, to znamená, že text v tejto značke budú prehliadače rozpoznané ako odsek.

Každá značka v HTML má špeciálny význam a je zodpovedná za zobrazenie určitých údajov. Na veľkosti písmen v názvoch tagov nezáleží, napríklad tag

…

a tag

…

- To je to isté. To znamená, že značky možno písať malými aj veľkými písmenami. Predtým bolo bežnou praxou písať všetky značky veľkými písmenami, aby sa značky líšili od bežného textu. Teraz to nie je potrebné, pretože veľa editorov má zvýraznenie syntaxe.

Klasifikácia značiek

V HTML je viac ako 90 značiek. Jedna značka zvyčajne ovplyvňuje iba časť dokumentu, napríklad značku nadpisu prvej úrovne... V takýchto prípadoch sa používajú párové značky: otvorenie A zatváranie. Úvodná značka (napríklad ) vytvorí efekt a záverečná značka ( ) efekt zastaví. Ako vidíte z príkladu, koncová značka má vždy tento symbol (/) - lomku. Tieto značky sa nazývajú štvorhra.

Niektoré značky poskytujú jednorazový efekt tam, kde sa objavia. Napríklad značka vodorovného pruhu alebo značka zobrazenia obrázka . Takéto štítky nemajú uzatváracie štítky. Takéto značky sa nazývajú nepárové.

Typy značiek

Okrem toho sú značky rozdelené do niekoľkých typov, ktoré sa líšia svojimi funkciami:

  • štítky názvov dokumentov;
  • blokové prvky;
  • vložené prvky;
  • univerzálne prvky;
  • zoznamy;
  • tabuľky;
  • rámy.

Toto rozdelenie nie je striktné, preto sú niektoré značky v rôznych skupinách. Napríklad značky na vytváranie zoznamov a