Hvorfor bruge HTML5?

Tags:    html5

<< < 12 > >>
Jeg har stadig svært ved at se fidusen i at bruge HTML5 i forhold til layout - personligt giver det mig bedre overblik, når jeg selv navngiver mine div'er.

Og jo, jeg kender argumenterne - især hurtigere loadtime er et godt argument (mobiler etc)..

Meeen HVOR meget hurtigere loader en hjemmeside med HTML5-struktur kontra en "almindelig" side med almindelige div'er egentlig? Hvis forskellen er fx under 1 sekund, virker det ret ligemeget..

Jeg kan se fordelene ved tags som animate med flere, men i forhold til strukturelle tags som article, aside etc er der vel ingen andre fordele end at browseren nu / senere er i stand til at loade en side hurtigere?

Jeg vil gerne overbevises - har lavet sider i HTML5, men må ærligt indrømme at jeg foretrækker klassisk navngivning i forhold til strukturen, så kom med nogen gode argumenter..



19 svar postet i denne tråd vises herunder
6 indlæg har modtaget i alt 17 karma
Sorter efter stemmer Sorter efter dato
Jeg har stadig mine tvivl om, hvorvidt indhold pakket i HTML5-tags påvirker SEO positivt - her en artikel der siger det samme:

http://www.impressivewebs.com/html5-seo/


Man kan også finde artikler, som siger, at jorden er skabt af et flyvende spaghetti monster: http://www.venganza.org/

Her er et par artikler, som siger, at HTML5 giver bedre muligheder for søgemaskinerne, enten nu eller senere:
* http://www.webconfs.com/html5-seo-article-27.php
* http://www.highervisibility.com/blog/how-html5-helps-improve-your-seo-efforts/
* http://searchengineland.com/seo-best-practices-for-html5-truths-half-truths-outright-lies-99406
* http://www.seochat.com/c/a/search-engine-optimization-help/should-you-move-your-site-to-html5/

Det giver højst sandsynligt ikke væsentligt bedre loadtider, men bedre semantik vil jo forbedre søgemaskinernes mulighed for at kategorisere de forskellige elementer på din side...hvilken af disse to er en overskrift?:
Fold kodeboks ind/udKode 


Et godt gæt er, at den første er en overskrift, for det indgår i 'class' navnet, men det er ikke sikkert, og hvis jeg har brugt minimeret CSS, så er det helt umuligt:
Fold kodeboks ind/udKode 


Men så er det jo godt at vi har <h1> og lignende tags til at markere overskrifter. Og den slags semantik er der mere af i HTML5.



Indlæg senest redigeret d. 15.07.2013 17:11 af Bruger #2695
Hej Kenneth

Forstår godt din skepsis, men hvis du ser på html på en side, så kan du nemt tolke hvad der hvad fordi du har din logiske sans.
Hvis du derimod skal skrive et program der skal forstå din html, så bliver det straks langt sværere.
H-tags hjælper, men hvordan ved du ellers hvad den der har lavet på siden mener er vigtigt?
Det kan nu differencieres fordi der er beskrivende tags der kan fortælle værdien, og du kan som udvikler opbygge dine dele i hvad der er vigtigt og ikke vigtigt, og du kan nemt se hvilke dele der er hvad.

Ret mange har nok prøvet at ikke selv skrive nogen beskrivelse af deres side, og når Google så finder den er det første på siden din navigationslinie som så er de første 120 karakterer som er den beskrivelse som dine potentielt besøgende så ser når de finder dig på Google.
Nu kan du ligge den ind i et nav element for at fortælle Google dette er nok ikke det vigtigste på siden.

Herved kan du og alt andet der gennemlæser din side, nu få noget mere ud af din side (altså dem der ikke har logisk sans), fordi disse elementer beskriver dit indhold på siden.

Derudover er det nemmere at kunne udtrække data til fx Google eller andre services.
Fx andre sites kan finde alle articles og dermed nemt lave beskrivelser af dine produkter med billede, overskrift, pris, og et link over til din side, hvor med div, span, p, ved de ikke hvordan de skal finde dine data.
Fx når google finder din produktoversigt kan den nemmere se hvor mange produkter du har etc, og hvis den skal vise produktdetaljer for et produkt kan den vise en ranking fra brugere, overskrift, mål på produktet etc. inden du kommer derind og måske gøre din kommende besøgende mere interesseret.

Prøv at søge på eiffel tower på Google og se alle de data der præsenteres i søgeresultatet.
Ved at du fortæller hvad der er hvad på din side, kan en søgemaskine finde ud af hvilke dele der er hvad og dermed bruge dem til at lave en service for andre som kan blive mere interesseret i at besøge dig.

Fx kan nogle lave en service der søger efter rankings eller reviews på dine produkter, og dermed måske placere dig højest på deres service side og give dig endnu flere besøgende.

Fordelene i forhold til SEO er jo ENORM! Google forstår din kode og dine elementer fordi de er langt mere beskrivende, hvor at tidligere aner de ikke hvad <p id="desc"> og <p id="rev"> er. Man kan via logisk sans vide at desc nok er description, og rev er review, man her kommer problemet i at Google nok skal "gætte" sig til det og derfor laver den måske fejl nogle gange, hvor hvis du bruger et beskrivende tag til andet end det er ment til er det din egen fejl.
Det kan være quote og alt muligt andet, som google nu kan vide hvad disse data er.

Kontakt er et godt eksempel hvor den nu kan vide dette er dit navn, dette er din jobtitel, dette er din adresse, dette er postnummer + by, og dette er dit telefonnummer, dette er din email, og dette er yderligere information (FX: vil gerne træffes efter 16 på telefon).
Det kan du trække ud til noget brugbart, men 4 tal og en serie bogstaver efter kan Google ikke gætte sig til er postnummer og by med sikkerhed, som hvis du beskriver det.
Microformats er noget som bygger videre på selvsamme princip som beskriver delelementer af din side, og er noget endnu mere finkornet som vil kunne gøre endnu mere gavn.

Indholdet som sådan er søgemaskinerne jo ligeglad med, for den aner ikke hvad det er. Men hvis den pludseligt ved hvad elementer på sin side er, kan den nemmere skelne hvad der måske er vigtigt ud fra hvad der er hvad.



du har misforstået. Det er ikke så meget et spørgsmål om strukturen på HTML'en men mere det semantiske i opbygningen af siden f.eks. til SEO.

ved, at bruge header og article istedet for en div med et tilfældigt navn, kan du meget nemmere fortælle, hvad der er hvad, som der står så fint på W3 om de nye elementer i HTML5:


The HTML4 way of doing things is all well and good, but semantically it could be so much better:

• Humans can tell the different content apart, but machines can't — the browser doesn't see the different divs as header, footer, etc. It sees them as different divs. Wouldn't it be more useful if browsers and screen readers were able to explicitly identify say, the navigation menu so a visually impaired user could find it more easily, or the different news items on a bunch of blogs so they could be easily syndicated in an RSS feed without any extra programming?

• Even if you do use extra code to solve some of these problems, you can still only do it reliably for your web sites, as different web developers will use different class and ID names, especially when you consider the international audience — different web developers in different countries will use different languages to write their class and id names.


det handler med andre ord ikke så meget om, at du forstå det. men mere, at andre (mennesker og computere) forstår dine elementer; Sagt med andre ord, at din kode og side bliver mere semantisk.



Indlæg senest redigeret d. 15.07.2013 13:28 af Bruger #17081
Det er ikke så folk med svagt syn kan læse koden, det er så søgemaskinerne bedre kan. Det er langt nemmere for søgemaskinerne f.eks. at afgøre om et <header> element er overskriften end et <div id="header"> element.

Derudover introducerede HTML5 en lang række nye api'er: https://rawgithub.com/whatwg/html-differences/master/Overview.html#apis



Indlæg senest redigeret d. 15.07.2013 14:14 af Bruger #15668
Dan, hvis du læser godt efter, så vil du se, at jeg holder mig fuldstændig til divs hvor I andre brugte mere sigende tags. Ingen holdt sig 100% til divs, det gjorde jeg for at understrege forskellen. OP spurgte igen ind til, hvorfor semantik var vigtig, så jeg prøvede at gøre det mere tydeligt ved at fjerne al semantik.

Derudover tilføjede jeg listen af artikler, som siger noget positivt omkring HTML5 og SEO, som en modvægt til OP's artikel, som talte det ned.

Og så skriver jeg også, at brugen af HTML5 sandsynligvis ikke forbedrer load tiden, det har ingen andre skrevet.

Så jeg bestemt ikke enig i, at jeg bare har gentaget, hvad der allerede er sagt.



Indlæg senest redigeret d. 15.07.2013 19:59 af Bruger #2695
Når nu tråden er genoplivet og argumenter som fx SEO allerede er nævnt - hvad præcis er det du mener du mister i HTML5?

Du kan jo stadig navngive dine elementer som du har lyst og selvom der er mulighed for fx header og footer er der ingen der tvinger dig til at benytte dem fremfor divs. Hurtigere loadtid er ikke et argument jeg for alvor er stødt på som overvejende gevinst om end der selvfølgelig er noget at vinde.

I bund og grund vil jeg mene, at kan man lave et moderne, pænt og validt stykke "gammeldags" HTML kan du stort set bare skifte din DOCTYPE og så har du HTML5 - og så kan man af semantiske grunde skifte enkelte tags ud, fx brug af header og footer men ikke nødvendigvis aside, og af funktionsmæssige årsager begynde at kigge på fx input attributter og API'er.

Min pointe er bare, at et skifte til HTML5 slet ikke behøver at være så radikalt som det lyder til at være ud fra dine kommentarer da der ikke er forsvundet men kun tilføjet muligheder.



Tak for svar. Er dog stadig ikke overbevist - vi laver vel ikke hjemmesider med det primære mål at andre webudviklere lettere kan danne sig et overblik over koden bag siden?

Hvis de eneste argumenter for at bruge HTML5 er at gøre livet lettere for folk med svagt syn (håber ikke jeg fornærmer nogen - det kan som nævnt i artiklen løses med lidt standard-kode) og RSS-feeds, er omstillingen til HTML5 måske ikke det værd?

Jeg kan forstå argumentet i forhold til at browsere hurtigere kan læse en side, men i forhold til SEO benytter søgemaskinerne sig vel stadig kun af tags placeret i head af siden (title + content etc) - og H1, H2.. og images og dertil lidt hemmeligt til at vurdere hvor godt en side matcher en søgning.

Sagt på en anden måde - fordi indholdet er placeret i HTML5-tags gør det da ikke indholdet mere SEO-venligt?







jow hvis indholdet er placeret i HTML5 tags gør det siden mere SEO venlig. Og jow. Søgemaskiner bruger meget mere end kun H1 og H2. Det bruger alle elementer. Og med HTML5-tags kan du sige <article> som jo "nok" er hoved indholdet på siden frem for h1 og p i <aside>

Det hele har i bund og grund noget, at gøre med side hierakiet altså sidens opbygning og inddeling i sektioner.



Så det du siger er at søgemaskinerne læser indholdet placeret mellem HTML5-tags, mens indhold placeret i div'er som har et unikt / personligt navn ikke læses?



nej, det er ikke det vi siger. Men tag et hurtigt eksempel

Eksempel 1
Fold kodeboks ind/udHTML kode 


Eksempel 2
Fold kodeboks ind/udHTML kode 


Hvilken overskrift i eksempel 1 og 2 tror du søgemaskinen vil sige er mest vigtig ?



<< < 12 > >>
t