HTML5 är senaste och bästa Vad är HTML5, och hur förändras det hur jag bläddrar? [MakeUseOf Explains]Under de senaste åren har du kanske hört ordet HTML5 då och då. Oavsett om du vet något om webbutveckling eller inte, kan konceptet vara något sprudlande och förvirrande. Självklart,... Läs mer version av det mest använda markeringsspråket på webben. Det finns några stora förändringar från den senaste versionen av språket, och om du inte använder dem missar du verkligen cool funktionalitet.
Vi har inte utrymme för att täcka varje nytt element i den femte versionen av HTML, men dessa nio är några av de viktigaste. För mer information om de nya elementen och API: erna i HTML5, se till kolla in W3Schools.
En introduktion till semantiska element
Liksom mycket av internet har HTML5 skiftat till fokus på semantik. I stället för att taggar helt enkelt används för formatering, används de också för att berätta för webbläsare och sökmotorer Topp 7 semantiska sökmotorer som ett alternativ till Google Läs mer innebörden av vad de omger.
berättar helt enkelt för en webbläsare att den innehåller ett stycke. , som vi kommer att diskutera en kort stund, berättar en webbläsare att den innehåller sidans huvudinnehåll.
Den semantiska webben utvecklas fortfarande, och vi har bara börjat skrapa ytan på vad den kan göra. HTML5 hjälper till semantisk markering Vad semantisk markering är och hur det kommer att förändra Internet för alltid [Teknisk förklaring] Läs mer till en mycket större del av internet, och det kan bara vara bra för framtiden för semantisk bearbetning.
1.
De tagg definierar "oberoende, fristående innehåll." Det enklaste exemplet är naturligtvis en artikel. För den här artikeln öppnade vi taggen före introduktionen och stänger den efter avslutningen.
All text i ditt fristående avsnitt.
Men det finns andra sätt du kan använda det också. Till exempel innehåller många matlagningsbloggar personliga berättelser om hur ett recept har skapats eller varför det är viktigt för författaren. Det följs sedan av själva receptet. Du kan göra argumentet att vart och ett av dessa element kan stå ensamma.
I ett forum kan varje inlägg eller tråd betraktas som fristående, och var och en kan markeras med sitt eget märka. För det mesta kommer den att användas på huvudinnehållet på en sida. Men kom ihåg att du också kan använda det mer kreativt.
2.
Nära släkt med är . Detta definierar en "tematisk gruppering av innehåll, vanligtvis med en rubrik." Så kommer att vara inne … rätt?
Inte nödvändigtvis. W3 påpekar att det beror på strukturen på din webbplats. Du kan ha fristående innehåll i olika delar av din sida (tänk till exempel på startsidan på en nyhetssajt). Du kan då ha avsnitt i den artikeln.
Varför du behöver en DAC
Allt låter bättre.
Hur man ställer in en DAC
Här är vad du behöver göra.. .
Du kan till och med ha avsnitt inom avsnitt om det passar din sida. Kom ihåg att ett avsnitt helt enkelt är en "tematisk gruppering av innehåll", och du hittar många platser att använda det på.
3.
Detta element "bör användas som en behållare för introduktionsinnehåll." Kort sagt, det är den del av din sida som hjälper människor att förstå vad de håller på att läsa.
Men lur inte dig - du kan använda den här behållaren mer än en gång. Du kan till exempel använda den för att identifiera sidtitel och inledande stycke i ditt blogginlägg. Men du kan också använda den för att markera det inledande innehållet för varje avsnitt också.
Allt du behöver veta om DAC
Här är en användbar introduktion till DAC: er ...
Resten av din artikel går här.
Rubrikavsnitt innehåller vanligtvis minst en rubriktagg - H1, H2 och så vidare. De behöver inte, men i allmänhet, om du använder en rubriktagg, är det bra att du inkluderar rubrikinnehåll.
4.
W3 säger att sidfottaggar vanligtvis innehåller "författaren till dokumentet, upphovsrättsinformation, länkar till användarvillkor, kontaktinformation etc." Du kan tänka på det som "hushållning" grejer.
I dokumentationen anges också att du kan ha mer än en sidfot på din sida. Det är förmodligen en bra idé att hålla all denna information på en enda plats.
5.
Den här taggen innehåller navigeringslänkar för en given sida. Observera att endast navigationsavsnittet får den här taggen, inte alla länkar på din sida. Det är för navigeringsfält och liknande verktyg.
Det här är en riktigt enkel tagg - det är allt som finns till det. Använd det för att definiera navigationsavsnittet och använd det inte igen på din sida.
6.
Ett av de mest intressanta nya elementen i HTML5 är sidan. W3 ger det den lite hjälpsamma definitionen av ”något innehåll bortsett från innehållet det placeras i.”
Kort sagt, en sida är allt som är relaterat till (men separat från) den omgivande informationen. Det kan vara en sidofält som lägger till detaljer i ditt innehåll. När det används inom en uppsättning av taggar ger den ytterligare information som inte är nödvändig för att förstå huvudinnehållet.
Om vi till exempel hade inkluderat en sidofält i den här artikeln med information om HTML5: s historia, skulle det vara en sida.
Men
Huvudartikeln går här. Artikeln fortsätter här.
Eftersom det finns flera användningsområden för den här taggen kan det vara förvirrande. Om du tänker på att det är "sekundärt innehåll" och att det inte alltid behöver vara ett sidofält, har du en bättre uppfattning om hur du använder den.
7.
Många webbplatser har information som måste visas men inte framträdande. Det kanske är upphovsrättsinformationen för ett foto. Eller det finstilta på en tävling. Den här typen av information är exakt vad informationskoden är till för.
När du använder informationstaggen skapar du dold text som enkelt kan visas. Här är ett exempel:
Klicka här för att se information.
Här är mer detaljerad information som du inte behöver direkt.
Klicka bara på pilen för att få detaljer. Enkel. Att skapa det är lika enkelt. Här är koden som används för exemplet ovan:
Klicka här för att se information. Här är mer detaljerad information som du inte behöver direkt.
De tagg definierar meningen som ska visas, medan det andra innehållet är dolda. Observera att du kan använda andra taggar i detaljavsnittet: rubriker, avsnitt och så vidare.
Det finns andra coola saker du kan göra med HTML 8 coola HTML-effekter som vem som helst kan lägga till på sin webbplatsDu behöver inte veta CSS eller PHP för att bygga en snygg webbplats. Använd dessa coola HTML-trick för att generera fantastiska effekter. Läs mer även om du inte vet mycket CSS eller JSON.
8-9. och
Oroa dig inte, taggen du har använt i flera år försvinner inte. går runt bildtaggen och låter webbläsaren veta att det är en fristående bild, diagram, kodlista eller annan figur.
Om en siffra tas bort från sidan påverkar det inte innehållets flöde.
går in i figurtaggen och specificerar en bildtext för en bild. Det kan se ut så här:
Detta är vår logotyp!
Detta ger dig ett inbyggt sätt att lägga till en bildtext till dina bilder. Du behöver inte gå igenom ditt CMS längre.
Dra fördel av HTML5: s kraft
De nya elementen i HTML5 lägger till mycket kraft, särskilt för semantiska ändamål. Det finns ytterligare element för formatering, skalmätningar, framsteg i uppgiften och mer. Du kan se alla de nya elementen på W3Schools.
Men om du kan behärska dessa nio kommer du vara på god väg att använda HTML5 på ett bra sätt. Och om du är ny inom HTML, se till att kolla in dessa kodexempel 17 enkla HTML-kodsexempel som du kan lära dig om 10 minuterVill du skapa en grundläggande webbsida? Lär dig dessa HTML-exempel och prova dem i en textredigerare för att se hur de ser ut i din webbläsare. Läs mer !
Har du börjat använda HTML5? Vilka nya element tycker du är mest användbara? Dela dina tankar i kommentarerna nedan!
Dann är en innehållsstrategi och marknadskonsult som hjälper företag att skapa efterfrågan och leder. Han bloggar också om strategi och innehållsmarknadsföring på dannalbright.com.
