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

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.

• divjest elementem blokowym
• spanjest elementem wbudowanym .

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?

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 .

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.

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

<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.

<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>

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>

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.

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.

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

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.

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.

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.

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.