Spesifikasjoner for html5 på russisk. HTML5-kodestandarder. Blanke linjer og innrykk

Vil du raskt finne en beskrivelse av et HTML5-element eller -attributt brukt i en nettside eller nettapplikasjon? Her er en klassisk oppslagsbok som webdesignere og nettutviklere har prøvd å ha for hånden i over 15 år.
Den femte utgaven av boken inneholder en fullstendig beskrivelse av HTML5-elementer og -attributter i samsvar med HTML5 Candidate Recommendation, HTML5.1 Working Draft og WHATWG-standardene. Funksjoner i katalogen:
– en alfabetisk ordnet liste over elementer og attributter fra HTML5, HTML5.1 og WHATWG-standarden;
– eksempler på markering, innholdskategorier, innholdsmodeller og start/slutt-tag-krav for hvert element;
– en beskrivelse av forskjellene mellom HTML5- og HTML4.01-spesifikasjonene;
– tabeller med spesialtegn;
– oversikt over API-biblioteker brukt i HTML5.

Enten du er en erfaren nettstedsutvikler eller raskt ønsker å bygge et nettsted etter de nyeste standardene, vil du finne denne nyttige boken uunnværlig.

Likte du artikkelen eller boken? Del med vennene dine:

Alle bøker som presenteres på nettstedet er kun til informasjonsformål. Enhver bruk av dem av deg er kun tillatt for informasjonsformål. Hvis du planlegger å bruke dem i fremtiden, må du kjøpe dem fra rettighetshaverne. Nettstedets administrasjon er ikke ansvarlig for din bruk av dem.

Etter å ha lest tittelen på publikasjonen: "HTML5 jukseark på russisk" - alle har allerede gjettet om talen, men først et par avsnitt om HTML5 generelt.

Arbeidet med å lage HTML5 startet i 2004. og fortsette til i dag. HTML5 er planlagt som den mest universelle og funksjonelle versjonen av HTML (HyperText Markup Language), fordi på en eller annen måte er industrititaner som Apple, Mozilla, Opera, Microsoft og Google involvert i etableringen av HTML5. La meg merke det nøyaktig Google Chrome, på dette øyeblikket, støtter de fleste HTML5-elementer

Til tross for at det kan bli gjort endringer i HTML5, fordi arbeidet med HTML 5-spesifikasjonen fortsatt pågår og fortsatt er i prosess, skjer teknologiutviklingen så raskt at HTML5 snart vil bli tatt i bruk og nettsider må opprettes ved hjelp av de brede funksjonene av HTML5!

HTML5 jukseark på russisk vil hjelpe til med å lære

Kodere og layoutdesignere må lære innovasjonene, taggene og standardene til HTML5 i dag, for til tross for det pågående arbeidet med HTML5, er noen av funksjonene allerede brukt ganske vellykket når du lager nettsteder. Naturligvis må du begynne å lære HTML5 med koder, fordi nye koder har dukket opp i HTML5, og noen gamle vil ikke bli støttet. Også mange tagger fra HTML4 kom til HTML5. Og hva kan være bedre og mer praktisk å lære noe enn et jukseark? Møte:

det første HTML5-juksearket på russisk i RuNet

Det første HTML5-juksearket på russisk på RuNet inkluderer nye HTML5-elementer som tidligere ble mye brukt, men som ble skrevet i navnene på stilene. For eksempel bunntekst, topptekst, seksjon, artikkel og andre. I tillegg inneholder HTML5-juksearket på russisk alle kodene gammel versjon HTML4, som flyttet til HTML5. HTML5-juksearket på russisk inneholder også tagger som ikke støttes av HTML5.

HTML5 jukseark på russisk, laget i A4-format

Det første HTML5-juksearket på russisk i RuNet er laget i A4-format, så det vil være praktisk for deg å skrive det ut og ha det for hånden. Jeg legger merke til at HTML5-juksearket på russisk beskriver alle taggene på én rad, og formidler formålet med taggen så mye som mulig. HTML5-juksearket vårt på russisk vil kontinuerlig forbedres og oppdateres etter hvert som tagger fjernes eller legges til HTML5. Du kan laste ned "HTML5-juksearket på russisk" fra lenken nedenfor. I arkivet finner du 1 pdf Høy kvalitet og to jpg-fil i forskjellige utvidelser.

Last ned "HTML5 Cheat Sheet in Russian" (Antall nedlastinger: 7996)

Arkivet inneholder to jpg-filer i utvidelsene 1024×1448 og 2480×3508

oppdatert 29.10.2014

Mer enn to år har gått siden innlegget ble skrevet og selve opprettelsen av juksearket på HTML 5. I løpet av denne tiden ble juksearket lastet ned 3600 ganger), jeg er veldig fornøyd, jeg håper det var nyttig for de som studerte layout i HTML 5. Jeg lærte mye og lærte fra ulike fora og nettsider, og ved å lage et jukseark ønsket jeg å vise min takknemlighet, å betale tilbake gjelden min). Hvorfor skriver jeg en oppdatering i dette innlegget i dag, for i dag er endelig utviklingen av HTML5 ferdig!

HTML5-utviklingen er offisielt fullført

HTML5 er offisielt "funksjonelt komplett". I henhold til etablerte globale standarder av Worldwide Web Consortium (W3C). Det gjenstår fortsatt noen tester, og det har ennå ikke blitt en offisiell nettstandard, men foreløpig er det trygt å si at det ikke kommer nye funksjoner sammenlignet med den nåværende versjonen.

Dette betyr at nettdesignere og app-produsenter nå har et "stabilt mål" for en jevn overgang til ny standard innen 2015. HTML5-markeringsspråk lar utviklere legge til funksjonalitet til sider som tidligere krevde frittstående applikasjoner eller tillegg programvare, for eksempel Java, Adobe Flash eller Microsoft (MSFT, Fortune 500) Silverlight. Han støtter strømme video og geolokaliseringstjenester, offline-verktøy og berøringskontroller, blant annet bjeller og fløyter.

Det tok mer enn 10 år å utvikle en ny standard. administrerende direktør W3C Jeff Jaffe sa i en forberedt uttalelse for noen dager siden at fra og med i dag vet utviklere at de kan stole på HTML5 i årene som kommer. «I tillegg vil utviklere vite hvilke ferdigheter som skal utvikles for å nå smarttelefoner, biler, TV-er, e-bøker, digitale skilt og enheter er ennå ikke kjent," la han til.

Siste Microsoft-versjoner Internet Explorer, Google Chrome, Mozilla Firefox og Apple Safari er allerede kompatible med de fleste HTML5-elementer. W3C jobber allerede med HTML 5.1, hvor de første delene nettopp er sendt inn som et utkast.

Konvensjoner HTML-kode

For mange webutviklere er HTML-kodespesifikasjonene dårlig forstått.

I 2000-2010 konverterte mange webutviklere fra HTML til XHTML.

Utviklere som bruker XHTML utvikler gradvis gode HTML-skrivespesifikasjoner.

Og i HTML5 må vi lage relativt gode kodestandarder, flere retningslinjer er gitt under spesifikasjonen.

Bruk riktig dokumenttype

Dokumenttypeerklæring på første linje HTML-dokument:

DOCTYPE HTML>

Hvis du vil bruke andre etiketter som små bokstaver, kan du bruke følgende kode:

DOCTYPE HTML>

Elementnavn med små bokstaver

HTML5-elementnavn kan brukes med store eller små bokstaver.

Etui med blandet stil er veldig dårlig.
Små bokstaver er enkle å skrive.

Dette er et avsnitt.

Veldig dårlig:

Dette er et avsnitt.

Slå av alle HTML-elementer

I HTML5 vil du ikke lukke alle elementer (som elementet ), men vi anbefaler at hvert element legger til en avsluttende tag.

Dette er et avsnitt.

Lukk tomme elementer HTML

I HTML5 trenger ikke det tomme HTML-elementet å slås av:

Vi kan skrive:

Du kan også skrive:

XML, XHTML og skråstrek (/) kreves.

Hvis du planlegger å bruke XML-programvaresiden din, er denne stilen veldig bra.

Navn på attributt med små bokstaver

HTML5 lar deg bruke egenskapsnavnet i både store og små bokstaver.

Use case er en veldig dårlig vane.
Utviklere bruker vanligvis små bokstaver (ligner på XHTML).
Stilen med små bokstaver ser mer forfriskende ut.
Små bokstaver er enkle å skrive.

Eiendomsverdi

HTML5-attributtverdier kan ikke siteres.

Hvis egenskapsverdien inneholder mellomrom, må du bruke anførselstegn.
Blandet stil anbefales ikke, enkeltstil anbefales.
Eiendomsverdier ved hjelp av sitater er enkle å lese.

Følgende eksempelattributtverdi inneholder mellomrom, ikke bruk anførselstegn, det kan hende den ikke fungerer:

Nedenfor er brukt doble anførselstegn, dette er riktig:

egenskaper

Image Alt-attributter brukes ofte. Hvis bildet ikke kan vises, kan det erstatte bildevisningen.

= "HTML5" style = "bredde: 128px; høyde: 128px">

Bildestørrelsen bestemmes, kan reserveres ved lasting av den angitte verdien, reduser flimring.

= stil "HTML5" = "bredde: 128px; høyde: 128px">

Mellomrom og likhetstegn

Du kan bruke mellomrom før og etter likhetstegnet.

Unngå lange linjer med kode

Det er vanskelig å bruke HTML-redigeringsprogrammet, venstre og høyre rullekode.

Hver kodelinje er så mye som mulig mindre enn 80 tegn.

Blanke linjer og innrykk

Ikke legg til en tom linje uten grunn.

For hver funksjonell logikkblokk legger du til en tom linje, noe som gjør den mer lesbar.

Ikke bruk unødvendige tomme innrykkede linjer mellom kortkoder.

Ekstra tomme linjer og innrykk:

Denne opplæringen

HTML

Denne opplæringen lærer ikke bare teknologi, men også søvn.
Denne læreboken lærer ikke bare teknologi, men også i en drøm,
Denne opplæringen lærer ikke bare teknologi, men også søvn.

Denne opplæringen

I denne opplæringen lærer du ikke bare teknologi, men også søvn.
Denne opplæringen lærer ikke bare teknologi, men også søvn.
Denne opplæringen lærer ikke bare teknologi, men også søvn.
Denne opplæringen lærer ikke bare teknologi, men også søvn.

Eksempelskjema:

Navn
Beskrivelse

EN
Beskrivelse A

B
Beskrivelse B

Eksempelliste:

London

Paris

Tokyo

La oss utelate og?

I HTML5-standarden kan taggen utelates.

Følgende dokumenter er gyldige HTML5:

Eksempel:

DOCTYPE HTML>

Side tittel

Dette er tittelen

Dette er et avsnitt.

Prøv det "

element er rotelementet til dokumentet, språket som brukes til å beskrive siden:

DOCTYPE HTML>

Språkerklæring for å gjøre det lettere å lese på skjermer og søkemotorer.

La oss utelate enten DOM- eller XML-programvarekrasj.

La oss utelate feilen som oppstår i eldre nettlesere (IE9).

Skal vi utelate det?

I HTML5-standarden kan taggen utelates.

Nettleseren bruker innholdet som standard før elementet legges til standarden.

eksempler

DOCTYPE HTML>

Side tittel

Dette er tittelen

Dette er et avsnitt.

Prøv » Metadata

HTML5 krever et element hvis tittel tittel beskriver temaet på siden:

I denne opplæringen

Tittel og språk som lar søkemotoren raskt forstå emnet på siden din:

DOCTYPE HTML>

I denne opplæringen

Webdesigner - HTML5-spesifikasjon (HTML 5)

Tagger i HTML5 er XML-HTML-tagger som beskriver strukturen til en nettside, utformet slik at et dataprogram (søkerobot osv.) kan skille hovedinnholdet på siden fra resten av siden (formulerings- og navigasjonselementer) : topp, bunn, meny, sideelementer, gjentatte (dynamiske) blokker, etc. Det er også en inndeling på nivå med hovedinnholdet (sidetekst). Selve HTML5-språket er et tillegg til HTML, XML, CSS, etc.

Sidetittel Øverst på nettsiden, "header" Hovedmeny på nettsiden Hovedtekst, artikkel, sidemateriale Sidefelt (sidefelt) Nederst på siden, bunntekst

Nettstedets struktur

- ramme inn hovedinnholdet på siden (artikkel),
- ramme inn sideoverskriften,
- ramme inn bunnteksten på siden,
- ramme inn det viktigste sidemenyen,
- ramme inn sidefeltet på siden (sidefeltet),
- ramme gjentatte blokker på siden (for eksempel kommentarer).

HTML5-nettsidemalkodeelementer.

- tilordne kodingen windows-1251.

- hvis siden åpnes i IE, skal nettleseren alltid bruke den nyeste standardvisningsmodusen.

- vise nettstedet på mobile enheter.

header - overskriften på sidesiden, den inneholder vanligvis nettstedets logo, overskrift, telefonnummer, glidebryter osv.

nav - hovedmenyen til sidesiden.

artikkel - hovedinnhold på siden: artikkel, blogginnlegg, forumemne, etc. Kan inneholde tekst, bilder, videoer, tabeller osv.

til side - sidefelt (sidefelt) av nettstedet, inneholder vanligvis ulike elementer, slik som: kategorier, tagger, siste innlegg/kommentarer, tilleggsmenyer, tellere osv.

bunntekst - nederste del - bunnteksten på en nettside, inneholder vanligvis ulike opplysninger(opphavsrett), kontaktinformasjon(adresser, telefonnumre) etc.

HTML5 på sidestrukturnivå

La oss se på listen over nye HTML5-tagger som er ansvarlige for å dele sidestrukturen:

- koder som rammer inn designelementene til den øverste delen av nettstedet, den såkalte "sideoverskriften". Også header-tagger kan brukes som øverste del delen tag.

- koder som rammer inn hovedmenyen på nettstedet.

- koder som rammer inn hovedinnholdet på siden: artikkel, blogginnlegg, nyheter, første foruminnlegg, etc.

- koder som rammer inn sidefeltet. En sidebar er en såkalt "sidebar", som vanligvis inneholder blokker med overskrifter (kategorier), skyer av tagger (tags), en liste siste oppføringer og så videre. Du kan også bruke tagger til side for å ramme inn tellere, widgets (for eksempel kommentarer fra VKontakte) og sosiale knapper.

- innrammingsmerker Nedre del nettstedet, den såkalte "sidebunnteksten", som kan inneholde navnet på forfatteren (selskapet), kontakter (adresser, telefonnumre), juridisk informasjon (opphavsrett), etc. Footer tags kan også brukes som den nederste delen av en seksjonstag, dvs. selve bunntekstkodene vil være plassert mellom seksjonstaggene

- tagger som rammer inn gjentatte deler av en side eller hovedinnhold, for eksempel hvis det er flere kapitler i en historie på en side, kan hvert kapittel plasseres mellom disse kodene. Eller hvis du klikker på en lenke i sidefeltet (for eksempel på en lenke i en kategori), vil det vises en side der det vil være lenker med beskrivelser som fører til artikler som tilhører denne kategorien, og lenker med beskrivelser kan rammes inn med seksjonstagger, samt produkter med beskrivelser i nettbutikken, kommentarer på innlegg, kommentarer til et emne på forum m.m.

HTML5 på tekstnivå

La oss se på listen over nye HTML5-tagger som er ansvarlige for den semantiske inndelingen av sidetekst:

- teksten mellom disse taggene blir "valgt". Et av formålene med merkelapper er å ramme inn ord i teksten som for eksempel samsvarer med ordet brukeren har skrevet inn i søkelinjen.

- tagger er laget for å lage datoer og/eller klokkeslett i formatet
ISO av formen: ÅÅÅÅ-MM-DDThh:mm:ss , dette formatet er forståelig dataprogrammer. Tidskoder kan ramme inn en dato eller tekst; hvis koden rammer inn tekst, legges det til et datetime-attributt, hvis verdi er datoen og/eller klokkeslettet i ISO-format.

- Tagger er laget for å lagre informasjon som enten er skjult eller vist (fungerer som en spoiler).

- tags rammer inn tittelen, hvis du klikker på den, vises tekst (kan brukes som en spoiler), plassert mellom detaljtaggene.

Ytterligere HTML5-språkkoder

Liste over nye HTML5-tagger som beriker språket:

- tagger er designet for å vise en statisk skalaindikator, der måleresultatet ikke endres. For å jobbe trenger du en minimums- og maksimumsverdi.

- tagger er designet for å vise en dynamisk skalaindikator (for eksempel en filnedlastingsskala), der måleresultatet endres i sanntid.

- taggen må være plassert mellom meny-tagger, som brukes når man lager skript i JavaScript.

- kommandokoden er plassert mellom disse taggene.

- taggene er ment å vise skriptets operasjon.

- koder er ment å lage en liste som vil vises når den skrives inn i et tekstfelt.

- tags rammer inn beskrivelsen av et objekt (for eksempel et bilde), plassert mellom figurkodene.

- tags grupperer ulike sideobjekter med egne beskrivelser, for eksempel bilder med beskrivelser, produkter med beskrivelser, etc.

- koder er laget for å gruppere overskrifter h*

- taggen brukes til å generere offentlige/private nøkkelpar, kryptere/dekryptere data, opprette/verifisere en digital signatur.

- koder rammer inn teksten og merknader til den.

- koder er plassert mellom ruby-tagger og er ment å ramme inn kommentaren.

- Tags er beregnet på nettlesere som ikke støtter ruby-tags.

- taggen forteller nettleseren hvor ordet skal plasseres (" myk overføring") hvis dette ordet ikke passer i nettleservinduet.

HTML5-tagger som beskriver ny teknologi

HTML5 introduserer muligheten til å bruke mange teknologier og APIer som er en del av HTML5-språket og ikke tredjeparts plugins, her er noen av dem:

- tags er beregnet for å spille av lydfiler, uten bruk tredjeparts programmer(plugins, utvidelser).

- tags er beregnet for å spille av videofiler, uten bruk av tredjepartsprogrammer (plugins, utvidelser).

- taggen er ment å indikere banen til lyd-/videofiler, plassert inne i lyd- og videotaggene.

- Tagger er ment å lage et spesielt område på nettstedet der du kan lage vektorformer og manipulere dem ved å bruke JavaScript-programmeringsspråket. Canvas i fremtiden bør erstatte Flash-teknologi (ja, i teorien...).

stikkord

En tag er et spesielt element som er designet for å tegne og manipulere vektorformer. Taggen ble laget for å erstatte Flash-teknologi. Ved å bruke taggen kan du tegne vektorformer (bilder), og ved å bruke JavaScript, manipulere disse figurene, og derved lage animasjon (tegneserier og til og med spill) på nettstedet.

Lyd video

Ved å bruke taggen kan du legge inn lydfiler på siden og lytte til dem. Element

Ved å bruke taggen kan du legge inn videofiler på siden og se dem. Elementet lager også et panel med avspillingsknapper.

JavaScript API

HTML5-spesifikasjonen beskriver hvordan den skal samhandle JavaScript-språk, med sideelementer via DOM-teknologi. Også i HTML5 er det nye metoder for å manipulere objekter, for eksempel ved å bruke JavaScript og disse metodene kan du programmere styre knappene på lyd/video kontrollpanelet.

Støtte for XML-teknologi

I et HTML-dokument skrevet med HTML5-språket er det nå mulig å implementere teknologier knyttet til ulike XML-formater, som SVG eller MathML.

SVG

SVG - Skalerbar vektorgrafikk vektorgrafikk) er et XML-format. Siden HTML5 begynte å støtte XML-formater, er det nå mulig å bygge inn bilder laget ved hjelp av SVG i et HTML-dokument og manipulere dem gjennom JavaScript.

Eksempelkode for det grønne sirkelmønsteret:

Resultat:

MathML

MathML - Mathematical Markup Language (matematisk markup language) XML-format. Ved bruk av av dette formatet Du kan beskrive ulike matematiske formler.

Hvilke tagger i HTML5 er avviklet?

Eldre tagger i HTML5-spesifikasjonen er:

og embed tag bør brukes i stedet
abbr-taggen bør brukes i stedet
bør brukes i stedet lydmerke
ul-taggen bør brukes i stedet
..bør brukes i stedet iframe-tag
du bør bruke en haug med skjemaer og inndatakoder i stedet
og pre- eller kodebrikker bør brukes i stedet

Pre-taggen bør brukes i stedet
s-taggen bør brukes i stedet

I stedet for å formatere tagger: , , , , , , , , , og , bør du bruke CSS-egenskaper.

Det anbefales ikke å bruke foreldede tagger når du lager nettsider på HTML5, men dette betyr ikke at nettlesere ikke lenger støtter dem, for eksempel arbeidet med en ikke-anbefalt tag understreker

Nye globale attributter i HTML5

Globale attributter er attributter som kan bygges inn i en hvilken som helst HTML-dokumentkode. Nye globale attributter har dukket opp i HTML5, i beskrivelsene under er de uthevet med ordet Ny

La oss se på navnene og beskrivelsene av globale HTML5-attributter:

accesskey=" " - lar deg bruke et hvilket som helst element (tag) på siden ved å trykke på en forhåndsprogrammert tastekombinasjon,
class=" " - lar deg angi klassenavnet,
contenteditable=" " - lar deg redigere innhold vare Ny,
contextmenu=" " - lar deg lage en kontekstmeny for det nye elementet,
dir=" " - lar deg administrere tekst retning,
draggable=" " - lar brukeren dra elementet Ny,
dropzone=" " - lar deg spesifisere hva du skal gjøre med et element når du drar Ny,
hiden=" " - lar deg skjule det nye elementet,
id=" " - lar deg angi en unik identifikator for et element,
lang=" " - lar deg spesifisere språkkoden i elementinnholdet,
spellcheck=" " - lar deg spesifisere om stavekontroll er kontrollert i innholdet i det nye elementet,
style=" " - lar deg lage en stil for et element,
tabindex=" " - lar deg lage en regel som spesifiserer i hvilken rekkefølge elementer skal få fokus når du trykker på Tab-tasten,
title=" " - lar deg lage et verktøytips som vises når du holder musepekeren over et element.

Siden i HTML5-spesifikasjonen ble tagger omgjort til fullverdige objekter, var konseptet med et globalt attributt allerede iboende i disse objektene, selv for de taggene som ennå ikke er beskrevet i spesifikasjonen.

Innovasjoner i HTML5-dokumentkodestrukturen

Kodestrukturen i HTML5 har gjennomgått noen endringer, her er noen av dem:

1. I motsetning til tidligere versjoner språk, i HTML5 er det bare én doctype:
For eksempel kan du se det i kildekoden til sidene på dette nettstedet (ikke glem at det ikke skal være noe før doctype, ingen mellomrom, ingen linjeskift osv.).

2. For å indikere dokumentspråket, nå i stedet for metakoden:
du må bruke lang="ru"-attributtet i taggen:

3. For å indikere dokumentkodingen, nå i stedet for metakoden:

du må bruke en meta-tag, uten http-equiv og content-attributtene

4. Når du oppretter et JavaScript-skript, nå i taggen, er det ikke nødvendig å implementere attributtene type="text/javascript" og language="JavaScript".

5. Ved gjennomføring CSS-stiler, nå er det ikke nødvendig å implementere type="text/css"-attributtet i og -taggene.

6. Link er en inline-tag, så tidlig HTML-spesifikasjoner og XHTML, ble de ikke anbefalt å ramme inn blokkkoder; nå i HTML5-spesifikasjonen er denne anbefalingen for koblinger fjernet, og de har nå lov til å ramme inn ett eller flere blokkelementer.

Overskrift

Avsnitt

Nå med HTML5 kan du gjøre dette:

Overskrift

Basert på materiale fra nettstedet http://html-5.ru/, http://html-5.ru/uchebnik-html5

Kommandokoder for søkemotorroboter, semantisk belastning av sider

Tillegg til HTML W3C fra 2015-2017

W3C-anbefalinger 24. desember 1999

Ofte er webutviklere ikke engang klar over at visse HTML-kodingsstandarder eksisterer. Men mellom 2000 og 2010 byttet mange nettutviklere fra HTML til XHTML. Samtidig tvang XHTML utviklere til å skrive gyldig og "velformet" kode. HTML5, når det kommer til kodevalidering, gir rom for litt slurv.

Konsistent stil vil imidlertid gjøre det lettere for andre å forstå HTML-koden din.

Kanskje programmer en dag liker leseprogrammer XML-data, må du lese HTML-koden din. Å bruke velformet, XHTML-lignende syntaks er derfor en rimelig tilnærming.

Sørg alltid for at koden din er ryddig, ren og velformet.

Bruk riktig dokumenttype

Angi alltid dokumenttypen på den første linjen:

Hvis du vil opprettholde konsistens med små bokstaver, kan du bruke følgende dokumenttypedefinisjon:

Skriv elementnavn med små bokstaver

HTML5 tillater både store og små bokstaver i elementnavn. Det er imidlertid bedre å alltid bruke bare små bokstaver. Dette forklares av følgende hensyn:

Å blande store og små bokstaver i merkenavn anses som dårlig praksis

Dette er et avsnitt med tekst.

Veldig dårlig:

Dette er et avsnitt med tekst.

Lukk alle HTML-elementer

I HTML5 er du ikke pålagt å lukke alle elementer (for eksempel elementet

Dette er et avsnitt med tekst.

Lukk tomme HTML-elementer

I HTML5 avhenger hvorvidt du skal lukke tomme elementer eller ikke av webutviklerens ønske.

Akseptabel:

Også akseptabelt:

Den etterfølgende skråstreken (/) kreves imidlertid i XHTML og XML.

Hvis nettsiden din forventes å få tilgang til av XML-applikasjoner, er den tom HTML-elementer Det er bedre å bruke en avsluttende skråstrek!

Bruk små bokstaver for attributtnavn

I HTML5 kan du blande store og små bokstaver når du skriver attributtnavn.

Å blande store og små bokstaver i attributtnavn anses som dårlig praksis
Utviklere bruker vanligvis små bokstaver (som i XHTML)
Små bokstaver ser renere ut
Små bokstaver er lettere å skrive

Legg ved attributtverdier i anførselstegn

HTML5 lar attributtverdier skrives uten anførselstegn. Vi anbefaler imidlertid å alltid sette attributtverdier i anførselstegn fordi

Å blande store og små bokstaver i betydninger anses som dårlig praksis
Oppgitte verdier er lettere å lese
Du MÅ sitere dersom det er mellomrom i verdiene

Veldig dårlig:

Dette vil ikke fungere fordi det er mellomrom i verdien

Bildeattributter

Når du definerer bilder, bruk alltid "alt"-attributtet. Denne egenskapen er viktig når bildet av en eller annen grunn ikke vises.

Definer også alltid bredden og høyden på bildet. Dette reduserer sammenbrudd av sidelayout siden nettleseren vil reservere plass til bildet mens siden lastes.

Mellomrom og like

HTML5 tillater mellomrom rundt likhetstegnet. Men når det ikke er mellomrom, er koden lettere å lese og den grupperer enheter bedre.

Unngå lange linjer med kode

På ved hjelp av HTML editor, er det upraktisk å lese HTML-koden hvis du må rulle vinduet til venstre eller høyre.

Du bør prøve å holde kodelinjen på ikke lenger enn 80 tegn.

Blanke linjer og innrykk

Du bør ikke legge til tomme linjer uten en god grunn.

For best lesbarhet bør tomme linjer bare legges til for å skille store, logisk konsistente kodeblokker.

For bedre lesbarhet, legg til to mellomrom for innrykk. Ikke bruk faner til dette.

Unngå unødvendig mellomrom og innrykk. Det er ikke nødvendig å rykke inn hvert element.

Ikke nødvendig:

Kjente byer Tokyo

Tokyo er hovedstaden i Japan, sentrum av Greater Tokyo-området, og det mest folkerike storbyområdet i verden. Det er sete for den japanske regjeringen og det keiserlige palasset, og hjemmet til den japanske keiserfamilien.

Kjente byer Tokyo

Navn Beskrivelse

EN	Beskrivelse av A
B	Beskrivelse av B

London

Paris

Tokyo

Å hoppe over eller ikke og?

I henhold til HTML5-standarden kan ikke taggen og taggen brukes.

Følgende kode anses som gyldig i henhold til HTML5-standarden:

Sidetittel Dette er en teksttittel

Dette er et avsnitt med tekst.

Elementet er roten til dokumentet. Dette er det anbefalte stedet for å definere sidespråket:

Sidespråkdeklarasjonen er viktig for både spesialiserte applikasjoner (som skjermlesere) og søkemotorer.

I tillegg, hvis du ikke skriver en tag eller en tag, kan det bryte DOM- og XML-strukturen til applikasjonen. Og å hoppe over en tag kan også føre til feil i eldre nettlesere (IE9).

Bør jeg hoppe over merket?

I henhold til HTML5-standarden kan ikke taggen brukes.

Som standard vil nettlesere legge til alle elementene før åpningstaggen i elementet de oppretter.

Du kan redusere kompleksiteten til HTML-strukturen ved å utelate taggen:

Sidetittel Teksttittel

Dette er et tekstavsnitt.

Metadata

Elementet kreves i HTML5. Sidetittelen skal fylles med mening:

For å sikre korrekt tolkning og korrekt indeksering av siden søkemotorer, må definisjonen av sidens språk og tegnkoding deklareres så tidlig som mulig:

HTML5-syntaks og kodingsstandarder

Installere en viewport (visningsvindu)

"Viewport" er det brukersynlige området på en nettside. Dette området varierer fra enhet til enhet og pr mobiltelefoner vil være mindre enn på en dataskjerm.

HTML5 introduserte en metode som lar webdesignere kontrollere visningsporten ved hjelp av .

Du bør alltid bruke en visningsportkontroll i følgende skjema på alle nettsider:

Denne visningsportkontrollen gir instruksjoner til nettleseren om hvordan du kontrollerer størrelsen og skaleringen av siden.

Bredde=enhetsbredde-delen setter sidebredden til å matche skjermbredden til gjeldende enhet (som vil variere avhengig av enheten du bruker).

Startskalaen=1,0 delsett Første nivåøker når siden først lastes inn av nettleseren.

Nedenfor kan du se et eksempel på en nettside på en smarttelefonskjerm med og uten viewport-metakoden installert:

Side med viewport-metatag

HTML-kommentarer

En kort kommentar bør skrives på én linje: