HTML5 er seneste og største Hvad er HTML5, og hvordan ændrer det den måde, jeg gennemser? [MakeUseOf Explains]I løbet af de sidste par år har du muligvis hørt udtrykket HTML5 en gang imellem. Uanset om du ved noget om webudvikling eller ej, kan konceptet være noget sprudlende og forvirrende. Naturligvis,... Læs mere version af det mest anvendte markeringssprog på nettet. Der er nogle store ændringer fra den sidste version af sproget, og hvis du ikke bruger dem, går du glip af noget virkelig cool funktionalitet.
Vi har ikke plads til at dække hvert nyt element i den femte version af HTML, men disse ni er nogle af de vigtigste. For mere information om de nye elementer og API'er i HTML5, skal du huske at tjek W3Schools.
En introduktion til semantiske elementer
Ligesom meget af internettet er HTML5 skiftet til at fokusere på semantik. I stedet for at tags blot bruges til formatering, bruges de også til at fortælle browsere og søgemaskiner Top 7 semantiske søgemaskiner som et alternativ til Google Læs mere betydningen af hvad de omgiver.
fortæller blot en browser, at den indeholder et afsnit. , som vi diskuterer et øjeblik, fortæller en browser, at den indeholder sidens hovedindhold.
Den semantiske web er stadig under udvikling, og vi er kun begyndt at ridse overfladen på, hvad den kan gøre. HTML5 hjælper med at bringe semantisk markup Hvad semantisk markup er & hvordan det vil ændre Internettet for evigt [Teknologi forklaret] Læs mere til en meget større del af internettet, og det kan kun være godt for fremtiden for semantisk behandling.
1.
Det tag definerer "uafhængigt, selvstændigt indhold." Det nemmeste eksempel er naturligvis en artikel. For denne bestemte artikel åbner vi tagget før introduktionen og lukker det efter afslutningen.
Alt teksten i dit selvforsynende afsnit.
Men der er andre måder, du også kan bruge det på. For eksempel inkluderer mange madlavningsblogger personlige historier om, hvordan en opskrift blev til, eller hvorfor det er vigtigt for forfatteren. Den efterfølges derefter af selve opskriften. Du kan argumentere for, at hvert af disse elementer kunne stå alene.
I et forum kan hvert indlæg eller tråd betragtes som selvstændig, og hver kunne markeres med sit eget tag. For det meste bruges det på hovedindholdet på en side. Men husk, at du også kan bruge det mere kreativt.
2.
Tæt relateret til er . Dette definerer en "tematisk gruppering af indhold, typisk med en overskrift." Så vil være indeni … højre?
Ikke nødvendigvis. W3 påpeger, at det afhænger af strukturen på dit websted. Du har muligvis selvstændigt indhold i forskellige sektioner på din side (tænk f.eks. På forsiden af et nyhedssite). Derefter har du måske sektioner inden for den artikel.
Hvorfor du har brug for en DAC
Alt lyder bedre.
Sådan konfigureres en DAC
Her er hvad du skal gøre.. .
Du kan endda have sektioner inden for sektioner, hvis det passer til din side. Husk, at et afsnit simpelthen er en "tematisk gruppering af indhold", og du finder masser af steder at bruge det.
3.
Dette element "skal bruges som en container til introduktionsindhold." Kort sagt, det er den del af din side, der hjælper folk med at forstå, hvad de er ved at læse.
Men lad dig ikke narre - du kan bruge denne beholder mere end én gang. For eksempel kan du bruge det til at identificere sidetitlen og det indledende afsnit i dit blogindlæg. Men du kan også bruge det til at markere det indledende indhold for hver sektion.
Alt hvad du behøver at vide om DAC'er
Her er en nyttig introduktion til DAC'er ...
Resten af din artikel går her.
Overskriftssektioner indeholder normalt mindst et overskrifttag - H1, H2 osv. Det behøver de ikke, men generelt, hvis du bruger et overskrifttag, er der en god chance, at du medtager overskriftsindhold.
4.
W3 siger, at footer tags normalt indeholder "forfatteren af dokumentet, ophavsret information, links til betingelser for brug, kontaktinformation osv." Du kan tænke på det som "husholdning" ting.
Dokumentationen angiver også, at du kan have mere end en sidefodsdel på din side. Det er dog sandsynligvis en god ide at opbevare alle disse oplysninger på et enkelt sted.
5.
Dette tag indeholder navigationslinkene til en given side. Bemærk, at kun navigationsafsnittet får dette tag, ikke alle linkene på din side. Det er til navigationsbjælker og lignende værktøjer.
Dette er et virkelig simpelt tag - det er alt, hvad der er der til. Brug det til at definere navigationsafsnittet, og brug det ikke igen på din side.
6.
En af de mest interessante nye elementer i HTML5 er til side. W3 giver det den lidt uhjælpsomme definition af "noget indhold bortset fra det indhold, det er placeret i."
Kort sagt, en side til side er alt, hvad der er relateret til (men adskilt fra) de omkringliggende oplysninger. Det kan være en sidepanel, der tilføjer detaljer til dit indhold. Når det bruges i et sæt af tags giver den yderligere oplysninger, der ikke er nødvendige for at forstå hovedindholdet.
Hvis vi for eksempel havde inkluderet en sidefelt i denne artikel, der indeholder oplysninger om HTML5-historikken, ville det være en side.
Men
Hovedartiklen går her. Artiklen fortsætter her.
Fordi der er flere anvendelser til dette tag, kan det være forvirrende. Hvis du husker, at det er "sekundært indhold", og at det ikke altid behøver at være en sidebjælke, har du en bedre idé om, hvordan du bruger det.
7.
Mange websteder har oplysninger, der skal vises, men ikke fremtrædende. Måske er det copyright-oplysningerne til et foto. Eller det fine udskrivning på en konkurrence. Denne type information er nøjagtigt, hvad detaljen mærket er til.
Når du bruger detaljemærket, opretter du skjult tekst, der let kan vises. Her er et eksempel:
Klik her for at se information.
Her er mere detaljerede oplysninger, som du ikke har brug for med det samme.
Klik bare på pilen for at få detaljerne. Enkel. At oprette det er lige så let. Her er koden, der bruges til ovenstående eksempel:
Klik her for at se information. Her er mere detaljerede oplysninger, som du ikke har brug for med det samme.
Det tag definerer den sætning, der skal vises, mens det andet indhold er skjult. Bemærk, at du kan bruge andre tags i detaljsektionen: overskrifter, sektioner osv.
Der er andre seje ting, du kan gøre med HTML 8 seje HTML-effekter, som enhver kan tilføje til deres webstedDu behøver ikke at kende CSS eller PHP for at opbygge et fancy sted. Brug disse seje HTML-tricks til at generere fantastiske effekter. Læs mere også selvom du ikke kender meget CSS eller JSON.
8-9. og
Bare rolig, den det tag, du har brugt i årevis, forsvinder ikke. går rundt om billedmærket og lader browseren vide, at det er et selvstændigt billede, diagram, kodeliste eller anden figur.
Hvis et tal fjernes fra siden, påvirker det ikke indholdets strømning.
går inden i figurmærket og specificerer en billedtekst til et billede. Det ser måske sådan ud:
Dette er vores logo!
Dette giver dig en indbygget måde at tilføje en billedtekst til dine billeder. Ingen grund til at gennemgå dit CMS længere.
Udnyt HTML5's magt
De nye elementer i HTML5 tilføjer en masse kraft, især til semantiske formål. Der er yderligere elementer til formatering, skalære målinger, opgaveforløb og mere. Du kan se alle de nye elementer hos W3Schools.
Men hvis du kan mestre disse ni, er du godt på vej til at udnytte HTML5 godt. Og hvis du er ny på HTML, skal du sørge for at tjekke ud disse kodeeksempler 17 enkle HTML-kodeeksempler, du kan lære på 10 minutterVil du oprette en grundlæggende webside? Lær disse HTML-eksempler, og prøv dem i en teksteditor for at se, hvordan de ser ud i din browser. Læs mere !
Er du begyndt at bruge HTML5? Hvilke nye elementer finder du de mest nyttige? Del dine tanker i kommentarerne herunder!
Dann er en indholdsstrategi og marketingkonsulent, der hjælper virksomheder med at skabe efterspørgsel og kundeemner. Han blogger også om strategi og indholdsmarkedsføring på dannalbright.com.
