HTML-elementer: blokknivå vs. innebygde elementer

CSS-stilark på en dataskjerm

Degui Adil / EyeEm / Getty Images





HTML består av ulike elementer som fungerer som byggesteinene til nettsider. Hvert av disse elementene faller inn i en av to kategorier: blokknivåelementer eller et innebygd element. Å forstå forskjellen mellom disse to typene elementer er et viktig skritt i å bygge nettsider.

Blokknivåelementer

Så hva er et blokknivåelement? Et blokknivåelement er et HTML-element som starter en ny linje på en nettside og utvider hele bredden av det tilgjengelige horisontale rommet til det overordnede elementet. Den lager store blokker med innhold som avsnitt eller sideinndelinger. Faktisk er de fleste HTML-elementer blokknivåelementer.



Elementer på blokknivå brukes i HTML-dokumentets kropp. De kan inneholde innebygde elementer, så vel som andre blokknivåelementer.

Innebygde elementer

I motsetning til et blokknivåelement, et innebygd element:



  • Det kan begynne innenfor en linje.
  • Den starter ikke en ny linje.
  • Bredden strekker seg bare så langt som den er definert av taggene.

Et eksempel på et inline-element er , som gjør at skriften til teksten inneholder fet skrift. Et innebygd element inneholder vanligvis bare andre innebygde elementer, eller det kan ikke inneholde noe i det hele tatt, for eksempel
bryte tag.

Det er også en tredje type elementer i HTML: de som ikke vises i det hele tatt. Disse elementene gir informasjon om siden, men vises ikke når de gjengis i en nettleser.

For eksempel:

  • definerer stiler og stilark.
  • definerer metadata.
  • er HTML-dokumentelementet som inneholder disse elementene.

Bytte inline- og blokkelementtyper

Du kan endre et elements type fra inline til blokk, eller omvendt, ved å bruke en av disse CSS-egenskapene:



  • |_+_|
  • |_+_|
  • |_+_|

De CSS display property lar deg endre en innebygd egenskap til blokk, eller en blokk til innebygd, eller ikke å vise i det hele tatt.

Når skal du endre visningsegenskapen

Generelt lar du visningsegenskapen være i fred, men det er noen tilfeller der det kan være nyttig å bytte inline- og blokkvisningsegenskaper.



    Horisontale listemenyer:Lister er blokknivåelementer, men hvis du vil at menyen skal vises horisontalt, må du konvertere listen til et innebygd element slik at hvert menyelement ikke starter på en ny linje. Overskrifter i teksten:Noen ganger vil du kanskje at en overskrift skal forbli i teksten, men opprettholde HTML-overskriftsverdiene. Hvis du endrer h1 til og med h6-verdiene til inline, vil tekst som kommer etter den avsluttende taggen fortsette å flyte ved siden av den på samme linje, i stedet for å starte på en ny linje. Fjerne elementet:Hvis du vil fjerne et element helt fra dokumentets normal flyt , kan du sette displayet til |_+_|Én note, vær forsiktig når du bruker display: ingen. Selv om den stilen faktisk vil gjøre et element usynlig, vil du aldri bruke dette til å skjule tekst du har lagt til av SEO-grunner, men ikke vil vise for besøkende. Det er en sikker måte å få nettstedet ditt straffet for en svart hatt-tilnærming til SEO.

Vanlige inline-elementformateringsfeil

En av de vanligste feilene en nykommer innen webdesign gjør, er å prøve å sette en bredde på et inline-element. Dette fungerer ikke fordi bredden på inline-elementer ikke er definert av beholderboksen.

Innebygde elementer ignorerer flere egenskaper:



  • |_+_| og |_+_|
  • |_+_| og |_+_|
  • |_+_| og |_+_|

Microsoft Internet Explorer (erstattet av Microsoft Edge) har tidligere feilaktig brukt noen av disse egenskapene til og med innebygde bokser. Dette er ikke i samsvar med standarder. Dette er kanskje ikke tilfellet med nyere versjoner av Microsofts nettleser.

Hvis du trenger å definere bredden eller høyden som et element skal ta opp, vil du bruke det på blokknivåelementet som inneholder den innebygde teksten.