Semantiske HTML5-elementer forklaret

Semantiske HTML-elementer er dem, der tydeligt beskriver deres betydning på en menneskelig og maskinlæsbar måde.

Elementer som , og betragtes alle som semantisk fordi de præcist beskriver formålet med elementet og typen af indhold, der er inde i dem.

Hvad er semantiske elementer?

HTML blev oprindeligt oprettet som et markup-sprog til beskrivelse af dokumenter på det tidlige internet. Da Internettet voksede og blev vedtaget af flere mennesker, ændrede dets behov sig.

Hvor internettet oprindeligt var beregnet til deling af videnskabelige dokumenter, ville folk nu også dele andre ting. Meget hurtigt begyndte folk at ønske at få internettet til at se pænere ud.

Fordi internettet oprindeligt ikke var bygget til at blive designet, brugte programmører forskellige hacks for at få ting lagt ud på forskellige måder. I stedet for at bruge

for at beskrive information ved hjælp af en tabel, ville programmører bruge dem til at placere andre elementer på en side.

Efterhånden som brugen af ​​visuelt designede layouts skred frem, begyndte programmører at bruge et generisk "ikke-semantisk" tag som . De gav ofte disse elementer en classeller idattribut for at beskrive deres formål. For eksempel blev stedet for dette ofte skrevet som .

Da HTML5 stadig er relativt ny, er denne brug af ikke-semantiske elementer stadig meget almindelig på websteder i dag.

Liste over nye semantiske elementer

De semantiske elementer tilføjet i HTML5 er:

Elementer som , , , , , og handle mere eller mindre som elementer. De grupperer andre elementer sammen i sidesektioner. Men hvor et tag kan indeholde enhver form for information, er det let at identificere, hvilken slags information der vil gå i en semantisk region.

Et eksempel på semantisk elementlayout fra w3schools

Semantiske elementer, der lægger en side af w3schools

Hvorfor bruge semantiske elementer?

For at se fordelene ved semantiske elementer er her to stykker HTML-kode. Denne første kodeblok bruger semantiske elementer:

Mens denne anden kodeblok bruger ikke-semantiske elementer:

For det første er det meget lettere at læse . Dette er sandsynligvis den første ting, du vil bemærke, når du ser på den første blok med kode ved hjælp af semantiske elementer. Dette er et lille eksempel, men som programmør kan du læse gennem hundreder eller tusinder af linjer med kode. Jo lettere det er at læse og forstå den kode, jo lettere gør det dit job.

Det har større tilgængelighed . Du er ikke den eneste, der finder semantiske elementer lettere at forstå. Søgemaskiner og hjælpeteknologier (som skærmlæsere til brugere med synshandicap) er også i stand til bedre at forstå konteksten og indholdet på dit websted, hvilket betyder en bedre oplevelse for dine brugere.

Samlet set fører semantiske elementer også til en mere ensartet kode . Når du opretter en header ved hjælp af ikke-semantiske elementer, kan forskellige programmører skriver dette som , , , eller blot . Der er så mange måder, at du kan oprette et headerelement, og de afhænger alle af programmørens personlige præference. Ved at skabe et standard semantisk element gør det det lettere for alle.

Siden oktober 2014 blev HTML4 opgraderet til HTML5 sammen med nogle nye "semantiske" elementer. Den dag i dag kan nogle af os stadig være forvirrede over, hvorfor så mange forskellige elementer, der ikke ser ud til at vise nogen større ændringer.

og

”Hvad er forskellen?”, Spørger du måske. Begge disse elementer bruges til at dele et indhold, og ja, de kan bestemt bruges om hverandre. Det er et spørgsmål om i hvilken situation. HTML4 tilbød kun en type containerelement, hvilket er . Mens dette stadig bruges i HTML5, forsynede HTML5 os med og på en måde at erstatte .

Den og elementer er begrebsmæssigt ligner og udskifteligt. For at afgøre, hvilken af ​​disse du skal vælge, skal du være opmærksom på følgende:

  1. En artikel er beregnet til at være uafhængig distribuerbar eller genanvendelig.
  2. Et afsnit er en tematisk gruppering af indhold.

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

og

Det element er generelt fundet i toppen af et dokument, et afsnit eller en artikel, og som regel indeholder de vigtigste overskrift og nogle navigations- og søgeværktøjer.

Company A

  • Home
  • About
  • Contact us

Det element skal bruges, hvor du ønsker en hovedoverskrift med en eller flere positioner.

Heading 1

Subheading 1

Subheading 2

HUSK, at elementet kan indeholde ethvert indhold, men elementet kun kan indeholde andre overskrifter, dvs.

til

og inklusive .

Det element er beregnet til indhold, der ikke er en del af strømmen af den tekst, som det vises dog stadig relateret på en eller anden måde. Dette som et sidebjælke til dit hovedindhold.

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Før HTML5 blev vores menuer oprettet med

    's og
  • 's. Nu, sammen med disse, kan vi adskille vores menupunkter med en , til navigation mellem dine sider. Du kan have et vilkårligt antal elementer på en side, for eksempel er det almindeligt at have global navigation over toppen (i ) og lokal navigation i et sidebjælke (i et element).

    
           
    • Home
    • About
    • Contact us

    Hvis der er en, skal der være en . A findes generelt i bunden af ​​et dokument, et afsnit eller en artikel. Ligesom indholdet generelt er metainformation, såsom forfatteroplysninger, juridiske oplysninger og / eller links til relaterede oplysninger. Det er også gyldigt at medtage elementer i en sidefod.

    ©Company A

    Det element vises ofte inden for et eller element, som normalt ville indeholde oplysninger om ophavsret eller juridiske ansvarsfraskrivelser, og andre sådanne småt. Dette er dog ikke beregnet til at gøre teksten mindre. Det er bare at beskrive dets indhold og ikke at ordinere præsentation.

    ©Company A Date

    Det element giver en entydig ISO 8601 dato, der skal fastgøres til et menneske-læsbart version af denne dato.

    Tuesday, 31 October 2017

    Hvorfor gider med ? Mens mennesker kan læse tid, der kan skelne mellem forskellige sammenhænge på den normale måde, kan computere læse ISO 8601-datoen og se datoen, klokkeslættet og tidszonen.

    og

    er til indpakning af dit billedindhold omkring det og er at billedtekst dit billede.

    Shadow of Mordor Cover art for Middle-earth: Shadow of Mordor 

    Lær mere om de nye HTML5-elementer:

    • w3schools giver enkle og klare beskrivelser af mange af nyhedselementerne, og hvordan / hvor de skal bruges.
    • MDN giver også en god reference til alle HTML-elementer og går dybere ind i hver.