TAGS

HTML Tags
Tag-uri de bază
DENUMIRE DESCRIERE TAG ATRIBUTE EXEMPLU
TAG PRINCIPALE
<!DOCTYPE> Definește tipul <!DOCTYPE html>
documentului
 Definește un comentariu <!—Acesta este un
comentariu. El nu apare în
browser-->
<p>Aici urmează
paragraful.</p>
<body> Definește corpul background- body {
documentului color – setează background-color:
#5E63DF;
culoarea } ...... </body>
fundalului
<br> Inserează o linie de pauză
<html> Definește un document lang – <html lang="en">

HTML definește limba
documentului
<head> Conține
metadata/informații pentru
document
<h1> până Definește rubricile HTML <h1>Aceasta este o
la<h6> rubrică.</h1>
<hr> Definește o schimbare <p>Aici se vorbește despre
tematică în conținut Moldova</p>
<hr>
<p>Aici se vorbește despre

America</p>
<p> Definește un paragraf <p>Acesta este un
paragraf.</p>
<title> Definește titlul <title>Acesta este
documentului titlul.</title>
Tag-uri de formatare
TAG PRINCIPALE
<abbr> Definește o abreviație sau România face parte din<abbr
un acronim title="United
Europe">UE</abbr>
<address> Definește o informație de
contact pentru autorul
documentului/articolului
<b> Definește textul bold <p><b>Acest text va fi
scris cu bold.</b> </p>
<blockquote Definește o secțiune citată cite – cu <blockquote
> din altă sursă valoarea URL cite="https://iucosoft.com/
">
– specifică Începe schimbarea în viața
sursa citatului ta. Descoperă-te pe tine
însuți.
</blockquote>
<cite> Definește titlul unei lucrări <p><cite>Luceafărul</cite>
de artă (pictură, cântec, de Mihai Eminescu.
....</p>
carte, poezie, etc)
<code> Definește o secțiune de <p>Textul dintr-un document
cod de computer. HTML trebuie să fie inclus
în <code> body </code></p>
Conținutul din interior este
arătat în broswer în font-ul
de bază.
<del> Definește un text tăiat/care cite – <p>Liliacul este <del>o
a fost șters din document. specifică un pasăre</del> <ins>un
mamifer</ins>!</p>
URL către un
document care
explică de ce a
<ins> Definește un text care a fost
fost inserat în document șters/schimbat
textul
datetime –
specifică data
și ora când
textul a fost
șters/schimbat.
<mark> Accentuează/marchează <p>Programarea la medic
un text este pentru
<mark>Luni</mark>la ora
<mark>14:00.</mark></p>
<small> Definește un text cu o <p>Aici este un text
dimensiune mai mică normal</p>
<sub> Definește un text subscris <p>Această propoziție conține

(care se află în partea un cuvânt
inferioară a rândului) <sub>subscris</sub></p>
<sup> Definește un text <p>Această propoziție conține
suprascris (care se află în un cuvânt
partea superioară a <sup>suprascris</sup></p>
rândului)
<time> Definește o dată, oră datetime – <p>Restaurantul lucrează de
specifică. reprezintă un la <time>8:00</time> până
la <time>23:00</time> în
mecanism de fiecare zi.</p>
citire în
formatul <p>Trebuie să zbor acasă la
timpului (dată, familie de<time
oră) datetime="2008-12-24
17:00">Crăciun </time>.</p>
<var> Definește o variabilă <p>Pentru a obține
rezultatul final, se vor
suma elementele
<var>a</var> și
<var>b</var>.</p>
Tag-uri de formulare(forme) și intrări

TAG PRINCIPALE
<button> Definește un buton type - specifică <button type="button"
care poate fi accesat cu tipul butonului name="apasă">Apasă-mă!
</button>
ajutorul unui click. name - specifică
numele unui buton
<datalist> Specifică o listă de Atibutul id trebuie <label for="browser">Choose
opțiuni predefinite să fie același ca your browser from the
pentru controalele de atributul de list:</label>
intrare introducere a listei <input list="browsers"
cu elemente name="browser"
id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<form> Definește o formă action – <form
HTML pentru intrarea specifică unde să action="/action_page.php">
<label for="fname">First
utilizatorului trimită datele din name:</label>
formular când <input type="text"
acesta este depus id="fname"
method –(cu name="fname"><br><br>
valoarea get/post) <label for="lname">Last
name:</label>
specifică ce <input type="text"
metodă HTTP să id="lname"
folosească la name="lname"><br><br>
trimiterea datelor <input type="submit"
din formular value="Submit">
</form>
rel – specifică
relația dintre link-
ul sursă și
documentul curent
<fieldset> Grupează elementele name - specifică <form

asemănătoare într-un numele action="/action_page.php">
<fieldset>
formular formularului <label
for="nume">Numele:</label>
<input type="text"
id="nume"
name="nume"><br><br>
<label for="prenume">
Prenume:</label>
<input type="text"
id="prenume"
name="prenume"><br><br>
<label
for="email">Email:</label>
<input type="email"
id="email"
name="email"><br><br>
<label
for="datanasterii">Data
nașterii:</label>
<input type="date"
id="datanasterii"
name="datanasterii"><br><br
>
<input type="submit"
value="Submit">
</fieldset>
</form>
<input> Definește un control de type – (button, Exemplul de mai sus
intrare (introducere) checkbox, email,
image, month...
etc) specifică tipul
de afișare a
elementului de
intrare
value – specifică
valoarea unui
elemente de intrare
<label> Definește o etichetă for - specifică Exemplul de la <form>

pentru un element de id-ul elementului
intrare din formular,
eticheta de care
trebuie să fie
conectat
form - specifică
cărui formular
aparține eticheta
<optgroup>
<output> Definește rezultatul for - specifică <form

unui calcul relația dintre oninput="x.value=parseInt(a.v
rezultatul alue)+parseInt(b.value)">
calculului și <input type="range" id="a"
elementele folosite value="50">
în calcul +<input type="number"
form - specifică id="b" value="25">
cărui formular =<output name="x" for="a
aparține elementul b"></output>
de ieșire </form>
name - specifică
numele
elementului de
ieșire
<select> Definește o listă care name – face <select name="culori"
poate fi derulată referire la datele id="culori" size="4">
<option
formularului (dacă value="rosu">Roșu</option>
se omite acest <option
atribut, atunci nici value="galben">Galben</opti
o informație din on>
lista nu va fi <option
value="verde">Verde</option
trimisă)
>
id - asociază <option
zona de text cu o value="albastru">Albastru</
etichetă option>
number - setează </select>
nr de opțiuni
vizibile din listă
<textarea> Definește zona de text name – face

(mai multe linii) pentru referire la datele
controlul de intrare formularului (dacă
se omite acest
atribut, atunci nici
o informație din
zona de text nu va
fi trimisă)
<textarea id="exemplu"
id - asociază name="Exemplu" rows="4"
zona de text cu o cols="25" maxlength="100">
etichetă Acesta este un exemplu de
name – setează zonă de text.
</textarea>
un nume zonei de
text
maxlength -
setează nr maxim
de caractere al
zonei de text
cols – specifică
lățimea vizibilă a
zonei de text
rows - specifică
numărul de linii
vizibile a zonei de
text
Tag-uri folosite la crearea imaginilor

TAG PRINCIPALE
<area> Definește o zonă în coords – <map name="workmap">
interiorul imaginii-hărți. specifică <area shape="rect"
Astfel ea trebuie să se afle coordonatele coords="34,44,270,350"
mereu în interiorul tagului zonei alt="Computer"
href="computer.htm">
<map> href - <area shape="rect"
specifică link- coords="290,172,333,250"
ul către zona alt="Phone"
targetată href="phone.htm">
shape – <area shape="circle"
coords="337,300,44"
specifică forma alt="Cup of coffee"
zonei din mapă href="coffee.htm">
</map>
<canvas> Se folosește pentru height -
desenarea graficelor, via specifică
scripting înălțimea
pânzei.
Valoarea
automată este
150
width –
specifică
lățimea pânzei.
Valoarea
automată este
300
<figure> Specifică elemente din <figure>

propriul conținut <img src="pic_trulli.jpg"
alt="Trulli"
style="width:100%">
<figcaption>Fig.1 -
Trulli, Puglia,
Italy.</figcaption>
</figure>
<figcaption Definește o captură pentru Exemplul de la <figure>
> un element al <figure>
<img> Definește o imagine src - <img src="img_sky.jpg"
specifică sursa alt="The blue sky"
width="400" height="550">
imaginii
alt -
specifică un
text alternativ
al imaginii, în
caz că
imaginea nu
poate fi afișată
<map> Definește o hartă sub name – Exemplul de la <area>

formă de imagine obligatoriu.
Specifică
numele
imaginii-hărți
<picture> Definește un container <picture>
pentru mai multe surse ale <source media="(min-
width:650px)"
imaginilor srcset="img_pink_flowers.jp
g">
<source media="(min-
width:465px)"
srcset="img_white_flower.jp
g">
<img
src="img_orange_flowers.jpg
" alt="Flowers"
style="width:auto;">
</picture>
Tag-uri pentru crearea conținutului audio/video

TAG PRINCIPALE
<audio> Definește un conținut controls- Exemplul de mai jos
sonor specifică un
control al
elementului
audio, precum
play/pause.
<source> Definește multiple resurse srl- <audio controls>

media pentru elementele obligatoriu <source src="horse.ogg"
type="audio/ogg">
media (<video>, <audio> când <source> <source src="horse.mp3"
și <picture>) este folosit în type="audio/mpeg">
<audio> și </audio>
<video>.
Specifică
URL-ul
fișierului
media
srcset-
obligatoriu
când <source>
este folosit în
<picture>.
Specifică
URL-ul
imaginii să fie
folosit în
diferite situații
<track> Definește textul din track- srl- <track
uri pentru elemente media obligatoriu. src="fgsubtitles_en.vtt"
kind="subtitles"
(<video> și <audio>) Specifică srclang="en"
URL-ul track- label="English">
ului
<video> Definește un video sau un <video width="320"
film height="240" controls>
<source src="movie.mp4"
type="video/mp4">
<source src="movie.ogg"
type="video/ogg">
</video>
Tag-uri pentru crearea linkurilor

TAG PRINCIPALE
<a> Definește un hyperlink href - indică <a
detinația href="https://www.iucosoft.
com">Visit IUCOSOFT.com!
linkului
</a>
<link> Definește relația dintre un rel- <head>
document și o sursă obligatoriu. <link rel="exemplu"
href="exempludestil.css">
externă. Este un element Specifică </head>
gol, care conține doar relația dintre
atribute documentul
curent și cel al
link-ului
href-specifică
locația
documentului
cu link-ul
<nav> Definește linkurile de <nav>
navigare <a href="/html/">HTML</a>
|
<a href="/css/">CSS</a> |
<a
href="/js/">JavaScript</a>
|
<a
href="/python/">Python</a>
</nav>
Tag-uri pentru crearea listelor

TAG PRINCIPALE
<dd> Definește o descriere a href - indică <a
unui termen/name în lista detinația href="https://www.iucosoft.
com">Visit IUCOSOFT.com!
de descriere linkului </a>
<dl> Definește o listă de <nav>
descriere <a href="/html/">HTML</a>
|
<a href="/css/">CSS</a> |
<a
href="/js/">JavaScript</a>
|
<a
href="/python/">Python</a>
</nav>
<dt> Definește un termen/nume <dl>
în lista de descriere <dt>Cafea</dt>
<dd>Băutură
fierbinte</dd>
<dt>Apa</dt>
<dd>Băutură rece</dd>
</dl>
<li> Definește un item din listă Exempelele de mai jos
<ol> Definește o listă ordonată start – <ol start="50">

specifică <li>Cafea</li>
<li>Ceai</li>
valoarea de <li>Apă</li>
start a unei </ol>
liste ordonate
<ul> Definește o listă <ul>

neordonată <li>Ceai</li>
<li>Cafea</li>
<li>Apă</li>
</ul>
Tag-uri pentru crearea tabelelor

TAG PRINCIPALE
<caption> Definește o legendă a <table>
tabelului <caption> Orar de
lucru</caption>
......
</table>
<col> Specifică proprietățile span – <table>
coloanei pentru fiecare din specifică nr de <colgroup>
<col span="2">
ea, în cadrul elementului coloane peste </colgroup>
<colgroup> care elementul ......
<col>trebuie </table>
să se extindă
<colgroup> Specifică un grup de unul span – Exemplul de mai sus

sau mai multe coloane specifică nr de
într-un tabel de formatare coloane peste
care gr de
coloane trebuie
să se extindă
<table> Definește un tabel <table>

<tr>
<th>Zi</th>
<th>Oră</th>
</tr>
<tr>
<td>Marți</td>
<td>10:00</td>
</tr>
</table>
<tbody> Grupează conținutul <table>
corpului în tabel <thead>
<tr>
<th>Lună</th>
<th>Cheltuieli</th>
</tr>
</thead>
<tbody>
<tr>
<td>Martie</td>
<td>100Olei</td>
</tr>
<tr>
<td>Aprilie</td>
<td>1500lei</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Mai</td>
<td>1200lei</td>
</tr>
</tfoot>
</table>
<td> Definește o celulă în tabel colspan – Exemplul de la <tbody>
specifică nr de
coloane peste
care o celulă
trebuie să se
extindă
rowspan –
specifică nr de
rânduri peste
care o celulă
trebuie să se
extindă
<tfoot> Grupează conținutul Exemplul de la <tbody>

subsolului într-un tabel
<th> Definește o celulă de antet abbr – Exemplul de la <tbody>
în tabel specifică o
versiune
abreviată a
conținutului
într-o celulă de
antet
scope –
specifică dacă
o celulă de
antet este antet
pentru o
coloană, rând
sau un grup de
coloane/rânduri
<thead> Grupează conținutul Exemplul de la <tbody>

antetului într-un tabel
<tr> Definește un rând în tabel Exemplul de la <tbody>
Tag-uri ce țin de stil și semantică

TAG PRINCIPALE
<article> Definește un articol <article>
<h2>Google Chrome</h2>
<p>Java is a programming
language..... </p>
</article>
<details> Definește detalii adiționale open – <details>
pe care utilizatorul poate specific dacă <summary>Pădurile
tropicale</summary>
să le vadă sau să le detaliul rebuie <p>Pădurile tropicale
ascundă să fie vizibil ocupă aproximativ 11% din
pentru suprafața terestră a
utilizator pământului</p>
</details>
<dialog> Definește o fereastră de open – <dialog open>Aceasta este o
dialog arată că fereastră de
dialog</dialog>
elementul de
dialog e active
și că
utilizatorul îl
poate folosi
<div> Definește o secțiune într- <html>
un document <head>
<style>
.myDiv {
border: 5px outset red;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>Acesta este un titlu
încadrat într-un div</h2>
<p>Aici este un text
încadrat într-un div.</p>
</div>
înafara div-ului.</p>
</body>
</html>
<footer> Definește un subsol pentru <footer>
un document sau o <p>Autor: Ana
Blandiana</p>
secțiune </footer>
<header> Definește un antet pentru <article>
un document sau o <header>
<h1>O rubrică aici</h1>
secțiune <p>..... </p>
<p>.....</p>
</header>
</article>
<main> Specifică conținutul <html>
principal al unui document <head>
<style>
main {
margin: 0;
padding: 5px;
background-color:
lightgray;
}
</style>
</head>
<body>
<main>
<h1>Cele mai populare
filme </h1>
<p>...... </p>
<h2>.......</h2>
<p>........ </p>
...............
</main>
</body>
</html>
<style> Definește informația Exemplul de mai sus
legată de stilul unui <main>
document
<summary> Definește un antet vizibil Exemplul de la <details>
pentru un element
<details>
Programming și meta info nu am pus

Tag-uri ce țin de stil și semantică

TAG PRINCIPALE
<article> Definește un articol <article>
<h2>Google Chrome</h2>
<p>Java is a programming
language..... </p>
</article>
<details> Definește detalii adiționale open – <details>
pe care utilizatorul poate specific dacă <summary>Pădurile
tropicale</summary>
să le vadă sau să le detaliul rebuie <p>Pădurile tropicale
ascundă să fie vizibil ocupă aproximativ 11% din
pentru suprafața terestră a
utilizator pământului</p>
</details>
<dialog> Definește o fereastră de open – <dialog open>Aceasta este o
dialog arată că fereastră de
dialog</dialog>
elementul de
dialog e active
și că
utilizatorul îl
poate folosi
<div> Definește o secțiune într- <html>
un document <head>
<style>
.myDiv {
border: 5px outset red;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>Acesta este un titlu
încadrat într-un div</h2>
încadrat într-un div.</p>
</div>
înafara div-ului.</p>
</body>
</html>
<footer> Definește un subsol pentru <footer>
un document sau o <p>Autor: Ana
Blandiana</p>
secțiune </footer>
<header> Definește un antet pentru <article>
un document sau o <header>
<h1>O rubrică aici</h1>
secțiune <p>..... </p>
<p>.....</p>
</header>
</article>
<main> Specifică conținutul <html>
principal al unui document <head>
<style>
main {
margin: 0;
padding: 5px;
background-color:
lightgray;
}
</style>
</head>
<body>
<main>
<h1>Cele mai populare
filme </h1>
<p>...... </p>
<h2>.......</h2>
<p>........ </p>
...............
</main>
</body>
</html>
<style> Definește informația Exemplul de mai sus
legată de stilul unui <main>
document
<summary> Definește un antet vizibil Exemplul de la <details>
pentru un element
<details>

TAGS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

TAGS

Încărcat de

Drepturi de autor:

Formate disponibile

HTML Tags

<html> Definește un document lang – <html lang="en">

<p>Aici se vorbește despre

<sub> Definește un text subscris <p>Această propoziție conține

Tag-uri de formulare(forme) și intrări

<fieldset> Grupează elementele name - specifică <form

<label> Definește o etichetă for - specifică Exemplul de la <form>

<output> Definește rezultatul for - specifică <form

<textarea> Definește zona de text name – face

Tag-uri folosite la crearea imaginilor

<figure> Specifică elemente din <figure>

<map> Definește o hartă sub name – Exemplul de la <area>

Tag-uri pentru crearea conținutului audio/video

DENUMIRE DESCRIERE TAG ATRIBUTE EXEMPLU

<source> Definește multiple resurse srl- <audio controls>

Tag-uri pentru crearea linkurilor

DENUMIRE DESCRIERE TAG ATRIBUTE EXEMPLU

Tag-uri pentru crearea listelor

DENUMIRE DESCRIERE TAG ATRIBUTE EXEMPLU

<ol> Definește o listă ordonată start – <ol start="50">

<ul> Definește o listă <ul>

Tag-uri pentru crearea tabelelor

DENUMIRE DESCRIERE TAG ATRIBUTE EXEMPLU

<colgroup> Specifică un grup de unul span – Exemplul de mai sus

<table> Definește un tabel <table>

<tfoot> Grupează conținutul Exemplul de la <tbody>

<thead> Grupează conținutul Exemplul de la <tbody>

Tag-uri ce țin de stil și semantică

DENUMIRE DESCRIERE TAG ATRIBUTE EXEMPLU

Programming și meta info nu am pus

DENUMIRE DESCRIERE TAG ATRIBUTE EXEMPLU

S-ar putea să vă placă și