HTML5 är det senaste och det bästa Vad är HTML5, och hur förändras det jag bläddrar? [MakeUseOf Förklarar] Vad är HTML5, och hur ändrar det hur jag bläddrar? [MakeUseOf Explains] Under de senaste åren har du kanske hört termen HTML5 varje gång i taget. Oavsett om du vet någonting om webbutveckling eller inte, kan konceptet vara lite nebulous och förvirrande. Självklart, ... Läs mer version av det mest använda markup språ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 saknar du några riktigt coola funktioner.
Vi har inte plats 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 att kolla in W3Schools.
En introduktion till semantiska element
Som mycket av internet har HTML5 skiftats för att fokusera på semantik. I stället för taggar som bara 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 Top 7 Semantic Search Engines som ett alternativ till Google Läs mer meningen med vad de omger.
Till exempel,
berättar enkelt en webbläsare att den innehåller en paragraf. , som vi diskuterar i korthet berättar en webbläsare att den innehåller huvudinnehållet på sidan.
Den semantiska banan utvecklas fortfarande, och vi har bara börjat skrapa ytan på vad den kan göra. HTML5 hjälper till med att ge semantisk markup Vilken semantisk markering är och hur den kommer att förändra Internet för alltid [Teknologi förklaras] Vilken semantisk markering är och hur den kommer att förändra Internet för alltid [Teknologi förklaras] 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 taggen definierar “oberoende, självständigt innehåll.” Det enklaste exemplet är förstås en artikel. För den här artikeln skulle vi öppna taggen före introduktionen och stänga den efter slutsatsen.
All text i din fristående sektion.
Men det finns andra sätt du kan använda det också. Till exempel innehåller många matlagningsbloggar personliga historier om hur ett recept kom eller varför det är viktigt för författaren. Det följs sedan av receptet självt. Du kan göra argumentet att var och en av dessa element kan stå ensamma.
I ett forum kan varje post eller tråd anses vara fristående, och var och en kan markeras med sin egen märka. För det mesta kommer den att användas på huvudsidan på en sida. Men kom ihåg att du kan använda den mer kreativt också.
2.
Nästan relaterad till är . Detta definierar a “tematisk gruppering av innehåll, typiskt med en rubrik.” Så kommer att vara inuti … höger?
Inte nödvändigtvis. W3 påpekar att det beror på strukturen på din webbplats. Du kan ha självständigt innehåll i olika delar av din sida (tänk på t.ex. en nyhetssida, till exempel). Det kan hända att du har avsnitt i den artikeln.
Varför behöver du en DAC
Allt låter bättre.
Så här ställer du in en DAC
Här är vad du behöver göra ...
Du kan även ha sektioner inom sektioner om den passar din sida. Kom ihåg att en sektion bara är en “tematisk gruppering av innehåll,” och du hittar många ställen att använda den.
3.
Detta element “bör användas som 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 ska läsa.
Men låt dig inte lura - 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 avsnitt 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 DACs
Här är en användbar introduktion till DACs ...
Resten av din artikel går här.
Rubrikrubriker innehåller vanligtvis minst ett rubrikmärke - H1, H2, och så vidare. De behöver inte, men i allmänhet, om du använder en rubrik tag, det är en bra insats att du inkluderar innehållet i rubriken.
4.
W3 säger att sidfotar innehåller vanligtvis “författare till dokumentet, upphovsrättsinformation, länkar till användarvillkor, kontaktuppgifter mm.” Du kan tänka på det som “hushållning” grejer.
Dokumentationen säger också att du kan ha mer än en sidfot på din sida. Det är dock en bra idé att hålla all denna information på en enda plats.
5.
Den här taggen innehåller navigationslänkarna för en viss sida. Observera att endast navigationsdelen får den här taggen, inte alla länkar på din sida. Det är för navigeringsstänger och liknande verktyg.
Det här är en väldigt enkel tagg - det är allt som finns där. Använd den för att definiera navigationsdelen och använd den inte igen på din sida.
6.
Ett av de mest intressanta nya elementen i HTML5 är åt sidan. W3 ger den den lite ohjälpliga definitionen av “lite innehåll bortsett från innehållet det placeras i.”
Kort sagt, en sida är något som är relaterat till (men skiljer sig från) den omgivande informationen. Det kan vara ett sidofält som lägger till detaljer i ditt innehåll. När den används inom en uppsättning av taggar, det ger ytterligare information som inte är nödvändig för förståelsen av huvudinnehållet.
Om vi till exempel hade inkluderat ett sidofält i den här artikeln som ger information om HTML5s 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 en sidovy, får du en bättre uppfattning om hur du använder den.
7.
Många webbplatser har information som behöver visas, men inte framträdande. Kanske är det upphovsrättsinformationen för ett foto. Eller det fina trycket på en tävling. Denna typ av information är exakt vad detaljeratiketten är för.
När du använder detaljeratiketten 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å detaljerna. 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 taggen definierar meningen som ska visas medan det andra innehållet är gömt. Observera att du kan använda andra taggar i avsnittet detaljer: rubriker, sektioner och så vidare.
Det finns andra häftiga saker du kan göra med HTML 7 Cool HTML-effekter som någon kan lägga till på deras hemsida 7 Coola HTML-effekter som någon kan lägga till på deras hemsida Förtvivla inte! Du behöver inte veta CSS eller PHP för att bygga en fancy webbplats. Några bra gamla HTML och veta hur man kopierar och klistrar kommer att göra. Läs även, även om du inte vet mycket CSS eller JSON.
8-9. och
Oroa dig inte, det tagg som du har använt i åren går inte bort. 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 den inte flödet av innehållet.
går inom figuren och anger 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 på dina bilder. Inget behov av att gå igenom ditt CMS längre.
Dra fördel av HTML5: s kraft
De nya elementen i HTML5 lägger mycket kraft, speciellt för semantiska ändamål. Det finns ytterligare element för formatering, skalärmätningar, uppgiftsförlopp och mer. Du kan se alla de nya elementen på W3Schools.
Men om du kan behärska dessa nio kommer du att vara bra på väg för att du ska kunna utnyttja HTML5 bra. Och om du är ny på HTML, var noga med att kolla in dessa kodexempel 17 Enkla HTML-kodexempel Du kan lära dig om 10 minuter 17 Enkla HTML-kodexempel Du kan lära dig om 10 minuter Om du känner till följande 17 HTML-taggar (och extra få som går med dem), kommer du att kunna skapa en grundläggande webbsida från början eller tweak koden som skapats av en app som ... Läs mer !
Har du börjat använda HTML5? Vilka nya element tycker du är mest användbar? Dela dina tankar i kommentarerna nedan!
Utforska mer om: HTML5, webbdesign, webbutveckling.
