HTML5 er det nyeste og bedste Hvad er HTML5, og hvordan ændrer det den måde, jeg gennemsøger? [MakeUseOf Explains] 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. Det er klart, ... version af det mest udbredte 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 tjekke W3Schools.

En introduktion til semantiske elementer

Ligesom meget af internettet er HTML5 skiftet til at fokusere på semantik. I stedet for at tags der simpelthen bruges til formatering, bruges de også til at fortælle browsere og søgemaskiner Top 7 semantiske søgemaskiner som et alternativ til Google Top 7 semantiske søgemaskiner som et alternativ til Google betydningen af, hvad de omgiver.

For eksempel,

fortæller blot en browser, at den indeholder et afsnit. , som vi kort diskuterer, fortæller en browser, at den indeholder sidens hovedindhold.

Den semantiske web udvikler sig stadig, 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] Hvad semantisk markup er & hvordan det vil ændre Internettet for evigt [Teknologi forklaret] til en meget større del af internettet, og det kan kun være godt for fremtiden for semantisk behandling.

1.

Mærket 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.

 Al 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. Derefter efterfølges af selve opskriften. Du kan argumentere med, 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 knyttet til er. Dette definerer a “tematisk gruppering af indhold, typisk med en overskrift.” Så vil være inde ... ret?

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 nyhedswebsted). Du har muligvis 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 blot er et “tematisk gruppering af indhold,” og du finder masser af steder at bruge det.

3.

Dette element “skal bruges som en beholder 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 et godt bud, at du inkluderer overskriftsindhold.

4.

W3 siger, at sidefodskoder normalt indeholder “forfatter af dokumentet, ophavsret, links til brugsbetingelser, kontaktinformation osv.” Du kan tænke på det som “husholdning” ting og sager.

 Copyright: MakeUseOf, 2017. Kontakt os 

Dokumentationen angiver også, at du kan have mere end et sidefodsafsnit 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.

 Hjem Om 

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 afsides side er alt, hvad der er relateret til (men adskilt fra) de omkringliggende oplysninger. Det kan være en sidepanel, der tilføjer detalje til dit indhold. Når det bruges i et sæt tags, giver det yderligere oplysninger, som ikke er nødvendige for at forstå hovedindholdet.

Hvis vi f.eks. Havde inkluderet en sidefelt i denne artikel, der indeholder oplysninger om historien til HTML5, ville det være en side.

Men tagget kan også bruges uden for artiklens indhold. I dette tilfælde bruges det normalt til webstedsrelateret information. Vi kunne f.eks. Inkludere en sidepanel som denne:

 Hovedartiklen går her. MakeUseOf fokuserer på at bygge bro over forbindelsen mellem brugere, computere, enheder og internettet gennem uddannelse. Artiklen fortsætter her.

Fordi der er flere anvendelser til dette tag, kan det være forvirrende. Hvis du husker, at det er det “sekundært indhold” og at det ikke altid behøver at være en sidefelt, har du en bedre idé om, hvordan du bruger den.

7.

Mange websteder har oplysninger, der skal vises, men ikke fremtrædende. Det er måske copyrightoplysninger 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:

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. 

Mærket 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 7 Cool HTML-effekter, som enhver kan tilføje til deres websted. 7 Cool HTML-effekter, som enhver kan tilføje til deres websted, fortvivl ikke! Du behøver ikke at kende CSS eller PHP for at opbygge et fancy sted. Nogle gode gamle HTML og at vide, hvordan man kopierer og indsætter, vil gøre det. også selvom du ikke kender meget CSS eller JSON.

8-9. og

Bare rolig, tag, som 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 en figur 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 på 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 huske at tjekke disse kodeeksempler. 17 enkle HTML-kodeeksempler, du kan lære på 10 minutter. 17 Simple HTML-kodeeksempler, du kan lære på 10 minutter. Vil 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. !

Er du begyndt at bruge HTML5? Hvilke nye elementer finder du de mest nyttige? Del dine tanker i kommentarerne herunder!