Html div tag | forklart

Div refererer til divisjonen eller seksjonen i et HTML -dokument. Det er en tom beholder som kan inneholde forskjellige HTML -elementer. Hensikten med Div er å legge til spesifikke CSS -stiler til elementene som brukes i den respektive div -taggen. DIV -taggen tilhører HTML -blokkeringskategorien av elementer og starter dermed en ny linje når den initieres.

En div kan inneholde flere andre divisjoner, og hver div inneholder forskjellige stylingegenskaper. Hovedformålet med en div er å lage en gruppe lignende typer elementer slik at de lett kan styles. På grunn av den utvidede funksjonaliteten, blir den referert til som nøkkelkoden mens du utvikler en webside ved hjelp av HTML. I denne artikkelen har vi demonstrert arbeidet med DIV -taggen, og noen få eksempler er illustrert for å vise bruken av DIV -taggen.

Hvordan HTML Div Tag fungerer

DIV -taggen inneholder start- og lukkekoder, og følgende syntaks brukes til å lage en div i HTML.

Alt som er skrevet mellom disse taggene vil ta i bruk verdiene som er satt for denne diven. For en grunnleggende forståelse opprettes en div ved hjelp av følgende kode.

En div opprettes på websiden

dette er div

Koden er beskrevet som følger:

- Tittelen på siden vil være “Div Tag”

- Bakgrunnen til kroppen er satt til “Lys Sea Green”

- En div opprettes og bakgrunnsfargen er satt til "gul"

- Et avsnitt opprettes i DIV -taggen

Bildet av koden er gitt nedenfor:

Utgangen fra websiden vises nedenfor:

Følgende observasjoner kan gjøres fra output ovenfor:

- Div -taggen oppretter en ny linje

- Opptar hele bredden (hvis grensen ikke er angitt) på siden

Hvordan du bruker html div tag

Grunnleggende arbeid med DIV -taggen er forklart i delen ovenfor. Imidlertid forklarer denne delen bruken av HTML DIV -taggen i forskjellige scenarier. Som nevnt tidligere, er flere elementer inneholdt i en div for å style alle disse elementene på en lignende måte. Ettersom stylingen er mulig med CSS, anbefales det å bruke en inline eller ekstern CSS -klasse.

Eksempel 1: Bruke en HTML DIV -tagg med flere CSS -klasser

En DIV -tag kan brukes med flere CSS -klasser. For å øve på denne funksjonaliteten brukes følgende HTML -kode:

Diven som bruker to CSS -klasser

Velkommen til Linuxhint

En teknisk dal

Koden er beskrevet nedenfor:

- To CSS -klasser er laget med navn "Color" og "MISC".

- Fargeklassen definerer "bakgrunnsfarge" og "fontfarge", mens MISC -klassen inneholder "bredden", "polstring" og "fontstil"

- En div er opprettet med en klasseattributt og brukte navnet på begge klasser i den

- Tre HTML -elementer

,

og brukes i Div

Merk: Når du bruker flere klasser navn i en klasseattributt til DIV -taggen, må du legge til et mellomrom mellom klassenavn for å skille begge klasser.

Bildet av koden er gitt nedenfor:

Utgangen fra HTML -koden på en webside vises nedenfor:

Eksempel 2: Bruke flere DIV -tagger

Å bruke flere div er den forvirrende delen av HTML DIV -taggen. Følgende HTML -kode refererer til å bruke flere DIV -er med forskjellige

Første div

Velkommen til Linuxhint

Second Div

Ledende leverandør av innhold

Koden er beskrevet som:

- opprettet to CSS -klasser kalt “First” og “Second”

- Den "første" klassen definerer "bakgrunnsfarge", "farge på font", bredde, "float"

- Den "andre" klassen har egenskaper som "bakgrunnsfarge", "bredde", "float"

- En div initialiseres med en klasseattributt og "først" som verdien av attributtet

- En annen div er opprettet med "andre" som en verdi av klasseattributtet

Bildet av koden vises nedenfor:

Utgangen på websiden vises nedenfor:

Konklusjon

DIV -taggen i HTML refererer til å lage en beholder som lar deg lage en gruppe HTML -elementer som kan styles på samme måte. Denne artikkelen demonstrerte arbeidsmekanismen til DIV -taggen. I tillegg er det angitt flere eksempler som viser hvordan en HTML DIV -tag kan brukes i forskjellige scenarier.