Introducere în elementele semantice HTML5

Următorul articol vă va oferi diverse elemente semantice în html5. Să începem cu înțelegerea semanticii. Semantica se referă la diferite tipuri de etichete pe care funcționalitatea ar putea să le reprezinte și să îndeplinească aceeași funcție ca pe numele ei de etichetă. Funcționalitatea etichetei ar fi ușor înțeleasă de numele ei; care se află într-un nume / format inteligibil pentru utilizator. Majoritatea elementelor din HTML sunt în general elemente semantice.

Avantajele elementelor semantice în HTML5

avantajele Elementelor semantice sunt următoarele:

  • Înțelegere ușoară a codului.
  • Întreținerea se poate face rapid și adecvat.
  • Nu este necesar să adăugați nicio descriere special pentru nici o etichetă.

Diverse elemente semantice în HTML5

Haideți să intrăm acum în elementele semantice ale HTML5.

1.

Această etichetă ne oferă o idee că datele din interiorul acestei etichete sunt special pentru conținut similar. Depinde de diferitele tipuri de articole pe care le avem în general. Poate fi un blog, forumuri, articole pe coloane din ziare etc.

Cod:



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA

ieşire:

2.

Această etichetă se referă la furnizarea unui conținut în secțiune din totalul datelor. Pentru a ști despre utilizarea ambelor etichete articol și secțiune, aceste etichete pot fi utilizate în interiorul fiecărei etichete. Adică eticheta de secțiune poate fi utilizată în eticheta articolului și invers.

Cod:


The section here is about:

Învățarea și exersarea

ieşire:

3.

Această etichetă oferă toate datele antetului. Orice date pe care dorim să le plasăm în formatul antetului sunt utilizate sub această etichetă antet. Și această etichetă poate fi folosită de mai multe ori în întregul script HTML. Să vedem un mic exemplu în acest sens.

Cod:



This is header #1



This is header #1



This is header #1

Primul


următorul …

Acesta este antetul # 2


Al doilea

ieşire:

4.

Aceasta este secțiunea de subsol din scriptul nostru HTML. În general, vedem toate datele privind drepturile de autor și secțiunea mică pe care o găsim în cadrul oricăror oferte precum „condițiile se aplică” la orice oferte. Deci aceste lucruri sunt definite sub eticheta de subsol.

Cod:


În interiorul corpului și eticheta de subsol

Etichetă de subsol.


O altă etichetă de subsol

Condițiile se aplică

ieşire:

5.

Această etichetă ne oferă elementele de navigare. URL-ul din orice script de document HTML în care dorim, în general, să navigăm de la o pagină la alta, prin această etichetă. Orice date care sunt furnizate sub această etichetă sunt disponibile ca hyperlink-uri. Aceste hyperlinkuri pot fi utile în navigarea de la o secțiune la alta. Un exemplu mic este definit ca:

Cod:


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2

ieşire:

În timp ce practicați faceți clic pe linkurile respective și verificați cum se modifică culoarea hyperlinkului la clic.

6.

Aceasta este o etichetă care este utilizată pentru a afișa datele de pe laturile documentului nostru HTML. Pe multe site-uri web, putem găsi conținut care există într-o bară laterală, care este afișată folosind această etichetă deoparte. Acest conținut ar trebui să fie în conformitate cu celelalte date prezente în document. Să vedem un mic exemplu în acest sens.

Cod:


Cum se folosește eticheta deoparte

În interiorul etichetei deoparte


Conținut în etichetă deoparte

ieşire:

Conținutul exact nu poate fi specificat complet în același mod, el poate fi documentat și înțeles clar doar în timpul utilizării întregii pagini HTML.

7.

Această etichetă specifică faptul că vom atașa o imagine. Această etichetă poate fi utilizată pentru a specifica o sursă de imagine și pentru a afișa un gif sau o imagine.

Cod:





Așa cum am menționat mai sus, așa putem defini eticheta cifrei. În interiorul etichetei figurii, putem specifica comanda imaginii cu o etichetă sursă. În interiorul acestei etichete de cifre, putem utiliza, la rândul său, eticheta pentru legendă.

8.

Această etichetă este folosită pentru a da o legendă sub imaginea furnizată. Poate fi utilizat în interiorul etichetei. Utilizarea acestora poate fi văzută în exemplul de mai jos.




This is description of the image attached.

Puteți încerca să executați același lucru oferind o sursă de imagine și să verificați cum este afișată ieșirea.

9.

Această etichetă specifică toate atributele și conținutul complet al site-ului HTML. Conține tot conținutul unic. Un lucru important de remarcat pentru această etichetă particulară este că această etichetă poate fi utilizată o singură dată în crearea paginii totale. Constatăm că alte etichete pot fi folosite de mai multe ori la crearea unei pagini web, dar această etichetă principală este o etichetă de utilizare unică.

Cod:



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying

Lectura ar ajuta la înțelegerea diferitelor subiecte


practicarea


Cu Studierea, practicarea este un lucru obligatoriu de făcut în învățare

ieşire:

10.

Această etichetă este pentru a evidenția conținut sau date specifice. Cu alte cuvinte, această etichetă este utilă pentru marcarea datelor. Să vedem un mic exemplu pentru acest lucru mai jos:

Cod:


În întregul text pe care îl scriu acum, vreau să marchez acest text

ieşire:

11.

Această etichetă conține detalii suplimentare, astfel încât utilizatorii pot ascunde orice detalii la dorința lor. Prin această etichetă, utilizatorii pot deschide / închide orice conținut de care au nevoie. Dacă dorim ca această etichetă să-și dezvăluie detaliile la început, atunci atributul „deschis” poate fi folosit.

Mai jos este un mic exemplu de același lucru:

Cod:



Este afișat acest lucru?

ieşire:

Acum, care ar fi rezultatul dacă nu am folosi atributul deschis?



Este afișat acest lucru?

Rezultat 1:

Rezultat 2:

12.

Această etichetă este folosită în eticheta de detalii. Sub eticheta de detalii, putem avea o etichetă sumară care specifică întregul rezumat al paginii web sau al documentului HTML. Un lucru important de remarcat aici este faptul că eticheta sumară este prima etichetă pentru copii care trebuie să intre sub eticheta de detalii. Să găsim mai jos un mic exemplu:

Cod:



Have written this inside summary tag which is inside details tag

Acest text vine doar sub eticheta de detalii

Aceste date text sunt scrise după completarea etichetei de detalii

Rezultat 1:

În ieșirea de mai sus, am evidențiat săgeata, deoarece obținem ieșirea noastră 2 odată ce o extindem.

Rezultat 2:

Este posibil ca această etichetă să nu dea nicio diferență

13.

Această etichetă definește data / ora într-un astfel de format pe care utilizatorii îl pot înțelege cu ușurință. Dar un lucru de remarcat este faptul că această etichetă nu ne poate oferi o ieșire modificată în multe dintre browsere.

Cod:


La ora actuală este ora 23:00 noaptea.

ieşire:

14.

După cum sugerează deja numele, această etichetă este pentru a scrie orice conținut într-o casetă. Această etichetă ar trebui să aibă un atribut deschis pentru afișarea casetei de dialog odată executat codul sursă. Găsiți un exemplu mai jos:



Datele scrise aici sunt afișate într-o casetă de dialog

ieşire:

15.

Această etichetă oferă progresul unei anumite sarcini într-o reprezentare grafică. Aici trebuie să avem numărul maxim pentru care trebuie reprezentat progresul. Această etichetă constă în principal din două atribute. Valoarea maximă și valoarea sunt cele două atribute. Max reprezintă numărul total care trebuie finalizat și Valoarea ne oferă numărul de procente terminat în raport cu valoarea maximă a numărului. Un exemplu pentru asta este mai jos:

Cod:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

ieşire:

16.

Această etichetă este pentru măsurare. Acest lucru poate fi utilizat pentru spațiul luat de o interogare sau pentru utilizarea spațiului pe disc. Există câteva atribute care trebuie utilizate cu această etichetă. Atributele sunt max, min și valoare. Pe baza utilizării lor, ne putem da seama cu siguranță de scopul și modul lor de utilizare.

Cod:


EDCUBA


EDCUBA


EDCUBA

Utilizarea etichetei contorului

Într-un apartament cu 6 etaje, locuiesc la etajul 2:
2 din 6

ieşire:

17.

Aceasta este o etichetă care a fost introdusă pentru a adăuga fișiere video pe pagina noastră HTML. Până la introducerea acestei etichete, dezvoltatorii au folosit pluginuri pentru a introduce fișiere video în conținutul paginii HTL. Există câteva atribute care pot fi utilizate împreună cu eticheta. Redare automată, Preîncărcare, Înmutare sunt câteva dintre acestea.

Cod:







Avem nevoie doar de o etichetă sursă pentru a oferi sursa de unde trebuie să încărcăm conținutul video pe pagina noastră.

18.

Această etichetă este pentru adăugarea fișierelor audio în pagina noastră HTML. Utilizarea și eticheta sursă ar fi aceeași cu cea a etichetei video. Ca exercițiu, încercați să folosiți toate elementele semantice și să creați o pagină web cu versiunea HTML 5 pentru a învăța mai bine și mai rapid.

Concluzie

În acest articol, trebuie să vedem multe elemente semantice și utilizarea lor în HTML5. Un lucru important de remarcat aici este că multe dintre aceste etichete sunt acceptate de versiunile de Internet Explorer mai mari de 9 și de versiunile crom mai mari decât 3. Așadar, continuați să învățați și să practicați pentru a înțelege mai bine utilizarea tagurilor în HTML 5.

Articole recomandate

Acesta este un ghid pentru elementele semantice HTML5. Aici discutăm introducerea și diverse elemente semantice în HTML5 împreună cu implementarea codului. De asemenea, puteți consulta articolul următor pentru a afla mai multe -

  1. Top 10 elemente noi HTML5
  2. Etichete HTML5
  3. HTML5 Web Workers
  4. Diferit tip de evenimente HTML