Jaka jest różnica między tagami HTML <div> i <span>?

543

Chciałbym prosić o kilka prostych przykładów pokazujących zastosowania <div>i <span>. Widziałem, jak oba oznaczały część strony za pomocą idlub class, ale interesuje mnie to, czy zdarzają się sytuacje, w których jedna z nich jest preferowana.

JSchaefer
źródło

Odpowiedzi:

582

Oznacza to, że aby używać ich semantycznie, do zawijania części dokumentu należy używać div, a rozpiętości - do zawijania małych fragmentów tekstu, obrazów itp.

Na przykład:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Pamiętaj, że umieszczanie elementu na poziomie bloku wewnątrz elementu wbudowanego jest nielegalne, więc:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

... jest nielegalny.


EDYCJA: Począwszy od HTML5, niektóre elementy blokowe mogą być umieszczane wewnątrz niektórych elementów wbudowanych. Zobacz odniesienie do MDN tutaj, aby uzyskać całkiem przejrzystą listę. Powyższe jest nadal nielegalne, ponieważ <span>akceptuje tylko treść frazowania i <div>jest treścią przepływową.


Poprosiłeś o kilka konkretnych przykładów, więc jest to jeden z mojej strony o kręgle, BowlSK :

<div id="header">
  <div id="userbar">
    Hi there, <span class="username">Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Ok, co się dzieje?

U góry mojej strony znajduje się sekcja logiczna „nagłówek”. Ponieważ jest to sekcja, używam div (z odpowiednim identyfikatorem). Mam w tym kilka sekcji: pasek użytkownika i faktyczny tytuł strony. Tytułowy wykorzystując odpowiedni tag h1. Pasek użytkownika, będący sekcją, jest owinięty w div. W tym celu nazwa użytkownika jest owinięta w span, dzięki czemu mogę zmienić styl. Jak widać, spanw tytule zawinąłem również około 2 litery - pozwala mi to zmienić ich kolor w arkuszu stylów.

Należy również pamiętać, że HTML5 zawiera szeroki nowy zestaw elementów, które definiują wspólne struktury stron, takie jak artykuł, sekcja, nawigacja itp.

W sekcji 4.4 roboczej wersji roboczej HTML 5 wymieniono je i podano wskazówki dotyczące ich użycia. HTML5 jest wciąż działającą specyfikacją, więc nic nie jest jeszcze „ostateczne”, ale jest bardzo wątpliwe, czy którykolwiek z tych elementów zmierza gdziekolwiek. Istnieje hack javascript, którego będziesz musiał użyć, jeśli chcesz stylizować te elementy w niektórych starszych wersjach IE - Musisz utworzyć jeden z każdego elementu, document.createElementzanim którykolwiek z tych elementów zostanie określony w twoim źródle. Istnieje wiele bibliotek, które zajmą się tym za Ciebie - szybkie wyszukiwanie Google wykazało HTML5Shiv .

Chris Marasti-Georg
źródło
5
Chris, w tekście jest błąd: nawet jeśli ustawisz styl przęsła na „blokuj”, nadal niedopuszczalne jest zawijanie go wokół elementu na poziomie bloku!
Konrad Rudolph,
7
Nie można używać divi spansemantycznie, ponieważ nie ma żadnego znaczenia z nimi związane. divjest bezsensownymi ogólnymi elementami poziomu bloku, podczas gdy spanjest bezsensownym ogólnym elementem wbudowanym.
apnerve
9
@apnerve Nadal mają semantykę w tym bloku vs. elementy wbudowane oznaczają różne rzeczy w obiegu dokumentów, zarówno z perspektywy analizy, jak i „czytania tego źródła, aby dowiedzieć się, co się dzieje”.
Chris Marasti-Georg
20
„Semantyka (z greckiego sēmantiká, nijakiego rodzaju liczba mnoga sēmantikós) [1] [2] jest badaniem znaczenia. Koncentruje się na relacji między znacznikami, takimi jak słowa, frazy, znaki i symbole, oraz ich znaczeniu, ich denotata . ” Znaczniki „div” i „span” z pewnością coś oznaczają. Specyfikacja HTML ma ładny podział na to, co oznaczają elementy blokowe i wbudowane. w3.org/TR/html401/struct/global.html#h-7.5.3 . Szkic HTML5 umieszcza je nawet w osobnych grupach - Grupowanie treści i semantyka na poziomie tekstu. dev.w3.org/html5/spec/Overview.html
Chris Marasti-Georg
16
Miałeś mnie w „div jest elementem blokowym, rozpiętość jest wbudowana.” :)
Matical
390

Ze względu na kompletność, zapraszam do przemyślenia tego w następujący sposób:

  • W HTML jest wiele elementów blokowych (łamanie linii przed i po) oraz wiele znaczników wbudowanych (bez łamania linii).
  • Ale we współczesnym HTML wszystkie elementy powinny mieć znaczenie : a <p>to akapit, a <li>to element listy itp., A my powinniśmy używać odpowiedniego tagu we właściwym celu - nie tak jak w dawnych czasach, kiedy wcięte przy użyciu <blockquote>tego, czy treść była cytatem, czy nie.
  • Więc, co zrobić, gdy nie ma żadnego znaczenia dla rzeczy ty próbujesz zrobić? Nie ma znaczenia kolumna o szerokości 400 pikseli, prawda? Chcesz, aby kolumna tekstu miała szerokość 400 pikseli, ponieważ pasuje to do Twojego projektu.
  • Z tego powodu, dodali dwa kolejne elementy do HTML: rodzajową lub elementy pozbawione znaczenia <div>i <span>, ponieważ w przeciwnym razie, ludzie będą wracać do nadużywania elementy, które mają znaczenie.
AmbroseChapel
źródło
20
To jest właściwe wytłumaczenie. Zastanawiam się, dlaczego nie zostało to zaakceptowane jako odpowiedź.
apernve
16
ponieważ jest zbyt daleko w dół strony
Jason Sebring
12
To, że dobra odpowiedź nie została zaakceptowana, nie oznacza, że ​​nie możesz głosować. +1 za użyteczne wyjaśnienie.
CyberFonic,
8
Dobrze wiedzieć, ale nie odpowiada na pierwotne pytanie, ponieważ nie wyjaśnia różnic między elementami div i span.
tehvan
216

Istnieją już dobre, szczegółowe odpowiedzi tutaj, ale brak przykładów wizualnych, więc oto krótka ilustracja:

różnica między div i span

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div>jest tagiem blokowym, a <span>tagiem wbudowanym.

Brian
źródło
16
Mają inny wpływ na układ, nawet bez CSS! Po raz pierwszy widziałem to pokazane!
GreenAsJade,
2
Dziękuję, głosuję za odpowiedzią, ponieważ bardzo szybko odpowiada, że ​​div ma następną linię
Script Kitty
4
dziękuję za wyjaśnienie wizualnie nowych osób takich jak ja :-)
Aritra Chatterjee
73

<div>jest elementem na poziomie bloku i <span>jest elementem wbudowanym.

Jeśli chcesz zrobić coś z tekstem wbudowanym, <span>jest to dobra droga, ponieważ nie wprowadzi podziałów linii, które by to zrobiły <div>.


Jak zauważają inni, z każdą z nich <div>wiąże się pewna semantyka, przede wszystkim fakt, że implikuje ona logiczny podział w dokumencie, podobny do może części dokumentu lub czegoś takiego, a la:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>
Jason Bunting
źródło
1
div można wstawiać w wierszu (display: inline;) i odwrotnie dla zakresu, ale to najlepsze wytłumaczenie. Są to tagi otoki, span jest zwykle używany do zdań lub podświetlania tekstu, div do sekcji.
Ross,
3
Wiem, że możesz to zmodyfikować za pomocą CSS, ale wprowadza to inną technologię. HTML może działać samodzielnie, a kiedy to robi, div nie jest wbudowany i nie jest przeznaczony do tego, aby był w czystej formie.
Jason Bunting,
Czy jest dobra książka wyjaśniająca, jak prawidłowo używać elementów HTML w różnych sytuacjach?
mko
@mko - Szczerze mówiąc, nie wiem. Doświadczenie jest najlepszym nauczycielem. Ostatecznie samo w sobie nie ma „właściwej” odpowiedzi, jest po prostu to, co działa na twoją sytuację i twoje cele. ;)
Jason Bunting,
30

Prawdziwa ważna różnica jest już wspomniana w odpowiedzi Chrisa. Jednak implikacje nie będą oczywiste dla wszystkich.

Jako element wbudowany <span>może zawierać tylko inne elementy wbudowane. Dlatego następujący kod jest nieprawidłowy:

<span><p>This is a paragraph</p></span>

Powyższy kod jest nieprawidłowy. Aby zawinąć elementy na poziomie bloku, należy użyć innego elementu na poziomie bloku (np. <div>). Z drugiej strony <div>można go stosować tylko w miejscach, w których elementy na poziomie bloku są legalne.

Ponadto przepisy te zostały ustalone w (X) HTML i są nie zmienione przez obecność reguł CSS! Więc poniższe kody są również nieprawidłowe!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
Konrad Rudolph
źródło
7
@Faizan Jak to ma znaczenie? To także źle: nie każda przeglądarka będzie generować spójne wyniki dla tego znacznika. W zależności od używanego typu dokumentu (i ponownie przeglądarki) może to wcale nie działać, a raczej prowadzić do błędu sprawdzania poprawności.
Konrad Rudolph
Widzę, że niektóre przeglądarki są wystarczająco wydajne, aby uruchamiać unieważniony kod. dlatego to działało. Czy możesz polecić mi dobry walidator dla HTML.?
Faizan
6
„Bądź konserwatywny w tym, co robisz i liberalny w tym, co akceptujesz” en.wikipedia.org/wiki/Robustness_principle
jldupont
5
Witamy w stołówce na zupy. Przeglądarki jedzące nieważny HTML to bardzo powód, dla którego wysoce zoptymalizowane, ale wybredne parsery HTML nie są normą. Każda przeglądarka warta swojej soli (tj. Kompatybilna z dostępnym tam „HTML”) korzysta z biblioteki (wewnętrznej) typu „zupa”, aby uczynić ją smaczną.
ack
8

Znaczenie „elementu blokowego” jest implikowane, ale nigdy nie jest wyraźnie określone. Jeśli zignorujemy całą teorię (teoria jest dobra), poniższe porównanie jest pragmatyczne. Następujące:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

produkuje:

This paragraph has a span.

This paragraph

has
a div.

To pokazuje, że nie tylko div nie powinien być używany w linii, ale po prostu nie wywoła pożądanego efektu.

użytkownik34660
źródło
6

Jak wspomniano w innych odpowiedziach, domyślnie divbędą renderowane jako element blokowy, podczas gdy spanbędą renderowane w ramach swojego kontekstu. Ale żadne nie ma żadnej wartości semantycznej; istnieją, aby umożliwić ci zastosowanie stylu i tożsamości do dowolnego fragmentu treści. Używając stylów, możesz zrobić coś divtakiego jak spani odwrotnie.

Jednym z przydatnych stylów divjestinline-block

Przykłady:

  1. http://dustwell.com/div-span-inline-block.html

  2. Wyświetlanie CSS: wbudowany vs. wbudowany blok

Przyzwyczaiłem się inline-blockdo wielkich sukcesów w projektach internetowych gier.

Eric R. Rath
źródło
3
Gdyby nie mieli wartości semantycznej, byłby tylko jeden z nich. Jeden ma być podziałem poziomu bloków - drugi, rozpiętość
liniową
3

Div jest elementem blokowym, a rozpiętość jest elementem wbudowanym, a jego szerokość zależy od treści jego ja, gdzie div nie

Jagannath Samanta
źródło
3

Powiedziałbym, że jeśli znasz trochę hiszpański, zajrzyj na tę stronę , gdzie jest to właściwie wyjaśnione.

Jednak szybką definicją byłoby divdzielenie sekcji i spanstosowanie pewnego rodzaju stylu do elementu w innym elemencie bloku, takim jak div.

Pablo Herrero
źródło
Nie musisz znać hiszpańskiego, angielska wersja to <span> - HTML | MDN .
user34660,
3

Chciałem tylko dodać kontekst historyczny do tego, jak powstało spanvsdiv

Historia span:

3 lipca 1995 r. Benjamin CW Sittler proponuje ogólny tag kontenera tekstowego do stosowania stylów w niektórych blokach tekstu. Renderowanie jest neutralne, chyba że jest używane w połączeniu z arkuszem stylów. Toczy się debata wokół czytelności, znaczenia. Bert Bos wspomina o rozszerzalności elementu poprzez atrybut klasy (z wartościami takimi jak miasto, osoba, data itp.). Paul Prescod martwi się, że oba elementy zostaną wykorzystane. Przeciwstawia się tekstowi, w którym wspomina, że ​​„każdy nowy element powinien znajdować się na starym” i dodaje: „Jeśli utworzymy znacznik bez semantyki, można go użyć gdziekolwiek, nie popełniając błędu.Musimy zmusić autorów do odpowiedniego oznaczenia semantyki ich dokumentu. Musimy zmusić dostawców edytorów do wyraźnego wyboru tego wyboru w swoich interfejsach. ”

- Źródło (wiki w3)

Z projektu RFC, który wprowadza span:

Po pierwsze, potrzebny jest ogólny pojemnik do przenoszenia atrybutów LANG i BIDI w przypadkach, w których żaden inny element nie jest odpowiedni; w tym celu wprowadzono element SPAN.

- Źródło (projekt IETF)

Historia div:

Elementy DIV mogą służyć do strukturyzowania dokumentów HTML jako hierarchii podziałów.

...

CENTER został wprowadzony przez Netscape, zanim dodali obsługę elementu DIV HTML 3.0. Jest przechowywany w HTML 3.2 ze względu na jego powszechne wdrożenie.

Specyfikacja HTML 3.2

Krótko mówiąc, oba elementy powstały z potrzeby bardziej semantycznie generycznego pojemnika. Zakres został zaproponowany jako bardziej ogólny zamiennik <text>elementu do stylizowania tekstu. Div został zaproponowany jako ogólny sposób dzielenia stron i miał tę dodatkową zaletę, że zamienił <center>tag na wyrównanie do środka. Div zawsze był elementem blokowym ze względu na swoją historię jako dzielnik stron. Rozpiętość zawsze była elementem wbudowanym, ponieważ pierwotnie służyła do stylizacji tekstu, a dziś div i span stały się elementami ogólnymi, odpowiednio z domyślnymi właściwościami blokowania i wstawiania.

Alex W.
źródło
2

W HTML są tagi, które dodają strukturę lub semantykę do treści. Na przykład <p>znacznik służy do identyfikacji akapitu. Innym przykładem jest <ol>znacznik dla uporządkowanej listy.

Gdy nie ma odpowiedniego znacznika w HTML, jak pokazano powyżej, zwykle stosuje się tagi <div>i <span>.

<div>Znacznik jest używany do identyfikacji blocklevel rozdział / podział dokumentu, który ma przerwę linii zarówno przed, jak i po niej.

Przykładami użycia tagów div są nagłówki, stopki, nawigacje itp. Jednak w HTML 5 tagi te zostały już dostarczone.

<span>Tag służy do identyfikacji inline rozdział / podział dokumentu.

Na przykład znacznik zakresu może być używany do dodawania piktogramów wbudowanych do elementu.

Robert Rocha
źródło
2

Pamiętaj, że w zasadzie oni też nie wykonują żadnej funkcji. Nie są one szczegółowe na temat funkcjonalności tylko za pomocą swoich tagów .

Można je dostosować tylko przy pomocy CSS.

Teraz nadchodzi twoje pytanie:

Znacznik SPAN wraz z niektórymi stylami będzie przydatny do trzymania wewnątrz linii, powiedzmy w akapicie, w html. Jest to rodzaj poziomu linii lub poziomu instrukcji w HTML.

Przykład:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

Funkcjonalność tagu DIV, jak wspomniano, może być widoczna tylko ze stylem, może zawierać duże fragmenty kodu HTML.

DIV to poziom bloku

Przykład:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

Oba mają swój czas i przypadek, kiedy należy je wykorzystać, w zależności od wymagań.

Mam nadzieję, że odpowiedź jest jasna. Dziękuję Ci.

yatheendra kv
źródło
Idealna odpowiedź, której szukałem.
PHPFan