Wat is het verschil tussen HTML-tags <div> en <span>?

Ik zou om enkele eenvoudige voorbeelden willen vragen die het gebruik van <div>en <span>laten zien.
Ik heb gezien dat ze allebei werden gebruikt om een gedeelte van een pagina te markeren met een idof class, maar ik zou graag willen weten of er momenten zijn waarop een heeft de voorkeur boven de andere.


Antwoord 1, autoriteit 100%

Dit betekent dat om ze semantisch te gebruiken, divs moeten worden gebruikt om delen van een document in te pakken, terwijl spans moeten worden gebruikt om kleine delen tekst, afbeeldingen, enz. te laten omlopen.

Bijvoorbeeld:

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

Merk op dat het illegaal is om een element op blokniveau binnen een inline-element te plaatsen, dus:

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

…is illegaal.


BEWERKEN: Vanaf HTML5 kunnen sommige blokelementen in sommige inline-elementen worden geplaatst. Zie de MDN-referentie hiervoor een vrij duidelijke lijst. Het bovenstaande is nog steeds illegaal, aangezien <span>alleen fraseringsinhoud accepteert en <div>stroominhoud is.


U vroeg om enkele concrete voorbeelden, dus is er een afkomstig van mijn bowling-website, 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>

2, Autoriteit 65%

Gewoon omwille van de volledigheid, nodig ik u uit om erover na te denken:

  • Er zijn veel blokelementen (LineBreaks voor en na) gedefinieerd in HTML, en veel inline-tags (geen linechns).
  • Maar in moderne HTML moeten alle elementen betekenissen hebben: een <p>is een alinea, een <li>Is een lijstitem, enz., En we moeten de juiste tag gebruiken voor het juiste doel – niet zoals in de oude dagen wanneer we inspringen met behulp van <blockquote>of de inhoud een citeer of niet.
  • Dus, wat doe je wanneer er is Geen betekenis aan het ding dat je probeert te doen? Er is geen wat betekent naar een 400px-brede kolom, is er? U wilt gewoon dat uw tekst van de tekst 400px breed is omdat dit bij uw ontwerp past.
  • Om deze reden voegden ze nog twee elementen aan HTML: de generieke of zinloze elementen <div>en <span>, omdat anders zouden Ga terug naar het misbruiken van de elementen die betekenissen hebben.

3, Autoriteit 40%

Er zijn al goede, gedetailleerde antwoorden hier, maar geen visuele voorbeelden, dus hier is een snelle illustratie:

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

4, Autoriteit 11%

<div>is een element van een blokniveau en <span>is een inline-element.

Als je iets wilde doen met wat inline-tekst, <span>is de manier om te gaan omdat het geen lijn breekt breekt die een <div>zou.


Zoals opgemerkt door anderen, zijn er enkele semantiek geïmpliceerd met elk van deze, het meest aanzienlijk het feit dat een <div>impliceert een logische divisie in het document, vergelijkbaar met een deel van een deel van een document of zoiets, een 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>

5

Zoals vermeld in andere antwoorden, wordt standaard divweergegeven als een blokelement, terwijl spanwordt weergegeven in de context inline. Maar noch heeft een semantische waarde; Ze bestaan ​​om je toe te staan ​​het styling en een identiteit toe te passen op een bepaald stukje inhoud. Met behulp van stijlen kunt u een divdoen als een spanen vice versa.

Een van de nuttige stijlen voor divis inline-block

Voorbeelden:

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

  2. CSS-display: inline vs inline-block

Ik heb inline-blockgebruikt bij een groot succes, in Game Web-projecten.


6

DIV is een blokelement en span is een inline-element en de breedte is afhankelijk van de inhoud van het zelf waar Div niet


7

Ik zou zeggen dat als je een beetje Spaans kent om naar deze pagina te kijken , waar goed wordt uitgelegd.

Een snelle definitie zou echter zijn dat divis voor het delen van secties en spanis voor het toepassen van een soort stijl in een element binnen een ander blokelement als div.


8

Wilde gewoon wat historische context toevoegen aan hoe er te zijn spanvs div

Geschiedenis van span:

Op 3 juli 1995, Benjamin C. W. Sittler stelt een generieke tekst voor
Container
Tag voor het toepassen van stijlen aan bepaalde tekstblokken.
Het weergave is neutraal, behalve indien gebruikt in combinatie van een
stylesheet. Er is een debat rond versus
leesbaarheid, betekenis. Bert BOS vermeldt de afbreekbaarheidsaard
van het element door het klaskenmerk (met waarden zoals
plaats, persoon, datum, enz.). Paul Prescod maakt zich zorgen dat beide elementen
misbruikt zal worden. Hij is tegen tekst waarin wordt vermeld dat “elke nieuwe”
element moet op een oude staan” en toevoegen “Als we een tag maken met
geen semantiek het kan overal worden gebruikt zonder ooit verkeerd te zijn.
We
moeten auteurs dwingen om de semantiek van hun document correct te taggen. We
moeten uitgevers van redacteuren dwingen om die keuze expliciet te maken in hun
interfaces.”

– Bron (w3-wiki)

Van het RFC-concept dat spanintroduceert:

Eerst een generieke con-
tainer is nodig om de LANG- en BIDI-attributen in
gevallen waarin geen ander element geschikt is; het SPAN-element
ment is voor dat doel geïntroduceerd.

– Bron (IETF-concept)

Geschiedenis van div:

DIV-elementen kunnen worden gebruikt om HTML-documenten te structureren als een hiërarchie van divisies.

CENTER is geïntroduceerd door Netscape voordat ze ondersteuning toevoegden voor de
HTML 3.0 DIV-element. Het wordt bewaard in HTML 3.2 vanwege zijn
wijdverbreide implementatie.

HTML 3.2-specificatie

Kortom, beide elementen zijn ontstaan uit de behoefte aan een meer semantisch-generieke container. Span werd voorgesteld als een meer algemene vervanging voor een <text>-element om tekst op te maken. Div werd voorgesteld als een algemene manier om pagina’s te verdelen en had als bijkomend voordeel dat het de tag <center>vervangt voor centre-aligning content. Div is altijd een blokelement geweest vanwege zijn geschiedenis als paginaverdeler. Span is altijd een inline-element geweest omdat het oorspronkelijke doel tekstopmaak was en tegenwoordig zijn div en span beide generieke elementen geworden met respectievelijk standaardblok- en inline-weergave-eigenschappen.


Antwoord 9

In HTML zijn er tags die structuur of semantiek aan inhoud toevoegen. De tag <p>wordt bijvoorbeeld gebruikt om een alinea te identificeren. Een ander voorbeeld is de tag <ol>voor een geordende lijst.

Als er geen geschikte tag beschikbaar is in HTML, zoals hierboven weergegeven, worden meestal de tags <div>en <span>gebruikt.

De tag <div>wordt gebruikt om een sectie/divisie op blokniveau van een document te identificeren die zowel ervoor als erna een regeleinde heeft.

Voorbeelden van waar div-tags kunnen worden gebruikt zijn kopteksten, voetteksten, navigatie enz. In HTML 5 zijn deze tags echter al aanwezig.

De tag <span>wordt gebruikt om een inline sectie/divisie van een document te identificeren.

Een span-tag kan bijvoorbeeld worden gebruikt om inline pictogrammen aan een element toe te voegen.


Antwoord 10

Onthoud, in principe vervullen zij zelf ook geen enkele functie.
Ze zijn nietspecifiek over functionaliteit alleen door hun tags.

Ze kunnen alleen worden aangepast met behulp van CSS.

Nu kom je op je vraag:

SPAN-tag samen met wat opmaak is handig om binnen een regel te houden, bijvoorbeeld in een alinea, in de html.
Dit is een soort regelniveau of instructieniveau in HTML.

Voorbeeld:

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

DIV-tagfunctionaliteit zoals gezegd kan alleen zichtbaar worden ondersteund met styling, kan grote stukken HTML-code bevatten.

DIV is blokniveau

Voorbeeld:

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

Beide hebben hun tijd en geval wanneer ze moeten worden gebruikt, op basis van uw behoefte.

Hoop is duidelijk met het antwoord.
Dank je.


Antwoord 11

Het is duidelijk en eenvoudig.

  • gebruik van spanheeft geen invloed op de lay-out omdat het inline is(in line(men moet niet verwarren omdat dingen ingepakt kunnen worden))
  • gebruik van divheeft invloed op de lay-out, de inhoud binnenin verschijnt in de nieuwe regel (block element), wanneer het element dat u wilt toevoegen geen speciale semantische betekenis heeft en u wil je dat het in een nieuwe regel verschijnt, gebruik dan <div>.

Other episodes