Hva er fordelen med en div tag?

HTML-elementer modelinnholdselementene innenfor websider. Ved hjelp av elementer, kan utviklere lage sider med konkrete logiske strukturer og presentasjonsegenskaper. Den "div" tag er en av de vanligste elementene i websider. En "div" tag representerer en del av en side og kan inneholde tekst, data, media eller andre elementer, inkludert andre nøstede "div" elementer. Ved å bruke "div" elementer, kan utviklere lage nettsteder som er konsekvent i utseende og mottagelig for fremtidig utvikling.

Struktur

De som er involvert i å bygge et nettsted separat innhold fra formatering teknologier. De "div" elementer i en nettside lar utvikleren å modellere hvert innholdselement og sidedelen, og skaper en logisk struktur for siden som helhet. Følgende eksempel HTML markup-koden demonstrerer en "div" element med ytterligere elementer nestet inni den:

<Div class = "ytre">

Her er litt tekst.

<Div class = "indre">

<Img alt = "et bilde" />

Her er mer tekst.

</ Div>

</ Div>

Når Webutviklere utgangspunktet lage sider, kan de sette inn innholdet på siden, med hver del omgitt av "div" koder, slik at de kan legge til mer innhold og styling kode trinnvis.

HTML Varianter

Før XHTML, tidligere versjoner av HTML markup noen ganger inkludert informasjon relatert til presentasjon snarere enn innhold. XHTML har som mål å lage sider hvor innhold og stil bestemmes på forskjellige steder i den generelle koden for en nettside eller et nettsted. Den "div" tag er et viktig element i denne stilen av webutvikling, fordi elementet er utelukkende laget for å definere en del av en side, i stedet for å bruke spesielle opptreden eiendom til det. Dette betyr at "div" elementer kan hjelpe utviklere å lage sider som er høyere kvalitet og mer pålitelig over nettlesere.

Oppsett

Når en utvikler lager en webside med en rekke "div" elementer i den, kan hun bruke Cascading Style Sheet kode for å finne ut hvordan disse delene av innhold vises til brukere som ser på siden i en nettleser. CSS tillater utviklerne å bruke posisjonering og legge ut egenskapene til elementene på en side, i forhold til hverandre. Følgende eksempel CSS-koden tilsier at noen elementer bør flyte på samme horisontale linje som en annen:

div.outer

{Width: 100%; }

div.inner

{Width: 400px; float: left; }

div.inner img

{Float: left; }

Da gjaldt prøven HTML-innhold, vil disse erklæringene innhaldet å vises side om side, snarere enn med linjeskift mellom "div" elementer, som er deres standard stilen som blokkelementer.

Stil

CSS-kode kan bruke forskjellige styling egenskaper til "div" elementer i tillegg til å bestemme sin layout på siden. Ved hjelp av klassen og ID-attributter, kan utviklere lage lignende stiler på tvers av grupper av elementer innenfor et helt nettsted. For eksempel, hvis en nettside inneholder massevis av bilder med bildetekster som vises ved siden av dem og utbygger ønsker å bruke de samme stilegenskapene til disse bildetekst seksjoner, kan han oppnå ønsket resultat ved å plassere hver del av bildeteksten inne i en "div" element med en bestemt klasse attributt, som følger:

<Div class = "capt"> Her er bildeteksten. </ Div>

CSS-koden kan deretter identifisere og style disse delene for hele området som følger:

div.capt {

font-size: small;

color: # 333333;

}