Annonse

HTML5 er siste og største Hva er HTML5, og hvordan endrer det måten jeg blar gjennom? [MakeUseOf Explains]I løpet av de siste årene har du kanskje hørt uttrykket HTML5 en gang i blant. Enten du vet noe om nettutvikling eller ikke, kan konseptet være noe tåpelig og forvirrende. Åpenbart,... Les mer versjon av det mest brukte markeringsspråket på nettet. Det er noen store endringer fra den siste versjonen av språket, og hvis du ikke bruker dem, vil du gå glipp av litt kult funksjonalitet.

Vi har ikke rom til å dekke hvert nytt element i den femte versjonen av HTML, men disse ni er noen av de viktigste. Hvis du vil ha mer informasjon om de nye elementene og APIene i HTML5, må du huske å gjøre det sjekk ut W3Schools.

En introduksjon til semantiske elementer

I likhet med mye av internett, har HTML5 flyttet seg til fokus på semantikk. I stedet for at tagger bare skal brukes til formatering, er de også brukt til å fortelle nettlesere og søkemotorer Topp 7 semantiske søkemotorer som et alternativ til Google Les mer betydningen av det de omgir.

For eksempel,

bare forteller nettleseren at den inneholder et avsnitt.

, som vi drøfter øyeblikkelig, forteller en nettleser at den inneholder hovedinnholdet på siden.

Det semantiske nettet er fortsatt i utvikling, og vi har bare begynt å klø på overflaten av hva den kan gjøre. HTML5 er med på å bringe semantisk markering Hva semantisk markup er og hvordan det vil endre Internett for alltid [Teknologi forklart] Les mer til en mye større del av internett, og det kan bare være bra for fremtiden for semantisk prosessering.

1.

De

tag definerer "uavhengig, selvstendig innhold." Det enkleste eksemplet er selvfølgelig en artikkel. For denne artikkelen åpnet vi koden før introduksjonen og lukker den etter konklusjonen.

All teksten i den selvforsynte delen.

Men det er andre måter du kan bruke det på også. For eksempel inkluderer mange matlagingsblogger personlige historier om hvordan en oppskrift ble til eller hvorfor den er viktig for skribenten. Den blir deretter fulgt av selve oppskriften. Du kan komme med argumentet om at hvert av disse elementene kan stå alene.

I et forum kan hvert innlegg eller tråd bli ansett som selvstendig, og hver kunne markeres med sitt eget

stikkord. For det meste vil den bli brukt på hovedinnholdet på en side. Men husk at du også kan bruke det mer kreativt.

2.

Nært knyttet til

er
. Dette definerer en "tematisk gruppering av innhold, vanligvis med en overskrift." Så
vil være inne
… Ikke sant?

Ikke nødvendigvis. W3 påpeker at det avhenger av strukturen på nettstedet ditt. Du kan ha selvstendig innhold i forskjellige deler av siden din (tenk på forside på et nyhetsnettsted, for eksempel). Du har kanskje seksjoner i den artikkelen.

Hvorfor du trenger en DAC

Alt høres bedre ut.

Hvordan sette opp en DAC

Her er hva du trenger å gjøre.. .

Du kan til og med ha seksjoner i seksjoner hvis det passer til siden din. Husk at en seksjon bare er en "tematisk gruppering av innhold", og du finner mange steder å bruke det.

3.

Dette elementet "skal brukes som en beholder for introduksjonsinnhold." Kort sagt, det er den delen av siden din som hjelper folk til å forstå hva de skal lese.

Men ikke la deg lure - du kan bruke denne beholderen mer enn en gang. Du kan for eksempel bruke den til å identifisere sidetittelen og det innledende avsnittet til blogginnlegget ditt. Men du kan også bruke den til å markere det innledende innholdet for hver seksjon, også.

Alt du trenger å vite om DAC

Her er en nyttig introduksjon til DACer ...

Resten av artikkelen din går her.

Overskriftsseksjoner inneholder vanligvis minst en overskrifttagg - H1, H2 og så videre. De trenger ikke å gjøre det, men generelt sett, hvis du bruker en overskrifttagg, er det en god innsats at du inkluderer topptekstinnhold.

4.

W3 sier at bunntekst vanligvis inneholder "forfatteren av dokumentet, informasjon om opphavsrett, lenker til bruksvilkår, kontaktinformasjon, etc." Du kan tenke på det som "husholdnings" ting.

Dokumentasjonen sier også at du kan ha mer enn en bunntekstdel på siden din. Det er sannsynligvis en god idé å oppbevare all denne informasjonen på et enkelt sted.

5.

Denne taggen inneholder navigasjonslenkene for en gitt side. Merk at bare navigasjonsdelen får denne taggen, ikke alle koblingene på siden din. Det er for navigasjonsfelt og lignende verktøy.

Dette er en veldig enkel tagg - det er alt du trenger. Bruk den til å definere navigasjonsdelen, og bruk den ikke igjen på siden din.

6.

En av de mest interessante nye elementene i HTML5 er siden. W3 gir det den noe lite nyttige definisjonen av "noe innhold bortsett fra innholdet det er plassert i."

Kort sagt, en side er noe som er relatert til (men atskilt fra) den omkringliggende informasjonen. Det kan være en sidefelt som legger til detaljer til innholdet ditt. Når den brukes i et sett med

koder, gir den tilleggsinformasjon som ikke er nødvendig for å forstå hovedinnholdet.

Hvis vi for eksempel hadde tatt med en sidefelt i denne artikkelen som gir informasjon om historien til HTML5, ville det være en side.

Men

Hovedartikkelen går her. Artikkelen fortsetter her.

Fordi det er flere bruksområder for denne taggen, kan det være forvirrende. Hvis du husker at det er "sekundært innhold" og at det ikke alltid trenger å være et sidefelt, har du en bedre ide om hvordan du bruker den.

7.

Mange nettsteder har informasjon som må vises, men ikke tydelig. Kanskje er det opphavsrettsinformasjon for et bilde. Eller det fine utskriften på en konkurranse. Denne typen informasjon er nøyaktig hva detaljkoden er til.

Når du bruker detaljkoden, lager du skjult tekst som enkelt kan vises. Her er et eksempel:

Klikk her for å se informasjon.

Her er mer detaljert informasjon du ikke trenger med en gang.

Bare trykk på pilen for å få detaljene. Enkel. Det er like enkelt å lage det. Her er koden som brukes for eksemplet ovenfor:

Klikk her for å se informasjon. Her er mer detaljert informasjon du ikke trenger med en gang.

De

tag definerer setningen som skal vises, mens det andre innholdet er skjult. Merk at du kan bruke andre koder i detaljdelen: overskrifter, seksjoner og så videre.

Det er andre kule ting du kan gjøre med HTML 8 kule HTML-effekter som alle kan legge til på nettstedet sittDu trenger ikke å kjenne CSS eller PHP for å bygge et fancy nettsted. Bruk disse kule HTML-triksene for å generere fantastiske effekter. Les mer også, selv om du ikke vet mye CSS eller JSON.

8-9.
og

Ikke bekymre deg koden du har brukt i årevis, forsvinner ikke.

går rundt på bildekoden og lar nettleseren vite at det er et selvstendig bilde, diagram, kodeliste eller annet figur.

Hvis en figur fjernes fra siden, vil det ikke påvirke flyten av innholdet.

går innenfor figurkoden og spesifiserer en bildetekst for et bilde. Det kan se slik ut:

Dette er logoen vår!

Dette gir deg en innebygd måte å legge til en bildetekst til bildene dine. Du trenger ikke å gå gjennom CMS lenger.

Dra fordel av HTML5s kraft

De nye elementene i HTML5 tilfører mye kraft, spesielt for semantiske formål. Det er flere elementer for formatering, skalære målinger, oppgaveforløp og mer. Du kan se alle de nye elementene på W3Schools.

Men hvis du kan mestre disse ni, er du på god vei til å utnytte HTML5 godt. Og hvis du er ny på HTML, må du huske å sjekke ut det disse kodeeksemplene 17 enkle HTML-kodeeksempler du kan lære på 10 minutterVil du lage en grunnleggende webside? Lær disse HTML-eksemplene og prøv dem ut i en tekstredigerer for å se hvordan de ser ut i nettleseren din. Les mer !

Har du begynt å bruke HTML5? Hvilke nye elementer synes du er mest nyttige? Del tankene dine i kommentarene nedenfor!

Dann er en innholdsstrategi og markedskonsulent som hjelper bedrifter med å generere etterspørsel og potensielle kunder. Han blogger også om strategi og innholdsmarkedsføring på dannalbright.com.