Hvordan og når du skal bruke en vektlegger i HTML

click fraud protection

En av kodene du vil lære tidlig i webdesign utdanning er et par koder kjent som "vektleggings-koder". La oss ta en titt på hva disse kodene er og hvordan de brukes i nettdesign i dag.

Tilbake til XHTML

Hvis du lærte HTML for mange år siden, i god tid før oppveksten av HTML5, brukte du sannsynligvis både fet og kursiv. Som du forventer, gjorde disse kodene elementene til henholdsvis fet tekst eller kursiv tekst. Problemet med disse kodene, og hvorfor de ble skjøvet til side til fordel for nye elementer (som vi vil se på om kort tid), er at de ikke er semantiske elementer. Dette er fordi de definerer hvordan teksten skal se ut i stedet for informasjon om teksten. Husk at HTML (som er der disse kodene ville bli skrevet) handler om struktur, ikke visuell stil! Visuelt håndteres av CSS og beste praksis for webdesign har lenge hevdet at du bør ha en tydelig skille mellom stil og struktur på websidene dine. Dette betyr at du ikke bruker elementer som ikke er semantiske og som ser detalj ut i stedet for struktur. Dette er grunnen til at den dristige og

instagram viewer
kursiv koder er vanligvis erstattet av sterke (for fet skrift) og vekt (for kursiv).

og

De sterke elementene og vektleggingene legger til informasjon i teksten din, og inneholder detaljer om innhold som skal behandles annerledes og vektlegges når innholdet blir snakket. Du bruker disse elementene på omtrent samme måte som du tidligere hadde brukt fet skrift og kursiv. Bare omgir teksten din med åpnings- og lukkekoder ( og for vektlegging og og for sterk vekt) og vedlagte tekst vil bli vektlagt.

Du kan hekke disse kodene, og det spiller ingen rolle hvilken ekstern kode. Her er noen eksempler.

Denne teksten er vektlagt og de fleste nettlesere vil vise det som kursiv. 
Denne teksten er sterkt understreket og de fleste nettlesere vil vise det som fet skrift. 

I begge disse eksemplene dikterer vi ikke visuelt utseende med HTML. Ja, standardutseendet til tag ville være kursiv og ville være fet, men disse utseendene kunne lett endres i CSS. Dette er det beste fra begge verdener. Du kan bruke standard nettleserstiler for å få kursiv eller fet tekst i dokumentet uten å krysse linjen og blande struktur og stil. Si at du ville ha det tekst for ikke bare å være fet, men også å være rød, kan du legge til dette i SCS.

sterk {
fargen rød;
}

I dette eksemplet trenger du ikke å legge til en egenskap for fet skriftvekt siden det er standard. Hvis du ikke vil overlate det til tilfeldighetene, kan du imidlertid alltid legge det til:

sterk {
skriftvekt: fet;
fargen rød;
}

Nå vil du være garantert å ha en side med fet (og rød) tekst uansett hvor tag brukes.

Dobbel opp på vektlegging

En ting vi har lagt merke til i løpet av året er hva som skjer hvis du prøver å doble vekt. For eksempel:

Denne teksten skal ha begge deler fet og kursiv tekst inni den.

Du skulle tro at denne linjen ville produsere et område som har fet skrift og kursiv tekst. Noen ganger skjer dette virkelig, men vi har sett at noen nettlesere bare respekterer den andre av de to vektstilene, den nærmeste den aktuelle teksten, og viser bare denne som kursiv. Dette er en av grunnene til at vi ikke dobler opp vektlegger.

En annen grunn til å unngå denne "doblingen" er for stilformål. En form for vekt er vanligvis nok til å formidle tonen du ønsker å gi. Du trenger ikke fet, kursiv, farge, forstørre og understreke tekst for at den skal skille seg ut. Den teksten, vil alle de forskjellige typer vektlegging, ville bli uklar. Så vær forsiktig når du bruker vektmerker eller CSS-stiler for å gi vekt og ikke overdriv.

En merknad om fet skrift og kursiv

En siste tanke - mens den dristige () og kursiv () -koder anbefales ikke lenger å brukes som vektelementer, det er noen webdesignere som bruker disse kodene til å style inline områder av tekst. I utgangspunktet bruker de det som en element. Dette er hyggelig fordi kodene er veldig korte, men det er vanligvis ikke anbefalt å bruke disse elementene på denne måten. Vi nevner det i tilfelle du ser det der ute på noen nettsteder som ikke brukes til å lage fet eller kursiv tekst, men for å lage en CSS-krok for en annen form for visuell styling.

instagram story viewer