Rozdiel medzi DIV a SPAN

a sú to značky HTML, ktoré definujú prvky v kóde HTML.

HTML (Hypertext Markup Language) je štruktúrovaný kód, ktorý sa používa na vytváranie a zobrazovanie webových stránok, ktoré každý deň navštevujeme na akomkoľvek zariadení..

S technológiou HTML možno integrovať ďalšie technológie a programovacie jazyky, aby poskytovali dynamické a pokročilé funkcie na webovej stránke.

Pochopenie HTML

Hypertext Markup Language (HTML) je značne používaný značkovací jazyk a odkazuje na štruktúru a kód „za“ webovú stránku zobrazenú vo webovom prehliadači.

HTML je textový súbor používajúci špecifický kód (syntax) na definovanie štýlu, obsahu, rozloženia a formátu stránky. Markup Výraz "text / kód" sa pripravuje na spracovanie a prezentáciu, t. j. na webovej stránke, vo webovom prehliadači.

World Wide Web Consortium (W3C) [i] uznáva HTML ako formálny značkovací jazyk vo vývoji webových stránok, a preto HTML podporuje väčšina prehliadačov. Webové stránky tak môžu byť vyvinuté v uznávanom jazyku, ľahko interpretovateľné rôznymi prehliadačmi, aby vykreslili stránku tak, ako to navrhol dizajnér.

Aktuálna verzia, ktorá sa stále používa, je HTML4, ale pomaly sa postupne vyraďuje, pretože HTML5 získava väčšiu podporu a prispôsobenie pre dynamické a pohotové webové stránky..

Schopnosť reagovať sa stáva základným prvkom vo vývoji webových stránok, aby poskytovala jednoduchšiu a dynamickejšiu používateľskú skúsenosť, ktorá musí byť prispôsobená viacerým zariadeniam, ako sú smartphony, tablety a notebooky..

Kaskádové štýly (CSS) sa stáva neoddeliteľnou súčasťou budovania dynamických a responzívnych stránok. Je to samostatný súbor definujúci atribúty pre každý prvok, ako je písmo, farba, zarovnanie - takže vývojár nemá označený štýl prvku zakaždým, keď sa použije v kóde HTML..

Základná štruktúra HTML

Ak chcete získať čo najviac z akéhokoľvek vývojového jazyka, dodržiavanie štandardnej štruktúry súborov a zváženie najlepšieho použitia syntaxe sú kľúčové pri poskytovaní stabilného, ​​účelného a vizuálne príťažlivého webového obsahu..

Stránka HTML má štruktúru definovanú prvkami (označované aj ako značky). Pri písaní kódu HTML sa tieto prvky zobrazujú v pároch - to znamená, že každá značka potrebuje otvor a koniec. Začiatok a koniec.

Prvok sa otvorí so syntaxou: a uzavreté.  / šikmá čiara označuje koniec definície tohto prvku.

Atribúty prvku a obsah sú definované medzi týmito dvoma bodmi.

minimálne prvky Pre súbor HTML sú potrebné definície, ((iba HTML4) a značky.

• Definícia DOCTYPE

Definícia (DTD) musí byť najprv deklarovaná ako prvá značka v súbore HTML, takže keď sa stránka spracuje, webový prehľadávač vie, aký je typ súboru, a preto môže stránku správne interpretovať a zobraziť..

V HTML4 existujú variácie DTD (v závislosti od atribútov a prvkov stránky), ale typickejšie príkazy by boli zahrnuté ako:

alebo

DTD v HTML5 je omnoho jednoduchšie:

· HTML, HEAD a BODY

• Značka označuje, že ide o súbor HTML a toto je koreň prvku HTML, ktorý obsahuje všetky ďalšie nasledujúce prvky definované v ňom; ako najlepšia prax sa odporúča zahrnutie atribútu jazyka; napríklad:

• V HTML4 sa vyžaduje, ale v HTML5 nie je povinné. Je to prvok, ktorý obsahuje ďalšie prvky relevantné pre túto časť dokumentu, napríklad názov, referenčné skripty, definovanie štýlov a metaúdaje. Uzatvorená značka sa musí použiť pred definovaním 
• Prvok obsahuje hlavný obsah stránky vrátane tabuliek, textov obrázkov, zoznamov atď. Po zatvorení značky sa prvok teraz môže skončiť. Použitie nového prvku HTML5 je pre stránku alebo v inej časti obsahu voliteľné.

Prvky HTML

HTML5 vytvoril nové prvky pre ľahký vývoj a dizajn a odstránil tiež prvky používané v HTML4. Zoznam rozdielov medzi HTML4 a HTML5 uverejňuje konzorcium World Wide Web (W3C) [ii].

HTML DIV TAG

Spolu s vylepšeniami a novými prvkami v kombinácii s pokrokom CSS sa môžu niektoré prvky používať rôznymi, lepšími spôsobmi ako predtým, a webové stránky sa stávajú rýchlejšími, bohatšími na funkcie a krajšie na prezeranie! s CSS, použitý s HTML5 môže nahradiť niektoré prvky, ktoré boli príliš použité, ako napríklad .

Značka je populárna pri segregácii obsahu na stránke. Pri vytváraní tohto prvku automaticky vloží zlom
aby text alebo obsah zostali spolu, namiesto toho, aby ste prechádzali textom po stránke.

S prístupnosťou webových stránok a optimalizáciou vyhľadávacieho nástroja sa techniky stávajú pomerne vedeckou záležitosťou a odporúča WC3, aby sa vždy nevracali k používaniu v HTML5..

Ako príklad elegantne štruktúrovaného, ​​ale jednoduchého formátu blogu zvážte nové prvky HTML5 s CSS namiesto použitia prvku; použite element pre hlavný obsah, element na zvýraznenie alebo oddelenie akéhokoľvek obsahu na stránke, hlavičke alebo päte (kdekoľvek!) a prvok môžete použiť na pridržanie odkazov v ponuke alebo skupine na prehľadávanie zo stránky.

Tieto nové prvky ľahko identifikujú typ obsahu pomocou HTML5. Značka sa však používa aj v CSS na vytváranie responzívnych webových stránok.

Vytvorením každého prvku (s jeho vlastným id alebo triedou) je možné definovať súbor CSS na manipuláciu s každým prvkom.

V nasledujúcom príklade HTML je uvedený príklad použitia viacerých prvkov:

Moje príklady

Prvky môžu mať rôzne atribúty, konkrétne rôzne veľkosti pre responzívnu interakciu v závislosti od veľkosti obrazovky používaného zariadenia.

Tu je príklad, ako môže byť každý prvok štylizovaný v príslušnom súbore CSS HTML - odkazom na každú značku.

#Header

šírka: 800px;

výška: auto

margin-left: auto;

margin-left: auto;

#Featured

výška: 150px;

Background-color: #CCC;

ROZSAH TAGU HTML

Prvok je vloženým prvkom a nerozdeľuje sa na čiary, pokiaľ nie je prerušenie
je použitá značka a definovaný text (obsah) medzi otvorenou a zatvorenou značkou sa zobrazuje ako riadok (predvolene bez použitia ďalších prvkov).

Vložené prvky sú textové prvky v súbore HTML a môžu byť definované v rámci riadku iného prvku.

Rovnako ako prvok nemá význam pre optimálne referencovanie. V podstate zobrazuje obsah prvku tak, ako je, ale všetky inštancie sa môžu definovať v CSS pre styling, ak sú správne označené a obohatené o ďalšie atribúty, alebo ak sa s nimi manipuluje pomocou JavaScriptu.

V nasledujúcom príklade modrý text zdôrazňuje, ako môže byť prvok rozpätia vnorený ako vložený prvok s rôznymi atribútmi ako jeho nadradený prvok - odsek p>:

Príklad otvoríte kliknutím na ikonu v dolnej časti stránky.

Pri zobrazení vo webovom prehľadávači sa text vyššie uvedeného prvku zobrazí iným písmom ako v odseku, aby sa zdôraznilo, kde musí používateľ kliknúť, aby získal prístup k príkladu.

Upozorňujeme, že medzi HTML4 a HTML5 nie sú žiadne rozdiely.