Vill du snabbt hitta en beskrivning av ett HTML5-element eller -attribut som används i en webbsida eller webbapplikation? Här är en klassisk referensbok som webbdesigners och webbutvecklare har försökt hålla till hands i över 15 år.
Den femte upplagan av boken innehåller en fullständig beskrivning av HTML5-element och attribut i enlighet med HTML5 Candidate Recommendation, HTML5.1 Working Draft och WHATWG-standarder. Funktioner i katalogen:
– en alfabetiskt ordnad lista över element och attribut från HTML5, HTML5.1 och WHATWG-standarden;
– exempel på uppmärkning, innehållskategorier, innehållsmodeller och start-/sluttaggkrav för varje element;
– en beskrivning av skillnaderna mellan HTML5- och HTML4.01-specifikationerna;
– tabeller med specialtecken;
– översikt över API-bibliotek som används i HTML5.

Oavsett om du är en erfaren webbplatsutvecklare eller snabbt vill bygga en webbplats enligt de senaste standarderna, kommer du att tycka att den här användbara boken är oumbärlig.

Gillade du artikeln eller boken? Dela med dina vänner:

Alla böcker som presenteras på webbplatsen är endast i informationssyfte. All användning av dem av dig är endast tillåten i informationssyfte. Om du planerar att använda dem i framtiden måste du köpa dem från upphovsrättsinnehavarna. Webbplatsadministrationen ansvarar inte för din användning av dem.

Efter att ha läst titeln på publikationen: "HTML5 Cheat Sheet på ryska" - alla har redan gissat om talet, men först ett par stycken om HTML5 i allmänhet.

Arbetet med att skapa HTML5 startade 2004. och fortsätta till denna dag. HTML5 är planerad att vara den mest universella och funktionella versionen av HTML (HyperText Markup Language), för på ett eller annat sätt är industrititaner som Apple, Mozilla, Opera, Microsoft och Google involverade i skapandet av HTML5. Låt mig notera det exakt Google Chrome, på det här ögonblicket, stöder de flesta HTML5-element

Trots att ändringar kan komma att göras i HTML5, eftersom arbetet med HTML 5-specifikationen fortfarande pågår och fortfarande pågår, sker teknikutvecklingen så snabbt att HTML5 snart kommer att tas i bruk och webbplatser kommer att behöva skapas med de breda funktionerna av HTML5!

HTML5-fuskblad på ryska hjälper till att lära sig

Kodare och layoutdesigners måste lära sig innovationerna, taggarna och standarderna för HTML5 idag, för trots det pågående arbetet med HTML5 används vissa av dess funktioner redan ganska framgångsrikt när man skapar webbplatser. Naturligtvis måste du börja lära dig HTML5 med taggar, eftersom nya taggar har dykt upp i HTML5, och vissa gamla kommer inte att stödjas. Dessutom kom många taggar från HTML4 till HTML5. Och vad kan vara bättre och bekvämare att lära sig något än ett fuskblad? Träffa:

det första HTML5-fusket på ryska i RuNet

Det första HTML5-fuskbladet på ryska på RuNet innehåller nya HTML5-element som tidigare användes mycket, men som skrevs i stilarnas namn. Till exempel sidfot, sidhuvud, avsnitt, artikel och andra. Dessutom innehåller HTML5-fuskbladet på ryska alla taggar gammal version HTML4, som flyttade till HTML5. Dessutom innehåller HTML5-fuskbladet på ryska taggar som inte stöds av HTML5.

HTML5-fuskark på ryska, gjort i A4-format

Det första HTML5-fuskbladet på ryska i RuNet är gjort i A4-format, så det är bekvämt för dig att skriva ut det och ha det till hands. Jag noterar att HTML5-fuskbladet på ryska beskriver alla taggar på en rad och förmedlar syftet med taggen så mycket som möjligt. Vårt HTML5-fuskark på ryska kommer ständigt att förfinas och uppdateras när taggar tas bort eller läggs till i HTML5. Du kan ladda ner "HTML5-fuskbladet på ryska" från länken nedan. I arkivet hittar du 1 pdf Hög kvalitet och två jpg-fil i olika förlängningar.

Ladda ner "HTML5 Cheat Sheet in Russian" (Antal nedladdningar: 7996)

Arkivet innehåller två jpg-filer i tilläggen 1024×1448 och 2480×3508

uppdaterad 29.10.2014

Mer än två år har gått sedan inlägget skrevs och själva skapandet av fuskbladet på HTML 5. Under denna tid laddades fuskbladet ner 3600 gånger), jag är mycket nöjd, jag hoppas att det var användbart för de som studerade layout i HTML 5. Jag lärde mig mycket och lärde mig från olika forum och webbplatser, och genom att skapa ett cheat sheet ville jag visa min tacksamhet, betala tillbaka min skuld). Varför skriver jag en uppdatering i detta inlägg idag, för idag är utvecklingen av HTML5 äntligen klar!

HTML5-utvecklingen är officiellt klar

HTML5 är officiellt "funktionellt komplett". Enligt etablerade globala standarder av Worldwide Web Consortium (W3C). Det återstår fortfarande några tester att göra, och det har ännu inte blivit en officiell webbstandard, men för närvarande är det säkert att säga att det inte kommer att finnas några nya funktioner jämfört med den nuvarande versionen.

Detta innebär att webbdesigners och apptillverkare nu har ett "stabilt mål" för en smidig övergång till ny standard senast 2015. HTML5 markup language tillåter utvecklare att lägga till funktionalitet på sidor som tidigare krävde fristående applikationer eller ytterligare programvara, som Java, Adobe Flash eller Microsoft (MSFT, Fortune 500) Silverlight. Han stöttar strömmande video och geolokaliseringstjänster, offlineverktyg och beröringskontroller, bland annat klockor och visselpipor.

Det tog mer än 10 år att utveckla en ny standard. vd W3C Jeff Jaffe sa i ett förberett uttalande för några dagar sedan att från och med idag vet utvecklare att de kan lita på HTML5 i många år framöver. "Dessutom kommer utvecklare att veta vilka färdigheter som ska utvecklas för att nå smartphones, bilar, TV-apparater, e-böcker, digitala skyltar och enheter ännu inte kända, tillade han.

Senast Microsoft versioner Internet Explorer, Google Chrome, Mozilla Firefox och Apple Safari är redan kompatibla med de flesta HTML5-element. W3C arbetar redan med HTML 5.1, vars första delar just har skickats in som ett utkast.

Konventioner HTML-kod

För många webbutvecklare är HTML-kodspecifikationer dåligt förstådda.

Under 2000-2010 konverterade många webbutvecklare från HTML till XHTML.

Utvecklare som använder XHTML utvecklar gradvis bra HTML-skrivspecifikationer.

Och i HTML5 måste vi bilda relativt bra kodstandarder, flera riktlinjer ges under specifikationen.

Använd rätt dokumenttyp

Dokumenttypsdeklaration på första raden HTML-dokument:

DOCTYPE HTML>

Om du vill använda andra etiketter som gemener kan du använda följande kod:

DOCTYPE HTML>

Namn på små bokstäver

HTML5-elementnamn kan användas med stora eller små bokstäver.

• Fodral med blandad stil är mycket dåligt.
• Små bokstäver är lätta att skriva.

Detta är ett stycke.

Väldigt dåligt:

Detta är ett stycke.

Detta är ett stycke.

Stäng av alla HTML-element

I HTML5 vill du inte stänga alla element (som elementet ), men vi rekommenderar att varje element lägger till en avslutande tagg.

Detta är ett stycke.

Detta är ett stycke.

Detta är ett stycke.

Detta är ett stycke.

Stänga tomma element HTML

I HTML5 behöver det tomma HTML-elementet inte stängas av:

Vi kan skriva:

Du kan också skriva:

XML, XHTML och snedstreck (/) krävs.

Om du planerar att använda din XML-programsida är den här stilen mycket bra.

Namn på gemener attribut

HTML5 låter dig använda egenskapens namn med både stora och små bokstäver.

• Användningsfall är en mycket dålig vana.
• Utvecklare använder vanligtvis gemener (liknande XHTML).
• Stilen med gemener ser mer uppfriskande ut.
• Små bokstäver är lätta att skriva.

Fastighetsvärde

HTML5-attributvärden kan inte citeras.

• Om egenskapsvärdet innehåller mellanslag måste du använda citattecken.
• Blandad stil rekommenderas inte, enkel stil rekommenderas.
• Fastighetsvärden med citat är lätta att läsa.

Följande exempelattributvärde innehåller blanksteg, använd inte citattecken, det kanske inte fungerar:

Nedan används dubbla citattecken, Detta är rätt:

egenskaper

Image Alt-attribut används ofta. Om bilden inte kan visas kan den ersätta bildvisningen.

= "HTML5" style = "bredd: 128px; höjd: 128px">

Bildstorleken bestäms, kan reserveras vid tidpunkten för laddning av det angivna värdet, minska flimmer.

= stil "HTML5" = "bredd: 128px; höjd: 128px">

Mellanslag och likhetstecken

Du kan använda mellanslag före och efter likhetstecknet.

Undvik långa rader med kod

Det är besvärligt att använda HTML-redigeraren, vänster och höger rullningskod.

Varje kodrad är så mycket som möjligt mindre än 80 tecken.

Tomma linjer och indrag

Lägg inte till en tom rad utan anledning.

Lägg till en tom rad för varje funktionellt logikblock, vilket gör det mer läsbart.

Använd inte onödiga tomma indragna rader mellan kortkoder.

Extra tomma rader och indrag:

Denna handledning

HTML

Denna handledning lär inte bara teknik, utan också sömn.
Denna lärobok, som inte bara lär ut teknik utan också i en dröm,
Denna handledning lär inte bara teknik, utan också sömn.

Denna handledning

I den här handledningen lär du inte bara teknik utan också sömn.
Denna handledning lär inte bara teknik, utan också sömn.
Denna handledning lär inte bara teknik, utan också sömn.
Denna handledning lär inte bara teknik, utan också sömn.

Exempelformulär:

namn
Beskrivning


A
Beskrivning A


B
Beskrivning B

Exempellista:

London

Paris

Tokyo

Låt oss utelämna och?

I HTML5-standarden kan taggen utelämnas.

Följande dokument är giltiga HTML5:

Exempel:

DOCTYPE HTML>

Namn på sidan

Det här är titeln

Detta är ett stycke.

Försök "

element är rotelementet i dokumentet, språket som används för att beskriva sidan:

DOCTYPE HTML>

Språkförklaring för att göra det lättare att läsa på skärmar och sökmotorer.

Låt oss utelämna antingen DOM- eller XML-programkrascher.

Låt oss utelämna felet som uppstår i äldre webbläsare (IE9).

Ska vi utelämna det?

I HTML5-standarden kan taggen utelämnas.

Webbläsaren förinställer innehållet innan elementet läggs till standard.

exempel

DOCTYPE HTML>

Namn på sidan

Det här är titeln

Detta är ett stycke.

Försök » Metadata

HTML5 kräver ett element vars titeltitel beskriver sidans tema:

I denna handledning

Titel och språk som gör att sökmotorn snabbt kan förstå ämnet på din sida:

DOCTYPE HTML>



I denna handledning

Webbdesigner - HTML5-specifikation (HTML 5)

Taggar i HTML5 är XML-HTML-taggar som beskriver strukturen på en webbsida, utformade så att ett datorprogram (sökrobot etc.) kan särskilja sidans huvudinnehåll från resten av sidan (formulerings- och navigeringselement) : topp, botten, meny, sidoelement, upprepade (dynamiska) block, etc. Det finns också en uppdelning på nivån för huvudinnehållet (sidtext). HTML5-språket i sig är ett tillägg till HTML, XML, CSS, etc.

Sidrubrik Överst på webbsidan, "header" Huvudmeny på webbsidan Huvudtext, artikel, sidmaterial Sidofält (sidofält) Nederst på sidan, sidfot

Webbplatsens struktur

- rama in huvudinnehållet på sidan (artikel),
- rama in sidhuvudet,
- rama in sidfoten på sidan,
- rama in huvudsaken sidmenyn,
- rama in sidofältet på sidan (sidofältet),
- ramupprepande block på sidan (till exempel kommentarer).

HTML5 webbsida mall kodelement.

- tilldela kodningen windows-1251.

- om sidan öppnas i IE ska webbläsaren alltid använda det senaste standardvisningsläget.

- visa webbplatsen på mobila enheter.

header - rubriken på webbplatsens sida, den innehåller vanligtvis webbplatsens logotyp, rubrik, telefonnummer, skjutreglage, etc.

nav - huvudmenyn på webbplatssidan.

artikel - sidans huvudinnehåll: artikel, blogginlägg, forumämne, etc. Kan innehålla text, bilder, videor, tabeller etc.

aside - sidofält (sidofält) på webbplatsen, innehåller vanligtvis olika element, såsom: kategorier, taggar, senaste inlägg/kommentarer, ytterligare menyer, räknare, etc.

sidfot - nedre delen - sidfoten på en webbsida, innehåller vanligtvis olika information(upphovsrätt), Kontaktinformation(adresser, telefonnummer) etc.

HTML5 på sidstrukturnivå

Låt oss titta på listan över nya HTML5-taggar som ansvarar för att dela upp sidstrukturen:

- Taggar som ramar in designelementen på den övre delen av webbplatsen, den så kallade "page header". Även header-taggar kan användas som övre del sektionstagg.

- taggar som ramar in huvudmenyn på webbplatsen.

- taggar som ramar in huvudinnehållet på sidan: artikel, blogginlägg, nyheter, första foruminlägg, etc.

- taggar som ramar in sidofältet. En sidofält är en så kallad "sidebar", som vanligtvis innehåller block av rubriker (kategorier), moln av taggar (taggar), en lista senaste inläggen och så vidare. Du kan också använda undantagstaggar för att rama in räknare, widgets (till exempel kommentarer från VKontakte) och sociala knappar.

- inramning av taggar nedre delen webbplats, den så kallade ”sidfoten”, som kan innehålla namnet på författaren (företaget), kontakter (adresser, telefonnummer), juridisk information (upphovsrätt), etc. Footer-taggar kan också användas som den nedre delen av en sektionstagg, d.v.s. själva sidfotstaggarna kommer att placeras mellan sektionstaggarna

- taggar som ramar in upprepade delar av en sida eller huvudinnehåll, till exempel om det finns flera kapitel i en berättelse på en sida, kan varje kapitel placeras mellan dessa taggar. Eller om du klickar på en länk i sidofältet (till exempel på en länk i någon kategori), så kommer en sida att dyka upp där det kommer att finnas länkar med beskrivningar som leder till artiklar som tillhör denna kategori, och länkar med beskrivningar kan ramas in med sektionstaggar, samt produkter med beskrivningar i webbutiken, kommentarer på inlägg, kommentarer om ett ämne på forum m.m.

HTML5 på textnivå

Låt oss titta på listan över nya HTML5-taggar som ansvarar för den semantiska uppdelningen av sidtext:

- texten mellan dessa taggar blir "markerad". Ett av syftena med mark-taggar är att rama in ord i texten som till exempel matchar det ord som användaren skrivit in i sökraden.

- Taggar är designade för att skapa datum och/eller tider i formatet
ISO av formatet: ÅÅÅÅ-MM-DDThh:mm:ss , detta format är förståeligt datorprogram. Tidstaggar kan rama in ett datum eller en text; om taggen ramar in text läggs ett datetime-attribut till, vars värde är datum och/eller tid i ISO-format.

- Taggar är designade för att lagra information som antingen är dold eller visas (fungerar som en spoiler).

- taggar ramar in titeln, om du klickar på den visas text (kan användas som spoiler), placerad mellan detaljtaggarna.

Ytterligare HTML5-språktaggar

Lista över nya HTML5-taggar som berikar språket:

- Taggar är utformade för att visa en statisk skalindikator, där mätresultatet inte ändras. För att fungera behöver du ett lägsta och högsta värde.

- Taggar är utformade för att visa en dynamisk skalindikator (till exempel en filnedladdningsskala), där mätresultatet ändras i realtid.

- taggen måste vara placerad mellan menytaggar, som används när man skapar skript i JavaScript.

- kommandotaggen placeras mellan dessa taggar.

- Taggar är avsedda att visa skriptets funktion.

- taggar är avsedda att skapa en lista som kommer att visas när de skrivs i ett textfält.

- taggar ramar in beskrivningen av ett objekt (till exempel en bild), placerad mellan figurtaggarna.

- taggar grupperar olika sidobjekt med egna beskrivningar, till exempel bilder med beskrivningar, produkter med beskrivningar osv.

- taggar är utformade för att gruppera rubriker h*

- taggen används för att generera publika/privata nyckelpar, kryptera/dekryptera data, skapa/verifiera en digital signatur.

- taggar ramar in texten och anteckningar till den.

- Taggar är placerade mellan ruby-taggar och är avsedda att rama in annoteringen.

- Taggar är avsedda för webbläsare som inte stöder ruby-taggar.

- taggen talar om för webbläsaren var ordet ska placeras (" mjuk överföring") om detta ord inte passar i webbläsarfönstret.

HTML5-taggar som beskriver ny teknik

HTML5 introducerar möjligheten att använda många tekniker och API:er som är en del av HTML5-språket och inte tredjeparts plugins, här är några av dem:

- taggar är avsedda för att spela upp ljudfiler, utan att använda tredjepartsprogram(plugins, tillägg).

- taggar är avsedda för uppspelning av videofiler, utan användning av tredjepartsprogram (plugins, tillägg).

- taggen är avsedd att indikera sökvägen till ljud-/videofiler, som finns inuti ljud- och videotaggarna.

- taggar är avsedda att skapa ett speciellt område på webbplatsen där du kan skapa vektorformer och manipulera dem med hjälp av programmeringsspråket JavaScript. Canvas i framtiden bör ersätta Flash-teknik (ja, i teorin...).

Märka

En tagg är ett speciellt element som är utformat för att rita och manipulera vektorformer. Taggen skapades för att ersätta Flash-teknik. Med hjälp av taggen kan du rita vektorformer (bilder) och använda JavaScript, manipulera dessa former och därigenom skapa animationer (tecknade serier och till och med spel) på webbplatsen.

Ljud video

Med hjälp av taggen kan du bädda in ljudfiler på sidan och lyssna på dem. Element

Med hjälp av taggen kan du bädda in videofiler på sidan och visa dem. Elementet skapar också en panel med spelknappar.

JavaScript API

HTML5-specifikationen beskriver hur den ska interagera JavaScript-språk, med sidelement via DOM-teknik. Även i HTML5 finns det nya metoder för att manipulera objekt, till exempel genom att använda JavaScript och dessa metoder kan du programmera styra knapparna på ljud/video kontrollpanelen.

Stöd för XML-teknik

I ett HTML-dokument som är skrivet med HTML5-språket är det nu möjligt att implementera teknologier associerade med olika XML-format, som SVG eller MathML.

SVG

SVG - Skalbar vektorgrafik vektorgrafik) är ett XML-format. Sedan HTML5 började stödja XML-format är det nu möjligt att bädda in bilder skapade med SVG i ett HTML-dokument och manipulera dem genom JavaScript.

Exempelkod för det gröna cirkelmönstret:

Resultat:

MathML

MathML - Mathematical Markup Language (matematiskt markup language) XML-format. Genom att använda av detta format Du kan beskriva olika matematiska formler.

Vilka taggar i HTML5 är utfasade?

Äldre taggar i HTML5-specifikationen är:

och embed-taggen ska användas istället
abbr-taggen ska användas istället
bör användas istället ljudtagg
ul-taggen ska användas istället
..ska användas istället iframe-tagg
du bör använda ett gäng formulär och inmatningstaggar istället
och pre- eller code-taggar bör användas istället


Pre-taggen ska användas istället
s-taggen ska användas istället

Istället för att formatera taggar: , , , , , , , , , och , bör du använda CSS-egenskaper.

Det rekommenderas inte att använda föråldrade taggar när du skapar webbplatser på HTML5, men det betyder inte att webbläsare inte längre stöder dem, till exempel arbetet med en icke-rekommenderad tagg understrykning

Nya globala attribut i HTML5

Globala attribut är attribut som kan bäddas in i alla HTML-dokumenttaggar. Nya globala attribut har dykt upp i HTML5, i beskrivningarna nedan är de markerade med ordet Ny

Låt oss titta på namnen och beskrivningarna av globala HTML5-attribut:

accesskey=" " - låter dig använda valfritt element (tagg) på sidan genom att trycka på en förprogrammerad tangentkombination,
class=" " - låter dig ställa in klassnamnet,
contenteditable=" " - låter dig redigera innehåll artikel Ny,
contextmenu=" " - låter dig skapa en snabbmeny för det nya elementet,
dir=" " - låter dig hantera textriktning,
draggable=" " - låter användaren dra elementet New,
dropzone=" " - låter dig ange vad du ska göra med ett element när du drar Ny,
hiden=" " - låter dig dölja det nya elementet,
id=" " - låter dig ställa in en unik identifierare för ett element,
lang=" " - låter dig ange språkkoden i elementets innehåll,
spellcheck=" " - låter dig ange om stavning kontrolleras eller inte i innehållet i det nya elementet,
style=" " - låter dig skapa en stil för ett element,
tabindex=" " - låter dig skapa en regel som anger i vilken ordning element ska få fokus när du trycker på Tab-tangenten,
title=" " - låter dig skapa ett verktygstips som visas när du för musen över ett element.

Eftersom taggar i HTML5-specifikationen förvandlades till fullvärdiga objekt, var konceptet med ett globalt attribut redan inneboende i dessa objekt, även för de taggar som ännu inte beskrivs i specifikationen.

Innovationer i HTML5-dokumentets kodstruktur

Kodstrukturen i HTML5 har genomgått några förändringar, här är några av dem:

1. Till skillnad från tidigare versioner språk, i HTML5 finns det bara en doctype:
Till exempel kan du se det i källkoden för sidorna på denna webbplats (glöm inte att det inte ska finnas något före doctype, inga mellanslag, inga radbrytningar, etc.).

2. För att ange dokumentets språk, nu istället för metataggen:
du måste använda attributet lang="ru" i taggen:

3. För att ange dokumentets kodning, nu istället för metataggen:

du måste använda en metatagg, utan http-equiv och content-attributen

4. När du skapar ett JavaScript-skript, nu i taggen, behöver du inte implementera attributen type="text/javascript" och language="JavaScript".

5. Vid implementering CSS-stilar, nu finns det inget behov av att implementera attributet type="text/css" i taggarna och.

6. Link är en inline-tagg, så tidigt HTML-specifikationer och XHTML rekommenderades de inte att rama in blocktaggar, nu i HTML5-specifikationen har denna rekommendation för länkar tagits bort och de får nu rama in ett eller flera blockelement.

Rubrik

Paragraf

Nu med HTML5 kan du göra detta:

Rubrik

Baserat på material från webbplatsen http://html-5.ru/, http://html-5.ru/uchebnik-html5

Kommandotaggar för sökmotorrobotar, semantisk belastning av sidor

• Tillägg till HTML W3C från 2015-2017

• W3C-rekommendationer 24 december 1999

Ofta är webbutvecklare inte ens medvetna om att vissa HTML-kodningsstandarder finns. Men mellan 2000 och 2010 bytte många webbutvecklare från HTML till XHTML. Samtidigt tvingade XHTML utvecklare att skriva giltig och "välformad" kod. HTML5, när det kommer till kodvalidering, tillåter en del slarv.

Konsekvent stil kommer dock att göra det lättare för andra att förstå din HTML-kod.

Kanske program som läser någon gång XML-data måste du läsa din HTML-kod. Att använda välformad, XHTML-liknande syntax är därför ett rimligt tillvägagångssätt.

Se alltid till att din kod är snygg, ren och välformad.

Använd rätt dokumenttyp

Ange alltid dokumenttypen på första raden:

Om du vill bibehålla överensstämmelse med taggar med små bokstäver kan du använda följande definition av dokumenttyp:

Skriv elementnamn med små bokstäver

HTML5 tillåter både stora och små bokstäver i elementnamn. Det är dock bättre att alltid bara använda små bokstäver. Detta förklaras av följande överväganden:

• Att blanda stora och små bokstäver i taggnamn anses vara dålig praxis

Detta är ett stycke text.

Väldigt dåligt:

Detta är ett stycke text.

Detta är ett stycke text.

Stäng alla HTML-element

I HTML5 behöver du inte stänga alla element (till exempel elementet

Detta är ett stycke text.

Detta är ett stycke text.

Detta är ett stycke text.

Detta är ett stycke text.

Stäng tomma HTML-element

I HTML5 beror om du vill stänga tomma element eller inte på webbutvecklarens önskan.

Godtagbar:

Även acceptabelt:

Det avslutande snedstrecket (/) krävs dock i XHTML och XML.

Om din webbsida förväntas nås av XML-applikationer, är den tom HTML-element Det är bättre att använda ett avslutande snedstreck!

Använd små bokstäver för attributnamn

I HTML5 kan du blanda stora och små bokstäver när du skriver attributnamn.

• Att blanda stora och små bokstäver i attributnamn anses vara dålig praxis
• Utvecklare använder vanligtvis små bokstäver (som i XHTML)
• Små bokstäver ser renare ut
• Små bokstäver är lättare att skriva

Bifoga attributvärden inom citattecken

HTML5 tillåter att attributvärden kan skrivas utan citattecken. Vi rekommenderar dock att alltid sätta attributvärden inom citattecken eftersom

• Att blanda stora och små bokstäver i betydelser anses vara dålig praxis
• Citerade värden är lättare att läsa
• Du MÅSTE citera om det finns mellanslag i värdena

Väldigt dåligt:

Detta fungerar inte eftersom det finns mellanslag i värdet

Bildattribut

När du definierar bilder, använd alltid attributet "alt". Detta attribut är viktigt när bilden av någon anledning inte visas.

Definiera också alltid bildens bredd och höjd. Detta minskar nedbrytningen av sidlayouten eftersom webbläsaren reserverar utrymme för bilden medan sidan laddas.

Mellanrum och lika

HTML5 tillåter mellanslag runt likhetstecknet. Men när det inte finns några mellanslag är koden lättare att läsa och den grupperar enheter bättre.

Undvik långa rader med kod

På använder HTML editor, är det obekvämt att läsa HTML-koden om du måste rulla fönstret åt vänster eller höger.

Du bör försöka att hålla kodraden inte längre än 80 tecken.

Tomma linjer och indrag

Du bör inte lägga till tomma rader utan en god anledning.

För bästa läsbarhet bör tomma rader endast läggas till för att separera stora, logiskt konsekventa kodblock.

Lägg också till två mellanslag för indrag för bättre läsbarhet. Använd inte flikar för detta.

Undvik onödigt vitt utrymme och indrag. Det finns ingen anledning att dra in varje element.

Inte nödvändigt:

Kända städer Tokyo

Tokyo är huvudstaden i Japan, mitten av Greater Tokyo-området och det mest folkrika storstadsområdet i världen. Det är säte för den japanska regeringen och det kejserliga palatset, och hemmet för den japanska kejserliga familjen.

Kända städer Tokyo

Tokyo är huvudstaden i Japan, mitten av Greater Tokyo-området och det mest folkrika storstadsområdet i världen. Det är säte för den japanska regeringen och det kejserliga palatset, och hemmet för den japanska kejserliga familjen.

Namn Beskrivning

A	Beskrivning av A
B	Beskrivning av B

London

Paris

Tokyo

Att hoppa över eller inte och?

Enligt HTML5-standarden får taggen och taggen inte användas.

Följande kod anses vara giltig enligt HTML5-standarden:

Sidrubrik Detta är en textrubrik

Detta är ett stycke text.

Elementet är roten till dokumentet. Det här är den rekommenderade platsen för att definiera sidspråket:

Sidspråksdeklarationen är viktig för både specialiserade applikationer (som skärmläsare) och sökmotorer.

Dessutom, om du inte skriver en tagg eller en tagg, kan det bryta DOM- och XML-strukturen för applikationen. Och att hoppa över en tagg kan också leda till fel i äldre webbläsare (IE9).

Ska jag hoppa över taggen?

Enligt HTML5-standarden får taggen inte användas.

Som standard kommer webbläsare att lägga till alla element före starttaggen inuti elementet de skapar.

Du kan minska komplexiteten i HTML-strukturen genom att utelämna taggen:

Sidrubrik Textrubrik

Detta är ett textstycke.

Metadata

Elementet krävs i HTML5. Sidrubriken bör fyllas med betydelse:

För att säkerställa korrekt tolkning och korrekt indexering av sidan sökmotorer, måste definitionen av sidans språk och teckenkodning deklareras så tidigt som möjligt:

HTML5 syntax och kodningsstandarder

Installera en visningsport (visningsfönster)

"Viewport" är det användarsynliga området på en webbsida. Detta område varierar från enhet till enhet och per mobiltelefoner kommer att vara mindre än på en datorskärm.

HTML5 introducerade en metod som gör det möjligt för webbdesigners att styra visningsporten med hjälp av .

Du bör alltid använda en visningsportkontroll i följande formulär på alla webbsidor:

Denna visningsportkontroll ger instruktioner till webbläsaren om hur man kontrollerar storleken och skalningen på sidan.

Delen width=device-width ställer in sidbredden så att den matchar skärmbredden på den aktuella enheten (vilket kommer att variera beroende på vilken enhet du använder).

Den initiala skalan=1,0 deluppsättningar Första nivånökar när sidan först laddas av webbläsaren.

Nedan kan du se ett exempel på en webbsida på en smartphoneskärm med och utan viewport-metataggen installerad:

Sida med viewport-metatagg

HTML-kommentarer

En kort kommentar bör skrivas på en rad: