Toate paginile site-urilor web sunt construite folosind tag-uri sau etichete HTML. Asta se întâmplă chiar dacă folosești o unealtă de construit / page builder precum Webflow, WordPress, Editor X, Framer etc. așa încât tu nu mai scrii cod ci doar tragi anumite elemente pe pagină.
HTML, sau Hypertext Markup Language (Limbaj de Marcare a HiperTextului), este un mod de etichetare și structurare a informației pentru ca browserele să o poată afișa utilizatorilor.
Prin utilizarea unor „tag-uri” (etichete) și atribute, HTML definește structura unei pagini web — textul, imaginile și alte elemente. Este mai mult decât un limbaj de programare — este
Creat în anii ’90 de Tim Berners-Lee, HTML a evoluat de la forme simple la HTML 5, cea mai recentă versiune, care suportă multimedia și interactivitate.
Oricare ar fi platforma sau instrumentele pe care le folosești pentru a construi un site web, înțelegerea HTML este importantă și te ajută la implementarea corectă a design-ului și soluționarea problemelor care pot apărea.
Concepte fundamentale
Tag-urile HTML sunt perechile de etichete care încadrează diverse tipuri de conținut, precum text, imagini și linkuri, spunând browserului cum să le afișeze.
Un document HTML este, în esență, un text formatat cu aceste tag-uri. De exemplu, <p> este un tag pentru paragrafe, <h1> pentru titluri principale, iar <img> pentru imagini.
Cu puține excepții, fiecare tag are un început <>, cum ar fi <p>, și un sfârșit </>, cum ar fi </p>, care încadrează textul sau conținutul relevant.
Structura unui document HTML este ierarhică și ordonată, începând cu un tag care deschide și închide întregul document <html>.
<html>
...
</html>În interiorul acestuia, documentul este împărțit în două secțiuni principale:
<head>, care conține informații despre document ce nu sunt vizibile direct pe pagina web (cum ar fi titlul paginii și linkurile către fișierele de stil CSS).<body>, unde se află tot conținutul vizibil al paginii — texte, imagini, legături, câmpuri text și alte elemente interactive.
<html>
<head>
...
</head>
<body>
...
</body>
</html>Această structură de bază este esențială pentru crearea oricărei pagini web și este prima treaptă în înțelegerea și manipularea mai eficientă a web designului. Prin învățarea și aplicarea acestor concepte, vei putea să construiești și să optimizezi pagini web pentru o varietate de scopuri.
Cum este compusă o pagină web în HTML?
Orice document HTML are o structură clar definită, care servește drept schelet pentru conținutul afișat pe browser. Poți deschide orice editor text în care scrii următorul text:
<!DOCTYPE html>
<html lang="ro">
<head>
<title>Titlul paginii care apare sus în browser</title>
</head>
<body>
<h1>Titlu pagină - vizibil pe pagina web</h1>
<p>Un paragraf text, afișat sub titlul principal</p>
<p>Un alt paragraf afișat sub paragraful anterior</p>
</body>
</html>1. Tipul documentului (Doctype)
Definește ce fel de pagină web ai creat. Această declarație specifică versiunea de HTML folosită pentru document, ajutând browserul să interpreteze corect conținutul paginii.
<!DOCTYPE html> indică faptul că documentul este scris în HTML5, cea mai recentă versiune a limbajului de marcare.
În versiunile mai vechi de HTML se folosea o versiune mai lungă: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> și toate tag-urile trebuiau închise obligatoriu, de exemplu: <br /> (pentru o linie nouă) în loc de <br> cum e scris modern. Mai multe informații despre diferențele dintre HTML și XHTML pe W3Schools.
2. Elementul <html>
Elementul care cuprinde sau înconjoară tot conținutul paginii. Este important să specifici limba documentului pentru accesibilitate și optimizare SEO, de exemplu <html lang="ro"> pentru română.
3. Secțiunea <head> — partea neafișată
Toate tag-urile și elementele din <head> nu sunt afișate. Aceasta conține date meta și referințe către resurse, care nu sunt vizibile direct pe pagina web dar sunt citite și interpretate de browsere, roboți și alte sisteme.
Elemente importante din <head>:
<title>Definește titlul paginii, care este afișat în bara de titlu a browserului sau pe fila paginii.<meta>Include metadate despre pagina web, cum ar fi descrierea și cuvintele cheie pentru SEO.<link>Permite includerea fișierelor CSS externe pentru stilizarea paginii.<script>Pentru a adăuga scripturi JavaScript care aduc interactivitate și funcționalitate paginii.<style>Permite modificarea aspectului elementelor (culori, poziționare, dimensiune etc)
4. Secțiunea <body> – partea vizibilă
Aceasta parte a documentului cuprinde tot conținutul vizibil al paginii web, de la texte și imagini până la butoane, câmpuri text, videoclipuri și linkuri.
Elemente comune în <body>:
- Headings (
<h1>,<h2>, etc.): Pentru titluri și subtitluri, structurând informația într-un mod ierarhic. - Paragrafe (
<p>): Pentru texte. - Linkuri (
<a href="...">): Pentru navigare și referințe externe. - Imagini (
<img src="..." alt="...">): Pentru a adăuga vizualuri la conținut.
Prin combinarea acestor elemente, oricine poate construi o pagină web de bază. Elementele <head> și <body> sunt esențiale pentru a separa conținutul vizibil de metadate și pentru a organiza informațiile într-un mod eficient și accesibil.
O structură puțin mai complexă a unei pagini web HTML ar arăta cam așa:
<!DOCTYPE html>
<html lang="ro-RO">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Structura unei pagini web - titlu browser</title>
<meta name="description" content="Descrierea paginii web pentru motoarele de căutare">
<link rel="canonical" href="https://cippo.ro/structura-unei-pagini-web-html/">
<link rel="stylesheet" href="https://cippo.ro/style.css">
<style>
html {
color: #222;
}
</style>
<script async type="text/javascript" src="https://cippo.ro/scripts.js"></script>
</head>
<body>
<header>
<div><img src="https://cippo.ro/logo.svg" alt="Logo"></div>
<nav>
<ul>
<li>
<a href="https://cippo.ro/">Home</a>
</li>
<li>
<a href="https://cippo.ro/contact/">Contact</a>
</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Titlu principal - Structura unei pagini web</h1>
<p>Acest paragraf elaborează conținutul paginii.</p>
</section>
<section>
<h2>Etichetele unei pagini HTML</h2>
<p>Există 142 de tag-uri HTML dintre care 115 sunt considerate funcționale și uzuale.</p>
</section>
</main>
<footer>
<p>Copyright <a href="https://cippo.ro/">CIPPO</a> 2024</p>
</footer>
<script defer type="text/javascript" src="https://cippo.ro/compilat.js">
</body>
</html>Practici recomandate în codul HTML
Pentru a asigura crearea de pagini web eficiente, accesibile și ușor de întreținut, sunt recomandate o serie de practici. Acestea îmbunătățesc calitatea și performanța site-ului și contribuie la o mai bună experiență pentru utilizator și la o mai bună indexare în motoarele de căutare.
Cod HTML semantic
Alege elementele HTML care descriu cel mai bine conținutul și structura informațiilor. De exemplu, folosește <article>, <section>, <nav>, și <aside> pentru articole, secțiuni, navigație, și conținut lateral, respectiv.
Beneficii: Îmbunătățește accesibilitatea și SEO, facilitând indexarea corectă de către motoarele de căutare și oferind o navigare ușoară cu cititoare de ecran.
Accesibilitate
Asigură-te că site-ul tău este utilizabil de către toți oamenii, inclusiv de către cei cu dizabilități. Adaugă atributul alt pentru toate imaginile, asigurându-te că formele sunt etichetate corespunzător, și folosind structuri de navigare clare.
Performanța paginii
Redu timpul de încărcare al paginii pentru a îmbunătăți experiența utilizatorului și rankingul în motoarele de căutare. Comprimă resursele cum ar fi imagini și scripturi, folosește încărcarea întârziată pentru imagini și videoclipuri, și minimizează CSS și JavaScript.
Tag-uri și atribute moderne
HTML evoluează, iar unele tag-uri și atribute sunt înlocuite cu alternative mai moderne și eficiente. Menține-te la curent cu ultimele specificații HTML și actualizează codul vechi pentru a evita problemele de compatibilitate și de securitate.
Compatibilitate (Testare Cross-Browser)
Asigură-te că pagina web arată bine și funcționează corect în toate browserele majore. Testează periodic site-ul în diferite browsere, inclusiv versiuni mobile, pentru a identifica și corecta problemele de compatibilitate.
Resurse Suplimentare
Pentru a aprofunda și extinde cunoștințele dobândite, iată câteva resurse care pot fi de ajutor:
- MDN Web Docs (Mozilla Developer Network) – O resursă excelentă pentru învățarea HTML, CSS și JavaScript.
- Link: MDN Web Docs
- W3Schools – O platformă user-friendly pentru tutoriale și exemple de cod.
- Link: W3Schools
- GeeksforGeeks – Altă platformă cu informații foarte bune pentru HTML, CSS; JS și alte limbaje de programare.
- Link: GeeksforGeeks
- HTML5 Rocks – Articole și tutoriale axate pe noile caracteristici HTML5.
- Link: HTML5 Rocks
- WebAIM – Resurse pentru a învăța mai multe despre accesibilitatea web.
- Link: WebAIM
- WCAG – Resurse bune pentru accesibilitate web.
- Link: WCAG
Lasă un răspuns