Čarobni štapić +381 (0)61 755 74 77

Semantički HTML

Semantički HTML

LEKCIJA 02 — SEMANTIČKI HTML (NOVA, UNAPREĐENA VERZIJA)

Uvod u semantički HTML

Semantički HTML predstavlja pisanje strukture stranice koristeći elemente koji imaju značenje — koji opisuju vrstu sadržaja koji se nalazi u njima.
Umesto da koristimo generičke <div> i <span> elemente, HTML5 nam nudi specijalizovane tagove koji poboljšavaju:

  • čitljivost koda,

  • SEO optimizaciju,

  • pristupačnost (screen-reader uređaji),

  • organizaciju i održavanje projekta.

Semantički elementi pomažu browserima i pretraživačima da razumeju šta je šta na stranici, a tebi pomažu da pišeš čist, logičan i profesionalan kod.

Zašto je semantika važna?

✔ 1. Pristupačnost (Accessibility)

Screen reader može da “čita” stranice, i zahvaljujući semantici zna gde se nalazi navigacija, gde je glavni sadržaj, gde su članci itd.

✔ 2. SEO — pretraživači razumeju stranicu

Google i drugi tražilice bolje indeksiraju sadržaj kada je pravilno strukturiran (npr. <article>, <main>, <header>, <nav>).

✔ 3. Lakša saradnja i održavanje

Kada koristiš semantičke tagove, neko drugi (ili ti posle 6 meseci) lakše može da razume šta predstavlja koji deo koda.

✔ 4. Čist i logičan kod

Kod bez semantike može da izgleda haotično. Semantička struktura donosi red.

Najvažniji semantički elementi u HTML-u

<header>

Predstavlja zaglavlje stranice ili sekcije.

Obično sadrži logo, naslov sajta, navigaciju.

<header>
  <h1>Moja Web Stranica</h1>
  <nav>...</nav>
</header>

<nav>

Glavna navigacija — meni ili linkovi ka sekcijama stranice.

<nav>
  <a href="#home">Početna</a>
  <a href="#blog">Blog</a>
  <a href="#kontakt">Kontakt</a>
</nav>

<main>

Glavni sadržaj stranice — deo koji je jedinstven za tu stranicu.
Treba da postoji samo jedan na stranici.

<main>
  <h2>Naslov članka</h2>
  <p>Tekst...</p>
</main>

<section>

Tematska celina — služi za grupisanje sadržaja po “odeljcima”.

<section>
  <h2>O nama</h2>
  <p>Informacije...</p>
</section>

<article>

Samostalan sadržaj koji može da stoji nezavisno: blog post, vest, komentar itd.

<article>
  <h2>Blog Post</h2>
  <p>Ovo je članak...</p>
</article>

<aside>

Sporedne informacije — sidebar, dodatne napomene, linkovi, reklame.

<aside>
  <h3>Brzi linkovi</h3>
</aside>

<footer>

Podnožje stranice ili sekcije — autorska prava, kontakt, linkovi, info.

<footer>
  <p>© 2025 Sve prava zadržana.</p>
</footer>

Primer — loša vs. dobra struktura

❌ Primera radi — loša verzija (previše <div> elemenata)

<div class="header">...</div>
<div class="menu">...</div>
<div class="content">
  <div class="post">...</div>
</div>
<div class="footer">...</div>

Ovaj kod funkcioniše, ali nema nikakvo značenje.

✔ Dobra verzija — semantički ispravno

<header>...</header>

<nav>...</nav>

<main>
  <article>...</article>
</main>

<footer>...</footer>

Odmah je jasnije šta predstavlja koji deo stranice — i ljudima, i browserima, i Google-u.

????️ Bonus semantički elementi

<figure> + <figcaption>

Za slike i njihove opise.

<figure>
  <img src="slika.jpg" alt="Opis slike">
  <figcaption>Ovo je opis slike.</figcaption>
</figure>

<time>

Za prikaz datuma i vremena.

<time datetime="2025-02-15">15. februar 2025.</time>

<details> + <summary>

Za “accordion” / skriveni sadržaj.

<details>
  <summary>Prikaži više</summary>
  <p>Ovo je skriveni tekst...</p>
</details>

Kako pravilno koristiti semantičke elemente

  • Ne koristi semantički element samo “da bi se koristio”.

  • Ne ubacuj <header> u drugi <header>.

  • <main> ide jednom po stranici.

  • <section> mora da ima naslov (<h2> ili <h3>).

  • <article> koristimo samo kad sadržaj može da postoji nezavisno.

  • Ako nema semantičkog smisla → koristi <div>.

Kratka vežba za kraj

Pokušaj da ovu strukturu:

<div class="top">...</div>
<div class="nav">...</div>
<div class="box">
  <div class="left">...</div>
  <div class="right">...</div>
</div>
<div class="end">...</div>

pretvoriš u semantički ispravan HTML koristeći tagove iz ove lekcije.

✔ Zaključak

Semantički HTML je temelj profesionalnog web razvoja.
Pomaže u čitljivosti, SEO-u i pristupačnosti — i zato je veoma važno da od početka učiš i razumeš pravu strukturu HTML dokumenta.