19 etichete HTML utilizate în mod obișnuit pe care să le cunoașteți pentru începători
Publicat: 2022-12-08Dacă vrei să devii un dezvoltator front-end, unul dintre cele mai comune sfaturi pe care le vei primi este să înveți HTML. Hypertext Markup Language, abreviat HTML, este baza majorității paginilor web.
HTML este format din diferite lucruri, cum ar fi etichete, atribute și elemente. Accentul nostru va fi etichetele HTML. Folosim etichete HTML pentru a le spune browserelor cum să structureze conținutul în titluri, titluri, paragrafe, imagini și multe altele. Etichetele HTML sunt astfel ca cuvintele cheie care definesc modul în care browserul va afișa sau va forma conținutul.
Serverele citesc etichetele HTML de sus în jos. Nu există nicio restricție privind numărul de etichete HTML pe care ar trebui să le aibă o pagină web.
- Toate etichetele HTML sunt incluse în
<> - Fiecare etichetă HTML îndeplinește o funcție diferită
- Majoritatea etichetelor HTML au
<tag>de deschidere și</tag>de închidere
Etichete HTML vs. elemente HTML vs. atribute HTML
Majoritatea oamenilor folosesc termenii etichete și elemente HTML în mod interschimbabil. Dar sunt la fel? Din punct de vedere tehnic, elementele HTML și etichetele HTML sunt diferite.
Etichetele HTML definesc elementele HTML. Pentru a realiza acest lucru, conținutul este împachetat folosind un nume de etichetă de deschidere și de închidere care se potrivește cu conținutul etichetei cu care lucrăm.
Acesta este un exemplu de element HTML:
<p> This is a paragraph </p><p> este un exemplu de etichetă HTML
Atributele HTML oferă informații suplimentare despre elementele HTML dintr-un document. Atributele se găsesc în elementele HTML.
Acesta este un exemplu de atribut HTML
<button id=" SubmitOrder" class="btn">Order</button>Etichete HTML ar trebui să știe toată lumea
HTML ca limbaj de marcare a evoluat de-a lungul anilor de când Tim Berners-Lee l-a introdus în 1993. Prima versiune HTML avea 18 etichete. Sunt adăugate noi etichete cu fiecare versiune HTML; cea mai recentă actualizare a fost HTML5 în 2014.
O comparație strânsă între HTML și HTML5 arată că acesta din urmă are etichete semantice precum <articol>, <head> și <footer> care descriu în mod clar conținutul. Acum avem peste 100 de etichete HTML. Următoarele sunt câteva dintre cele mai populare etichete pe care ar trebui să le cunoașteți:
<!DOCTYPE>
DOCTYPE nu este din punct de vedere tehnic o etichetă, ci o declarație care spune browserului ce tip de fișier va fi încărcat. Această etichetă spune browserului tipul de HTML care va fi încărcat.
În HTML5, vă puteți declara fișierul ca
<!DOCTYPE html>Sau
<!doctype html>Notă: Declarația nu are o etichetă de închidere și nu face distincție între majuscule și minuscule.
<html> </html>
Eticheta <html> ..... </html> vine după eticheta DOCTYPE. Această etichetă definește documentul ca o pagină web; orice alt element va fi imbricat în interior. Eticheta HTML specifică începutul și sfârșitul unui document HTML.
O etichetă <html> este reprezentată ca;
<html>Content</html><cap>>
Secțiunea de cap a unui document HTML este reprezentată de o etichetă <head>. Această etichetă este inclusă în eticheta <html> și oferă informații generale despre pagina web.
Eticheta <head> conține alte etichete care oferă detalii specifice paginii web, cum ar fi titlul și autorul paginii. Conținutul acestei etichete nu este afișat pe pagina web
Aceasta este sintaxa unei etichete <head>;
<head> …….. </head><title></title>
Eticheta <title> declară titlul paginii web. Această etichetă este inclusă în eticheta <head>. Eticheta <title> va apărea pe bara de titlu sau pe fila din fereastra browserului, dar nu pe pagina web reală.
Sintaxa pentru eticheta <title> este;
<title>HTML Tags for Beginners</title>Când se află în interiorul unei etichete <head>, aceasta va apărea ca;
<head> <title>HTML Tags for Beginners</title> </head><body> </body>
Eticheta <body> afișează tot conținutul vizibil pe o pagină web. Imagini, linkuri, text simplu, videoclipuri și multe altele pot fi găsite în etichetele <body> și </body>.
Unele dintre celelalte etichete pe care le veți găsi în interiorul corpului includ eticheta <p> pentru paragraf, eticheta <a> pentru imagini, eticheta <strong> pentru text aldin și eticheta <ol> pentru o listă ordonată, ca să menționăm câteva.
Sintaxa pentru eticheta <body> este;
<body> Content </body>Etichete de la <h1> la <h6>
Într-un document HTML pot exista până la 6 etichete de titlu. Fiecare dintre etichete este reprezentată de un număr care începe de la 1 la 6 ca <h1>, <h2>, <h3>, <h4>, <h5> și <h6>.
H1 este cea mai mare etichetă de antet, în timp ce H6 este cea mai mică.
Într-un document HTML, etichetele de titlu pot fi reprezentate după cum urmează:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>Etichetele <h1> până la <h6> sunt incluse în eticheta <body>.
De exemplu, o etichetă ,<H1> va fi inclusă ca;
<body> <h1> This is heading 1 >/h1> </body><p> </p>
Eticheta <p> </p> sau pur și simplu paragraf este folosită atunci când doriți să structurați conținutul într-un paragraf. Atingerea butonului „Enter” dintr-un document HTML din editorul de cod nu va crea un nou paragraf.
Dacă doriți mai mult de un paragraf, trebuie să utilizați mai multe etichete <p> </p> pe document. Etichetele de paragraf ar trebui să fie incluse în eticheta <body >.
Sintaxa pentru o etichetă de paragraf este;
<p> ….some content here….</p>Dacă doriți să aveți patru paragrafe, codul dvs. va fi structurat ca;
<body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body><b> </b>
Eticheta <b> </b> sau pur și simplu bold va formata orice conținut între deschiderea <b> și închidere </b> ca aldine.
Eticheta aldină poate fi între un titlu, cum ar fi H1 sau chiar într-o etichetă de paragraf.
Acestea sunt exemple de etichetă îndrăzneață;
<b> Bold Tag </b>Expresia „Etichetă îndrăzneață” va apărea îngroșată.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>Ediția a cincea va fi îngroșată.
<i> </i>
Tag-ul italic, notat cu <i>, scrie italic textul din interiorul etichetelor.
De exemplu, dacă avem
<i> These are italics </i>Cuvintele „ acestea sunt cursive ” vor apărea cu caractere cursive.
<u> </u>
Eticheta de subliniere, sau <u>, este folosită atunci când doriți să subliniați o anumită bucată de text într-un document HTML.
De exemplu, dacă avem;
<u> underline these words </u>Expresia dintre etichete va fi subliniată.
<center> </center>
Eticheta Center, <center>, este folosită pentru a centra conținutul pe un document HTML.
De exemplu, dacă avem o etichetă h2 scrisă ca <h2> Centering Content in HTML </h2> , o putem centra după cum urmează;
<center> <h2> Centering Content in HTML </h2> </center><span></span>
Eticheta Span, <span>, este un container inline generic care nu vine cu un stil implicit. Puteți folosi eticheta span pentru a grupa textele pe care doriți să le modelați.
Puteți include etichete în interiorul altor etichete, cum ar fi titluri și paragrafe;
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2> <p> Learn HTML <span> from experts </span> and be ready for the market </p><div></div>
O etichetă de diviziune, abreviată ca div, este o etichetă care vă permite să grupați diferite etichete într-un document HTML.
O etichetă div poate primi o „clasă” pentru a adăuga stil extern folosind CSS.
Acesta este modul în care va fi reprezentat un div care include un h1, h2 și o etichetă de paragraf.
<div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div><em></em>
Accentuarea, sau eticheta <em>, este folosită pentru a sublinia anumite cuvinte dintr-un document HTML.
Conținutul dintre etichetele <em> va apărea înclinat sau italicizat.
Conținutul accentuat dintr-un paragraf poate apărea într-un editor de cod va apărea ca;
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p><sup></sup>
Eticheta <sup> sau superscript permite textului inclus să fie deasupra restului. Un exemplu perfect este atunci când doriți să pătrați un număr X și să îl reprezentați matematic pentru a vă da X 2
Sintaxa pentru <sup> dintr-o etichetă de paragraf va fi;
<H1> Harveys <sup>TM </sup> Company Limited </H1><sub></sub>
Eticheta indice sau <sub> este opusul etichetei superscript. Conținutul inclus în eticheta <sub> va apărea sub linia normală de text. Un exemplu perfect este atunci când scrieți formula chimică a apei ca H 2 0.
Sintaxa pentru eticheta indice va fi;
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
<br> este o etichetă cu auto-închidere care reprezintă o pauză. Tot conținutul după <br> va începe pe o linie nouă.
Sintaxa pentru <br> dintr-un paragraf va fi;
<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><ol></ol> și <li> </li>
Eticheta de listă ordonată sau <ol> trebuie să fie utilizate împreună cu o altă etichetă, cum ar fi <li>.
Cele două pot apărea pe un editor de cod ca;
<ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>Când este redat în browser, conținutul va apărea numerotat.
<img src="”/>
Poate doriți să adăugați o imagine pentru atracție vizuală sau chiar un logo. Eticheta de imagine cu auto-închidere, <img src="”/>, este utilă într-un astfel de caz.
Sintaxa pentru eticheta de imagine va fi;
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>Conținutul cuprins între ghilimele reprezintă adresa URL sursă.
Încheierea
Există peste 100 de etichete HTML, dar cele de mai sus sunt cele pe care ar trebui să le cunoașteți ca începător. HTML este acceptat în majoritatea editorilor de cod și, astfel, sunteți sigur că nu veți greși niciodată atunci când începeți să învățați.