stign.no

Welcome to my WordPress weblog

Html 5

Posted on | August 12, 2009 | No Comments

Html 5

Hva er nytt i forhold til html4/xhtml 1.x ?

Nye parsing regler rettet mot fleksibel parsing og kompatibilitet

Nye elementer – section, article, footer, audio, video, progress, nav, meter, time, aside, canvas, datagrid

Nye typer av form controls – dates and times, email, url, search

Nye attributter – ping (on a and area), charset (on meta), async (on script), data-x (where x is a user supplied custom attribute name.)

Globale attributter (som kan bli lagt til på alle elementer) – id, tabindex, hidden

Utgåtte elementer – center, font, strike

Ny markup

HTML 5 tilbyr en rekke nye elementer og attributter som gjenspeiler vanlig bruk på moderne nettsider. Noen av dem er semantiske erstatninger for felles bruk av generiske blokkere (<div>) og inline (<span>) elementer, for eksempel <nav> (nettsted navigasjon blokkere) og <footer>. Andre elementer som gir ny funksjonalitet gjennom et standardisert grensesnitt som <audio> og <video> elementer. 

Noen deprecated elementer fra HTML 4.01 har blitt droppet, inkludert elementer som <font> og <center>, der effektene er oppnådd ved hjelp av CSS. Det er også en fornyet vekt på betydningen av DOM scripting i Web oppførsel. 

HTML5 syntaksen er ikke lenger basert på SGML selv om markupen er veldig lik. Den har imidlertid blitt utviklet for å være bakover-kompatibel med eldre versjoner av HTML. Det følger med en ny innledende linje som ser ut som SGML dokumenttype erklæringen <! DOCTYPE html>, noe som utløser standarder-kompatibel gjengivelsesteknologi i alle nettlesere som bruker "DOCTYPE sniffing". Man kan bruke XHTML 1.x Syntaks på HTML5 dokumentet, eller vanlig HTML-syntaks. Enten det er uppercase attributter og element (tag) navn, kode elementer som ikke er lukket, og ingen anførselstegn for innpakning attributter verdier.

Nye APIer

I tillegg til å angi markup, spesifiserer HTML 5 scripting APIer (Application Programming Interfaces). Eksisterende Document Object Model (DOM) blir utvidet og de facto funksjoner dokumentert. Det er også nye APIer, for eksempel: 

Canvas elementet for umiddelbar modus 2D tegning 

Tidsbestemt media-avspilling 

Offline lagring database 

Dokumentredigeringsprogrammet 

Dra-og-slipp 

Meldinger på tvers av dokumenter

Nettleserhistorie management

MIME-type og protokollbehandler registrering 

Nye funksjoner 

  • Canvas elementet gir en enkel og effektiv måte å trekke tilfeldig grafikk på en webside ved hjelp av JavaScript. 
  • Video element som mål å gjøre det så enkelt å legge inn video på en nettside som det er å legge inn bilder i dag. Ingen plugins, ingen feilaktige kodeker. 
  • Geolocation APIene angir lokasjon, enten via GPS, celle-tårnet triangulation eller wi-fi databaser tilgjengelig for noen HTML 5-kompatibel nettleser-basert program. 
  • AppCache og Database gjør det enkelt å bygge offline apps. 
  • Web arbeidstakere er en mekanisme for å kjøre aktiviteter i bakgrunnen for å gjøre behandling som ellers gjør nettleseren tregere.

Html 5 DOCTYPE

<!DOCTYPE html>

En betydelig enklere enn de fleste DOCTYPEs vi har sett tidligere – og det var tilsiktet. Poenget med denne forenklingen (blant mange andre) i HTML5, er et forsøk på å gjøre det enda enklere å utvikle en standard-basert nettside, og at det skal virkelig lønne seg.

Denne DOCTYPEn innebærer at man slipper unna frustrasjon over den nye metakoden til IE8. Dette betyr at du kan skrive dine websider basert på riktige standarder (CSS, HTML5, JavaScript) uten å måtte bruke nettleser-sentriske koder for å gjøre det. 

Det som også er bra med denne nye DOCTYPEn,  er at alle aktuelle nettlesere (IE, FF, Opera, Safari) vil se på den og lese innholdet i standard modus – selv om de ikke implementere HTML5. Dette betyr at vi kan begynne å skrive websider ved hjelp HTML5 i dag og gjøre dem gjeldende lenge.

Eksempler på html 5 markup

Section

<section> Section innhold plasseres her.
</section>

Article

<article> Article innhold plasseres her.
</article>

Footer

<footer>
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
</footer>

Gjenbruk av elementer på en side : f.eks bruk av footer elementet

Et viktig punkt å merke seg er at du ikke er begrenset til å bruke ett <footer> element per side, kan du bruke flere bunntekster, som hver vil bli <footer> for denne delen av dokumentet. Eksempelvis:

Section

<section> Section content appears here.
<footer> Footer information for section. </footer>
</section>

Article

<article> Article content appears here.
<footer> Footer information for article. </footer>
</article>

 

Mer informasjon om footer elementet: http://www.w3.org/TR/html5/semantics.html#the-footer-element

Aside -elementet 

HTML 5 tilbyr et nytt element for å merke ytterligere informasjon som kan forbedre en artikkel, men som ikke nødvendigvis er nøkkelen til å forstå det. Men i tolkningen av <aside> det ligger forvirring med hensyn til hvordan den kan brukes.

Først en titt på hvordan HTML 5-spesifikasjonen definerer <aside>: 

Aside elementet representerer en del av en side som består av innhold som er relatert til innholdet rundt , og som samtidig kan anses som atskilt fra selve innholdet. Slike deler blir ofte fremstilt som sidefelt i trykkverk. 

Hvor strengt bør dette forholdet være? Veldig. Godt <aside> innhold omfatter pull-sitater, en ordliste eller relaterte koblinger.

Oktober 2009. 

Oktober er siste deadline for arbeidsutkastet for HTML 5. 

Det betyr at problemene med spec, forbedringer av bugs, alt må være på plass og sendt og skrevet til spec i oktober i år.

Bakoverkompatibilitet

HTML 5 er definert på en måte som gjør den bakoverkompatibel med måten brukeragenter håndterer publisert innhold.

Brukeragenter kreves imidlertid alltid å støtte eldre elementer og dette er grunnen til spesifikasjonen klart skiller kravene til forfattere og brukeragenter. Dette betyr at forfatterne ikke kan bruke isindex eller klartekstgodkjenning element, men brukeragenter er nødvendig for å støtte dem på en måte som er forenlig med hvordan disse elementene har opptrådt tidligere. 

Siden HTML 5 har separat conformance kravene til forfattere og brukeragenter, er det ikke lenger behov for å merke ting med "deprecated".

Bane "krøtterstier" 

Når en praksis allerede er utbredt blant forfatterne, kan du vurdere å vedta det i stedet for å frastøte det eller finne opp noe nytt. 

Forfattere bruker allerede <br/> syntaks i motsetning til <br> i HTML og det er ingen skade gjort ved at det brukes. 

Evolusjon, ikke revolusjon 

Revolusjoner søker ofte å forandre verden til det bedre. Oftest er det imidlertid bedre å videreutvikle et eksisterende design i stedet for å kaste dem bort. På denne måten trenger ikke forfattere å lære nye modeller, og innhold vil leve lenger. Nærmere bestemt betyr dette at en helst bør designe funksjoner slik at gammelt innhold kan dra nytte av nye funksjoner uten å gjøre urelaterte endringer. Og implementasjoner skal kunne legge til nye funksjoner til eksisterende kode, heller enn å måtte utvikle helt separate modi. 

Bytte til XML-syntaks krever en global endring, så fortsett å støtte klassiske HTML-syntaks også.

 

 

The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML 4, such as <em/content/. Documents using this "custom" syntax must be served with the text/html MIME type.

 

HTML 5 also defines detailed parsing rules (including "error handling") for this syntax which are largely compatible with popular implementations. User agents will follow these rules for resources that have the text/html MIME type. Here is an example document that conforms to the HTML syntax:

 

<!doctype html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Example document</title>

  </head>

  <body>

    <p>Example paragraph</p>

  </body>

</html>

The other syntax that can be used for HTML 5 is XML. This syntax is compatible with XHTML1 documents and implementations. Documents using this syntax need to be served with an XML MIME type and elements need to be put in the http://www.w3.org/1999/xhtml namespace following the rules set forth by the XML specifications. [XML]

 

Below is an example document that conforms to the XML syntax of HTML 5. Note that XML documents must have an XML MIME type such as application/xhtml+xml or application/xml.

 

<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Example document</title>

  </head>

  <body>

    <p>Example paragraph</p>

  </body>

</html>

 

 

 

No related posts.

Category: Featured, Html 5
Tags:

Comments

Leave a Reply





Comment Spam Protection by WP-SpamFree

  • Categories

  • Twitter

  • RSS smashingmagazine.com

    • Featuring Recent Posts WordPress Widget development by YD