Oznaki Span in Div

Večina HTML oznak ima določen pomen. Oznaka <p> na primer označuje odstavek, oznake <h1> do <h6> pa naslove različnih ravni.

Oznaki <div> in <span> sami po sebi nimata posebnega pomena vsebine. Uporabljamo ju predvsem takrat, ko želimo del vsebine združiti ali posebej oblikovati s CSS oziroma ga uporabiti pri delu z JavaScriptom.

Pomni: Oznaki <div> in <span> nimata posebnega pomenskega pomena. Uporabimo ju predvsem kot splošna vsebnika, kadar ni primernejše semantične oznake.

Osnovna pravila

Oznaka <div> je splošni bločni vsebnik.
Oznaka <span> je splošni vrstični vsebnik.
Obe oznaki uporabimo predvsem za združevanje vsebine ali oblikovanje s CSS.
Če obstaja primernejša semantična oznaka, je praviloma boljša izbira.
Obnašanje elementov lahko kasneje spreminjamo tudi s CSS.

Pozor: Oznak <div> in <span> ne uporabljamo namesto semantičnih oznak brez potrebe. Če imamo na voljo oznake, kot so <header>, <main>, <section>, <article> ali <footer>, jih je pogosto smiselno uporabiti namesto splošnega vsebnika.

Bločni in vrstični elementi

HTML elementi se med drugim razlikujejo tudi po tem, kako se obnašajo pri prikazu na strani. Nekateri so bločni, drugi pa vrstični.

Bločni elementi se običajno začnejo v novi vrstici in zavzamejo vso razpoložljivo širino. Vrstični elementi pa ostanejo v isti vrstici kot okoliško besedilo in zavzamejo le toliko prostora, kolikor ga potrebuje njihova vsebina. Pri običajnem prikazu v dokumentu ločimo med bločno in vrstično razporeditvijo elementov.

Pogosti bločni elementi

<div>
<p>, <pre>
<h1> do <h6>
<main>, <section>, <article>, <aside>
<header>, <footer>, <nav>
<table>
<canvas>
<dl>, <dt>, <dd>
<ul>, <ol>, <li>
<hr>
<form>
<address>, <blockquote>
<video>

Pogosti vrstični elementi

<span>
<a>
<br>
<button>
<strong>, <em>, <b>, <i>
<cite>, <q>
<img>
<code>
<abbr>, <mark>, <kbd>, <dfn>, <samp>, <sub>, <sup>, <var>
<input>, <output>, <label>, <textarea>, <select>
<script>, <object>

Element je lahko po privzetem bločni ali vrstični, njegovo obnašanje pa lahko kasneje spremenimo tudi s CSS, na primer z lastnostjo display.

Oznaka `<div>`

Element <div> je splošni vsebnik za večji del vsebine. Uporabimo ga, kadar želimo združiti več elementov v skupino. Sam po sebi nima posebnega pomenskega pomena, zato ga navadno uporabljamo skupaj s CSS ali JavaScriptom.

<div id="vsebina">
   <p>Prvi odstavek.</p>
   <p>Drugi odstavek.</p>
</div>

Oznaka `<span>`

Element <span> je splošni vrstični vsebnik. Uporabimo ga, kadar želimo označiti manjši del besedila znotraj vrstice, na primer eno besedo ali krajši del stavka. Sam po sebi nima posebnega pomenskega pomena.

<p>To je <span class="poudarek">pomembna beseda</span> v stavku.</p>

Glavna razlika med `<div>` in `<span>`

Glavna razlika je v tem, da je <div> praviloma bločni element, <span> pa vrstični element.

<div> uporabimo za večje vsebinske sklope ali skupine elementov.
<span> uporabimo za manjši del besedila ali drug vrstični del vsebine.

Primer uporabe obeh oznak in uporaba s CSS

<div id="vsebina">
   <p>Tole je <span class="poudarek">stavek</span> v odstavku.</p>
</div>

Oznaki <div> in <span> pogosto uporabimo skupaj z atributoma id in class. Tako lahko določene dele vsebine posebej oblikujemo ali izberemo s CSS.

<style>
#vsebina { background-color: #f5f5f5; }
.poudarek { color: red; font-weight: bold; }
</style>

Tole je stavek v odstavku.

Primer bločnih in vrstičnih elementov z obrobo

Če elementom dodamo obrobo, lahko lepo vidimo razliko med bločnimi in vrstičnimi elementi. Bločni elementi se raztegnejo čez širino vrstice, vrstični pa obdajajo le svojo vsebino.

<div style="border:1px solid black; margin:4px 0;">To je div.</div>
<p style="border:1px solid black; margin:4px 0;">To je odstavek.</p>

<p>
  To je <span style="border:1px solid black;">span</span> v stavku.
  To je <strong style="border:1px solid black;">strong</strong> v stavku.
  To je <a href="#" style="border:1px solid black;">povezava</a> v stavku.
</p>

To je div.

To je odstavek.

To je span v stavku. To je strong v stavku. To je povezava v stavku.

Oznake <div> v HTML5 ni nadomestila druga splošna oznaka. Kadar pa je mogoče, raje uporabimo semantične elemente, kot so <header>, <main>, <section>, <article> ali <footer>, saj ti bolje opišejo pomen vsebine.

Kdaj uporabimo `<div>` in `<span>`?

Element <div> uporabimo, kadar želimo združiti večji del strani ali skupino elementov. Element <span> pa uporabimo, kadar želimo označiti manjši del besedila v isti vrstici.

Oba elementa sta zelo uporabna, vendar ju ne uporabljamo namesto oznak, ki že imajo jasen pomen. Če obstaja primernejši semantični element, je običajno boljša izbira.

Priporočila

Za večje vsebinske sklope uporabi <div>.
Za manjši del besedila v vrstici uporabi <span>.
Oznaki <div> in <span> poveži z atributoma class ali id, kadar želiš vsebino posebej oblikovati.
Kadar obstaja primernejša semantična oznaka, uporabi raje njo.
Razliko med bločnimi in vrstičnimi elementi preverjaj tudi s praktičnimi primeri.

Pogoste napake

Oznaka <span> se uporablja za večje vsebinske sklope, čeprav je namenjena vrstični vsebini.
Oznaka <div> se uporablja tam, kjer bi bila primernejša semantična oznaka.
Predpostavlja se, da imata <div> in <span> sama po sebi poseben pomenski pomen.
Razlika med bločnimi in vrstičnimi elementi ni upoštevana pri razporejanju vsebine.
Oznaki <div> in <span> se uporabljata brez jasnega razloga.

Nazaj

Naprej