html

HTML5 Grunderna (1 av 4)

Nästa iteration av HTML har blivit uppfylld av spänning av vissa, avsky av andra och förvirring / rädsla av alla andra. Älskar det eller hatar det, HTML 5 definierar snart hur du bygger webbplatser. Detta är den första artikeln i en serie med fyra delar som kommer att introducera HTML5 och dess grundläggande funktioner samt förklara de viktigaste skillnaderna från HTML4.01 och XHTML 1.0 så att du kan börja förbereda dig själv och dina webbplatser för övergången. Under nästa vecka fokuserar vi på tre huvudområden:

1. Nya element
2. Semantiska förändringar
3. Få det att fungera idag

Denna artikel kommer att kort introducera var och en av dessa ämnen för att förbereda dig för de djupgående artiklarna framåt.

API

Innan vi dyker in i ovanstående ämnen vill jag ta en minut för att titta på en extremt viktig funktion som vi inte kommer att täcka i sin egen dedikerade artikel: de nya API: erna. HTML5 innehåller flera nya API: er som är integrerade med några av de nya HTML5-elementen (som vi kommer att titta på senare). Här är den fullständiga listan direkt från W3.org:

  • 2D-ritning API som kan användas med det nya dukelementet.
  • API för spelning av video och ljud som kan användas med de nya video- och ljudelementen.
  • Ett API som möjliggör offline webbapplikationer.
  • Ett API som tillåter att en webbapplikation registrerar sig för vissa protokoll eller medietyper.
  • Redigerings API i kombination med ett nytt globalt contenteditable attribut.
  • Dra och släpp API i kombination med ett dragbart attribut.
  • API som exponerar historiken och tillåter att sidor läggs till i det för att förhindra att knäppas tillbaka.
  • Korsdokumentmeddelanden.

    • Som du kan se är huvudformålet med dessa API: er att underlätta skapandet av webbapplikationer. Lägg märke till det tredje APIet möjliggör offlinewebapps. Det här är utmärkta nyheter för både användare och programmerare eftersom det möjliggör användningen av rika, internetdrivna applikationer i en offline-miljö. Du kan förvänta dig att många av dina favoritprogram följer Gmail när du introducerar offlineåtkomst.

    Nya element i HTML5

    HTML5 introducerar en hel del nya element. Artikel två i denna serie kommer att titta på några av dessa i detalj, men för nu är här den fullständiga listan med korta beskrivningar (källa: w3schools):


  •  Definierar externt innehåll

  •  Definierar något innehåll bortsett från artikeln som den placeras i
  • Definierar ljud, som musik eller andra ljudflöden
  • Definierar grafik, till exempel diagram eller andra bilder
  • Definierar en kommandoknapp, som en radiobutton, en kryssruta eller en knapp
  • Definierar en lista med valbara data. Datagrid visas som en trädlista
  • Definierar en lista med valbara data. Använd det här elementet tillsammans med inmatningselementet, för att göra en rullgardinslista för ingångens värde
  • Definierar en behållare för datamall. Detta element måste ha barnelement för att definiera en mall: element

  •  Definierar detaljer för ett element som användaren kan se och klickar för att dölja
  • Definierar en dialog, t.ex. en konversation
  • Definierar inbäddat innehåll, till exempel en plugin
  • Definierar en källa för händelser som skickas av en server

  •  Används för att gruppera vissa element

  •  Definierar sidfoten till en sektion eller ett dokument. Innehåller författarens namn, datumet dokumentet skrevs och / eller kontaktinformation

  •  Definierar rubriken för en sektion eller ett dokument
  • Definierar markerad text. Använd taggen om du vill markera delar av din text
  • Definierar en mätning. Används endast för mätningar med känt minimi- och maximivärde

  •  Definierar en sektion av navigationslänkar
  • Definierar en nestpunkt i ett datatemplat för barnelement. Används tillsammans med elementen och
  • Definierar olika typer av utmatning, till exempel utskrift skrivet av ett manus
  • Definierar pågående arbete. Använd framstegselementet för att visa framstegen av en tidskrävande funktion i JavaScript
  • Definierar reglerna för uppdatering av ett datamat. Används tillsammans med elementen och

  • Definierar avsnitt i ett dokument. Såsom kapitel, rubriker, sidfot eller andra delar av dokumentet
  • Definierar medieresurser för medieelement, till exempel och
  • Definierar en tid eller ett datum, eller båda
  • Definierar video, till exempel ett filmklipp eller andra videoströmmar

    • Även om vi inte har tid att gå över var och en i detalj, undersöker vi några av de viktiga som och.

    Semantiska förändringar

    Det här är den del som borde förändra hur du strukturerar dina webbplatser. Inkluderat i listan ovan är sex nya strukturella element som hjälper till att skapa konsekvens i grundramen för webbplatser över hela webben. Dessa sex element är:

    1.

    2.

    3.

    4.

    5.

    6.

    Tänk på dessa som ersättning för många av de DIV som du för närvarande använder för att strukturera din webbplats. Så istället för?

    ,? du kommer helt enkelt ha?

    .? Lägg märke till att jag inkluderade div-klassen? istället för? div id.? Detta beror på att dessa element är repeterbara genom en sida på samma sätt som klasserna är. Vi kommer att undersöka detta mer senare i veckan i artikel tre.

    Få HTML5 att fungera idag

    Bli inte för upphetsad av denna rubrik. Som en bra webbutvecklare vet, skiljer sig alla större webbläsare fortfarande (vissa är sämre än andra, du vet vem jag pratar om) på stöd för HTML4.01 och XHTML 1.0. Tänk nu vad det betyder för en förändring så stor och ny som HTML5. Även om mega-utvecklare som Google håller på med att acceptera HTML5, kommer det inte att stödjas över hela linjen under en tid. Men det betyder inte att du inte bör börja förbereda den stora strömställaren idag, och det betyder absolut inte att det inte finns smarta knep där ute för att du ska kunna börja spela med HTML5 direkt. I artikel fyra tar vi en titt på hur du kan börja din HTML5-resa snarare än senare.

    Slutsats

    I den här artikeln introducerades de nya elementen och API-erna som ingår i HTML5.Vi pratade om hur du borde vara upphetsad över de förändringar som HTML5 kommer att leda till morgondagens webbapplikationer. Vi fick också en smak av de semantiska förändringarna att komma och den nya strukturen våra webbsidor borde ta i framtiden. Slutligen lärde vi oss att även om HTML5 inte är helt redo för massorna, kan vi fortfarande få våra gubbe utvecklare fingrar på det och börja experimentera idag. Kolla tillbaka hit ofta i nästa vecka för en djupgående titt på vart och ett av dessa ämnen!