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ć,
span
w 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.createElement
zanim 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 .
div
ispan
semantycznie, ponieważ nie ma żadnego znaczenia z nimi związane.div
jest bezsensownymi ogólnymi elementami poziomu bloku, podczas gdyspan
jest bezsensownym ogólnym elementem wbudowanym.Ze względu na kompletność, zapraszam do przemyślenia tego w następujący sposób:
<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.<div>
i<span>
, ponieważ w przeciwnym razie, ludzie będą wracać do nadużywania elementy, które mają znaczenie.źródło
Istnieją już dobre, szczegółowe odpowiedzi tutaj, ale brak przykładów wizualnych, więc oto krótka ilustracja:
<div>
jest tagiem blokowym, a<span>
tagiem wbudowanym.źródło
<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:źródło
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: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!
źródło
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:
produkuje:
To pokazuje, że nie tylko div nie powinien być używany w linii, ale po prostu nie wywoła pożądanego efektu.
źródło
Jak wspomniano w innych odpowiedziach, domyślnie
div
będą renderowane jako element blokowy, podczas gdyspan
bę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śdiv
takiego jakspan
i odwrotnie.Jednym z przydatnych stylów
div
jestinline-block
Przykłady:
http://dustwell.com/div-span-inline-block.html
Wyświetlanie CSS: wbudowany vs. wbudowany blok
Przyzwyczaiłem się
inline-block
do wielkich sukcesów w projektach internetowych gier.źródło
Div jest elementem blokowym, a rozpiętość jest elementem wbudowanym, a jego szerokość zależy od treści jego ja, gdzie div nie
źródło
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
div
dzielenie sekcji ispan
stosowanie pewnego rodzaju stylu do elementu w innym elemencie bloku, takim jakdiv
.źródło
Chciałem tylko dodać kontekst historyczny do tego, jak powstało
span
vsdiv
Historia
span
:- Źródło (wiki w3)
Z projektu RFC, który wprowadza
span
:- Źródło (projekt IETF)
Historia
div
: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.źródło
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.
źródło
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:
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:
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.
źródło