HTML-elementer: blokknivå vs. innebygde elementer
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.
- |_+_| og |_+_|
- |_+_| og |_+_|
- |_+_| og |_+_|
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:
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.