De verschillen tussen elementen op blokniveau en inline-elementen

click fraud protection

HTML bestaat uit verschillende elementen die fungeren als de bouwstenen van webpagina's. Elk van deze elementen valt in een van de twee categorieën: elementen op blokniveau of een inline-element. Inzicht in het verschil tussen deze twee soorten elementen is een belangrijke stap bij het bouwen van webpagina's.

Elementen op blokniveau

Dus wat is een element op blokniveau? Een element op blokniveau is een HTML-element dat een nieuwe regel op een webpagina begint en de volledige breedte van de beschikbare horizontale ruimte van het bovenliggende element uitbreidt. Het creëert grote blokken met inhoud, zoals alinea's of pagina-indelingen. In feite zijn de meeste HTML-elementen elementen op blokniveau.

Elementen op blokniveau worden gebruikt in de hoofdtekst van het HTML-document. Ze kunnen inline-elementen bevatten, evenals andere elementen op blokniveau.

Inline-elementen

In tegenstelling tot een element op blokniveau, is een inline element:

  • Het kan binnen een regel beginnen.
  • Er wordt geen nieuwe regel gestart.
  • instagram viewer
  • De breedte strekt zich alleen uit voor zover deze wordt gedefinieerd door de tags.

Een voorbeeld van een inline element is de , waardoor het lettertype van de tekstinhoud vetgedrukt wordt. Een inline-element bevat over het algemeen alleen andere inline-elementen, of het kan helemaal niets bevatten, zoals de
label breken.

Er is ook een derde type element in HTML: elementen die helemaal niet worden weergegeven. Deze elementen geven informatie over de pagina, maar worden niet weergegeven wanneer ze worden weergegeven in een webbrowser.

Bijvoorbeeld:

  •  definieert metagegevens.
  •  is het HTML-documentelement dat deze elementen bevat.

Schakelen tussen inline- en blokelementtypes

U kunt het type van een element wijzigen van inline naar blok, of vice versa, met behulp van een van deze CSS-eigenschappen:

  • weergave: blok; 
  • weergave: inline; 
  • Geen weergeven;

De CSS Met display-eigenschap kunt u een inline-eigenschap wijzigen in block, of een block in inline, of niet weergeven helemaal niet.

Wanneer moet u de weergave-eigenschap wijzigen?

Laat in het algemeen de weergave-eigenschap met rust, maar er zijn gevallen waarin het nuttig kan zijn om inline- en blokweergave-eigenschappen om te wisselen.

  • Horizontale lijstmenu's: Lijsten zijn elementen op blokniveau, maar als u wilt dat uw menu horizontaal wordt weergegeven, moet u de lijst converteren naar een inline-element, zodat elk menu-item niet op een nieuwe regel begint.
  • Kopteksten in de tekst: Soms wilt u misschien dat een koptekst in de tekst blijft staan, maar de HTML-koptekstwaarden behoudt. Als u de waarden h1 tot en met h6 wijzigt in inline, kan tekst die na de afsluitende tag komt, ernaast op dezelfde regel blijven stromen, in plaats van op een nieuwe regel te beginnen.
  • Het element verwijderen: Als u een element volledig uit de document's normale stroom, kunt u het display instellen op:
    geen
    Een opmerking, wees voorzichtig bij het gebruik van display: geen. Hoewel die stijl inderdaad een element onzichtbaar maakt, wil je dit nooit gebruiken om tekst te verbergen die je om SEO-redenen hebt toegevoegd, maar die je niet voor bezoekers wilt weergeven. Dat is een trefzekere manier om uw site te laten bestraffen voor een black hat-benadering van SEO.

Veelvoorkomende fouten bij het opmaken van inline-elementen

Een van de meest voorkomende fouten die een nieuwkomer in webdesign maakt, is proberen een breedte in te stellen op een inline-element. Dit werkt niet omdat de breedte van inline-elementen niet wordt gedefinieerd door de containerbox.

Inline-elementen negeren verschillende eigenschappen:

  • breedte
    en
    hoogte
  • Maximale wijdte
    en
    maximale hoogte
  • min-breedte
    en
    min-hoogte

Microsoft Internet Explorer (vervangen door Microsoft Edge) heeft in het verleden een aantal van deze eigenschappen onjuist toegepast, zelfs op inline-boxen. Dit is niet normconform. Dit is mogelijk niet het geval met nieuwere versies van de webbrowser van Microsoft.

Als u de breedte of hoogte moet definiëren die een element moet innemen, moet u dat toepassen op het element op blokniveau dat uw inline-tekst bevat.

instagram story viewer