Paradis For Designere Og Utviklere

En titt på riktig HTML5-semantikk

Hvis du planlegger strukturen i HTML-dokumentene nøye, kan du hjelpe datamaskiner med å forstå betydningen av innholdet ditt . Riktig syntaks er viktig for sikker, men det gir i utgangspunktet bare parsers, søkemotorer og assistentteknologier med en meningsløs haug med data.

Hvis du forbedrer arbeidsflyten for deg med å legge merke til semantikk, kan du opprette et innhold av høyere kvalitet som tiltrekker flere besøkende. Semantikk er studiet av mening, i en bredere sammenheng er det en gren av logikk og lingvistikk .

I verden av webutvikling snakker vi om semantisk innhold når datamaskiner forstår strukturen i et dokument og rollene til elementene i det . Hvis vi ønsker å skape riktig semantikk, må vi dypt forstå strukturen av innholdet og evnen til frontend-teknologier.

Så hva er de konkrete fordelene? Riktig semantikk betyr et mer søkbart innhold som fører til en bedre søkemotorrangering . Vi øker også tilgjengeligheten, da hjelpemidler som skjermlesere bedre kan tolke betydningen av innholdet vårt .

Det er mange forskjellige front-end utviklingsteknikker som gjør det mulig for utviklere å oppnå en semantisk sidestruktur. Dette innlegget vil gi deg en kort introduksjon til semantiske HTML-koder og begrepet dokumentoversikt.

Semantiske og ikke-semantiske HTML-tagger

Begrepet semantikk er ikke så nytt som det ser ut, det eksisterte godt før æra av HTML5. Begrepet semantisk web ble laget så tidlig som i 2001 av Sir Tim Berners-Lee. Under "semantisk web" mente han et nett med data som kan behandles av maskiner.

Dette innebærer primært at separate HTML-elementer må ha sine utprekkelige strukturelle roller . I følge definisjonen av W3C "beskriver et semantisk element tydelig sin betydning for både nettleseren og utvikleren".

Semantiske elementer før HTML5

Semantiske elementer eksisterte før HTML5, bare i de fleste tilfeller var utviklere ikke klar over at noen av kodene de brukte, var faktisk semantiske . Bare tenk på

eller tags.

Deres roller er klare for både oss og brukeragenten:

inneholder bare et skjema, akkurat som inneholder et bilde. Ingen vil aldri plassere et bord eller en overskrift inni og tag (eller i det minste la oss håpe det).

element og tilhørende tagger som tabellrader, tabellceller osv. er også semantiske koder som eksisterte før HTML5, men på grunn av det tabellbaserte oppsettet som ble brukt mye i mange år, brukte de fleste utviklere ikke dem i semantisk måte. Dette førte til en web som ofrede logisk struktur for layout .

Ordrerte og uordnede lister, avsnitt, h1-h6 overskriftskoder er alle semantiske elementer som ligger foran HTML5.

Ikke-semantiske elementer

Ikke-semantiske elementer har ingen spesiell betydning, de hierkiske forholdene mellom dem er bare illusoriske. De mest brukte eksemplene på ikke-semantiske HTML-koder er

og tags.

Hvis nettstedet ditt noen gang har fanget den grufulle sykdommen av divitis, vet du hva jeg snakker om. Jepp. Divs er ikke nødvendigvis feil, men divitis må bekjempes hvis vi vil skrive vedlikeholdsbar, modulær og meningsfull HTML-kode.

Smashing Magazine forklarer vakkert hva det virkelige problemet er med overdreven og urimelig bruk av

stikkord. Kjernen er at hvis vi innbefatter en div i en div, virker det som om den ytre div ville være det overordnede elementet i den indre, mens det i virkeligheten ikke er tilfelle .

Det er ingen sammenheng mellom de to, akkurat som i tilfelle av taggen som fungerer på samme måte, bare på inline nivå.

Ikke vær panikk hvis du fortsatt føler deg festet til

-s og -s, men som du ikke trenger å fullstendig grøft dem . De er fortsatt det beste valget for å gruppere innhold utelukkende for styling og i andre siste tilfeller.

Tekst Semantikk i HTML5

HTML5 introduserte mange nye semantiske elementer som muliggjør enkel organisering av innhold. De hjelper deg ikke bare med å organisere innhold på nivået av hele dokumentet (se i detaljer i neste avsnitt), men også innenfor tekstblokker, som inline-tagger.

Sannsynligvis de mest populære tekstnivå-semantiske kodene er og , men de eksisterte også før HTML5. Blant de nye inline-semantiske elementene finner vi for eksempel , tag for menneskelige lesbare datatider, og for fremhevet tekst .

Se denne listen for alle semantiske elementelementer på tekstnivå som er i bruk.

Dokumentoversikt i HTML5

Dokumentoversikten er strukturen til et HTML-dokument. Det viser hvordan elementene er relaterte til hverandre. Dokumentoversikten er generert utelukkende av kartleggingselementer, for eksempel overskrifter, tabelltitler, formtitler og andre i tidligere versjoner av HTML, for eksempel HTML4.01 og XHTML.

I HTML5 er oversikten algoritmen forbedret av nye seksjonselementer, nemlig:

for seksjoner gruppert rundt et bestemt tema
for komplette eller selvforsynte komposisjoner som et blogginnlegg eller en widget
for navigasjonsblokker
for komplementære innhold som sidebjelker .

Det er et femte snittelement i HTML5, men det er ikke nytt, det er det stikkord. De

og Etiketter er også nye, men de genererer ikke nye seksjoner i et dokument, de deler opp innholdet i seksjoner. Dette betyr at hvert snittelement (kropp, artikkel, seksjon, nav og side) kan ha sin egen overskrift og bunntekst .

Tips for semantisk strukturert innhold

Hvis vi ønsker å lage et godt strukturert dokumentoversikt, må vi være oppmerksom på følgende regler:

1. Det ytterste snittelementet er alltid stikkord.

2. Seksjoner i HTML5 kan nestes.

3. Hver seksjon har sitt eget overskriftshierarki. Hver av dem (selv den innerste nestede delen) kan ha en h1 tag.

4. Mens dokumentbeskrivelsen primært er definert av de 5 seksjonene, trenger den også riktige overskrifter for hver seksjon.

5. Det er alltid det første overskriftelementet (la det være h1 eller en lavere rangeringskode) som definerer overskriften til den oppgitte delen. Følgende overskriftskoder i samme seksjon må være i forhold til dette. (Hvis den første overskriften er en h3 inne i et snittelement, ikke sett en h3 etter det.)

6. Seksjonene definert av

, og Etiketter tilhører ikke hovedoversikten av HTML-dokumentet, de er vanligvis ikke gjengitt i utgangspunktet av hjelpeteknologi.

7. Hver seksjon (kropp, seksjon, artikkel, til side, nav) kan ha sine egne

og koder som definerer toppteksten (for eksempel logo, forfatterens navn, datoer, metainfo, etc.) og bunnteksten (opphavsrett, notater, lenker, etc.) i den delen.

Eksempel: En semantisk oversikt

La oss se et eksempel på et semantisk dokumentoversikt for å se klarere hvordan det fungerer. Vår eksempelkode vil resultere i følgende dokumentstruktur:

Og her er koden med riktig semantisk snitting:

 Velkommen på vårt nettsted! 
Her er vår logo og slagord.
Velg din interesse 
Meny 1
Meny 2
Meny 3
 Tittel på artikkel 
Teksting av artikkel 
Første logiske del (f.eks. "Teori") 
Punkt 1 i første seksjon
Noen annen underposisjon i første seksjon 
Punkt 2 i første seksjon
Andre logiske del (f.eks. "Øvelse") 
Punkt 1 i andre seksjon
Punkt 2 i andre seksjon
Forfatter Bio 
Punkt i artikkelens bunntekst
Bli kjent med oss bedre 
Populære innlegg 
...
partnere 
...
Uttalelser 
...
opphavsrett
Sosiale medier lenker

Hvis du ser på kodestykket ovenfor, ser du at overskrifter og bunntekster er valgfrie, vi kan fritt velge om vi vil bruke dem eller ikke, men det anbefales på det sterkeste å alltid ta med en overskrift for hver seksjon, ellers delen vil være "Untitled" i dokumentoversikten.

Heldigvis finnes det mange flotte verktøy over hele Internett som tillater oss å sjekke dokumentoversikten, denne gangen bruker vi Outliner-verktøyet til html5.org.

Hvis vi setter inn kodebiten vår i skjemaet som tilbys av outlineren, og klikker på knappen "Skal dette!", Ser vi følgende resultat:

Dette er dokumentoversikten av vår prøvekode, slik ser søkemotorer på det, og skjermleserne leser det til synskadede brukere. Det er semantisk, godt strukturert, og det er ingen ekkel "Untitled" seksjoner i den.

Hvis du vil se hvordan en Untitled-seksjon ser ut i Outliner, slett bare noen av overskriftskodene i eksempelkoden.

Andre aspekter av websemantikk

Semantiske HTML-koder og dokumentutskrifter er bare en liten del av websemantikk. Innholdet på en nettside kan gjøres enda mer meningsfullt ved hjelp av WAI-ARIA-tilgjengelighetsprotokollen, og strukturerte data som kan brukes sammen med RDFa-protokollen, mikrodata eller JSON-LD-oppfølgingen.

Parallax Effekt i fotografi [Photoshop tutorials]

Parallax-effekten er også kjent som Ken Burns-effekten, som er oppkalt etter filmmakeren som gjorde denne effekten hans signaturvisuell stil i sine dokumentarfilmer. Denne teknikken er en panorering og zoomeffekt som brukes til å lage noe som en video fra stillbilder. Zoomen og panorering over fotografier gir følelsen av bevegelse, som holder betrakteren visuelt engasjert.He

(Tekniske og design tips)

25 fantastiske fugleperspektiv av byer rundt om i verden

Hvis du noen gang har lurt på hvordan det ville være å se en by fra fugleperspektivet, kan du alltid fly i helikopter eller se gjennom et flyvindu. Men disse alternativene er dyre, og det er usannsynlig at du kommer til å se byens sanne skjønnhet med all forurensning og skyene oppe i luften.Nedenfor har vi samlet noen av de mest imponerende antennene til byer fra hele verden . Fra

(Tekniske og design tips)

Interessante Artikler

Slik tilpasser du Firefox Reader View for bedre lesbarhet

9 Android Screen Recording Apps for å ta opp skjermaktivitet

Beskjær og endre størrelse på bilder med dette enkle jQuery-plugin

Her er de 10 kodende initiativene som viser at jenter kan kode for