HTML5 (HyperText Markup Language) este fundația oricărei pagini web. Versiunea 5 a introdus elemente semantice care oferă sens structurii documentului, îmbunătățind accesibilitatea și SEO-ul.
Capitol gratuit
HTML5 - structură semantică și elemente avansate
HTML5 (HyperText Markup Language) este fundația oricărei pagini web. Versiunea 5 a introdus elemente semantice care oferă sens structurii documentului, îmb...
Introducere
Structura de bază HTML5
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descrierea paginii pentru SEO">
<title>Titlul Paginii</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>...</nav>
</header>
<main>
<article>
<section>...</section>
</article>
<aside>...</aside>
</main>
<footer>...</footer>
<script src="app.js"></script>
</body>
</html>Elemente semantice HTML5
| Element | Scop | Exemplu utilizare |
|---|---|---|
<header> | Antetul paginii sau al unei secțiuni | Logo, meniu navigare, titlu |
<nav> | Secțiune de navigare | Meniu principal, breadcrumbs |
<main> | Conținutul principal (unic pe pagină) | Zona centrală de conținut |
<article> | Conținut independent, reutilizabil | Articol blog, produs, postare |
<section> | Secțiune tematică de conținut | Capitole, zone tematice |
<aside> | Conținut complementar | Sidebar, widget-uri, reclame |
<footer> | Subsolul paginii sau al unei secțiuni | Copyright, linkuri, contact |
<figure>/<figcaption> | Imagini cu legendă | Ilustrații, diagrame, screenshots |
Formulare HTML5 avansate
<form action="/api/contact" method="POST">
<label for="name">Nume complet:</label>
<input type="text" id="name" name="name" required minlength="2" maxlength="100">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Telefon:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}">
<label for="date">Data:</label>
<input type="date" id="date" name="date" min="2026-01-01">
<label for="range">Buget (RON):</label>
<input type="range" id="range" name="budget" min="100" max="10000" step="100">
<button type="submit">Trimite</button>
</form>
HTML semantic corect
- Utilizare
-
- Atribut
- Alt text pe toate imaginile
- Heading-uri ierarhice (h1 > h2 > h3)
- Utilizare
<nav> pentru meniu-
<main> unic pe pagină- Atribut
lang="ro" pe html- Alt text pe toate imaginile
- Heading-uri ierarhice (h1 > h2 > h3)
HTML nesemantic (de evitat)
- Totul în
- Fără atribut lang
- Imagini fără alt
- Heading-uri dezordonate
- Tabele folosite pentru layout
- Totul în
<div>-uri- Fără atribut lang
- Imagini fără alt
- Heading-uri dezordonate
- Tabele folosite pentru layout
Sfat: Validați întotdeauna HTML-ul cu validator.w3.org. Un HTML valid și semantic îmbunătățește accesibilitatea, SEO-ul și mentenabilitatea codului.
Continuați cu restul cursului
Acesta este capitolul 2 din cele 20 ale cursului, cu 4 lecții din 73. Cumpărați cursul și parcurgeți tot conținutul în cont, cu progres salvat, test final și certificat.
Cumpărați cursul la 110 €