Vad är skillnaden mellan ett element och en tagg? När ska jag använda stark och när ska jag använda fetstil? Vad är det som är DOM? När du är ny för webbdesign, är en av de största hindren att övervinna alltid jargongen. Så många tekniska termer kastas runt flippigt och förklaras sällan helt klart att det är lätt att gå vilse.
Denna serie kommer att fungera som en grundläggande introduktion till vissa termer som varje ny webbdesigner skulle vara säker på att lägga till i sitt ordförråd. Detta kommer inte att vara en uttömmande ordförrådslista utan snarare en primer på några villkor som jag hade svårt att sätta på huvudet när jag var nybörjare. Vi börjar med HTML idag och gå vidare till CSS inom en snar framtid.
HTML & HTML5
html
HTML står för HyperText Markup Language. För att bättre förstå den här termen, låt oss skära den upp stycke för bit.
hyper~~POS=TRUNC
Hypertext är helt enkelt text som visas på en digital enhet som använder aktiva länkar för att underlätta navigering. Till exempel för att komma till den här sidan klickade du sannolikt på en bit text som omdirigerade din webbläsare till rätt plats.
Markup Language
Ett markeringsspråk är ett sätt att kommentera dokument. Med ett spårningsspråk kan vi göra vanlig text till rikformaterade dokument genom att använda speciell syntax som berättar för parsern hur man visar informationen och elementen som skickas till den.
Sätt ihop det?
Med detta i åtanke är HTML ett sätt att kommentera och därefter formatera dokument för visning som i stor utsträckning beror på ett system som möjliggör textbaserade länkar. Detta är själva grunden för hur webben fungerar.
HTML5
HTML5 är exakt vad det låter som den femte stora iterationen av HTML. HTML5 fungerar som ersättning för både HMTL 4.01 och XHTML 1.1, så när du ser referenser till dessa språk vet du bara att HTML5 är den nyaste syntaxen.
HTML5 ger massor av nya funktioner, element och syntax ändras till HTML, för många för att lista uttömmande här. Något som du kanske ser nämnde regelbundet är ett dukelement för att göra grafik, en ny förenklad doktyp, möjligheten att bädda in video utan anpassade plugins som Flash och nya API för webbapplikationsutvecklare.
För att lära dig allt om HTML5, bläddra ta en titt på följande omfattande resurser:
- HTML5 Rocks
- Dyk i HTML5
- HTML5-doktor
På Semantik
Semantisk HTML
När jag först började med webbdesign hörde jag den här frasen dagligen och det körde mig nötter. Alla tycktes alltid vara uppe i vapen om vad som var semantiskt och vad som inte var. Det visar sig att orsaken till detta är enkelt: en semantisk webb är en bättre.
I grund och botten är kärnkonceptet här att din markering ska ge så mycket mening som möjligt. För att uppnå detta bör du använda element som de var avsedda att användas och på ett sätt som tydligt kommunicerar med någon eller något som ser på din kod.
Det brukade till exempel vara vanligt att utvecklare skulle strukturera hela webbsidor med hjälp av HTML-tabeller. Problemet med detta är att tabellelementet har en mycket speciell syfte: att visa en tabell med information (tänk på en prissättningstabell eller jämförelseskalkyl). När du ser
div
Medan vi är på ämnet semantisk webbdesign kan vi lika väl diskutera de mest argumenterade om elementet sedan bordet: div. Om du någonsin har tittat på källan till en HTML-sida, så är odds såg divs överallt. Så vad är det som är en div?
Termen? Div? är kort för? division.? Om du tycker att det är lite vagt, har du rätt. Faktum är att hela div-elementets syfte är att vara vagt. Divs är i grunden en generisk behållare för block av innehåll som inte annars kan beskrivas på semantisk nivå.
Detta leder naturligtvis till idén att divs är icke-semantiska varelser, vilket innebär att en div i och i sig inte verkligen förmedlar mening. Följaktligen, med tanke på de principer som vi skisserade i de tidigare definitionerna, bör divs användas så gles som möjligt, åtminstone teoretiskt. I praktiken är många utvecklare ganska generösa med dem.
Eftersom de är så mångsidiga och användbara för att skapa strukturer som enkelt kan riktas mot CSS, använder vi instinktivt massor av div. Men där det är möjligt bör du alltid nå något mer semantiskt. Tänk på följande kodkod som var ganska populär före HTML5.
Med ID, har vi sorts infused någon mening men div själv är fortfarande ett generiskt, oönskat objekt. Med HTML5 kan vi dike div och använda det mycket mer semantiska headerelementet.
em vs kursiv och stark vs fet
Det här kan verkligen bli svårt, särskilt för att HTML5 ger upp lite ändrad semantisk mening för dessa termer. Låt oss börja med em vs kursiv.
Specifikationen för att använda kursivelementet anger att det nu används för text som är "offset från det omgivande innehållet utan att överföra extra vikt eller betydelse, och för vilken den konventionella typografiska presentationen är kursiv text.
Nyckeln här är att kursivelementet inte ger någon extra tonvikt, men självklart gör em-taggen det. Tänk på det helt enkelt som ett annat humör eller en röst.
Exempel är en taxonomisk beteckning, en teknisk term, en idiomatisk fras från ett annat språk, en tanke eller ett skeppsnamn.
Kontrast detta med em-elementet, som används för stressat stress. Här försöker vi faktiskt kommunicera att du skulle tala elementets innehåll annorlunda än resten av meningen.
Att flytta på har det djärva elementet ändrats för att ha en betydelse som nästan är identisk med kursivets element: • Förskjutas från dess omgivande innehåll utan att överföra extra vikt eller betydelse, och för vilken den konventionella typografiska presentationen är fet text.
Återigen ser vi att nyckeln här är att vi inte lägger vikt på, bara efter typografiska konventionen. Exempelvis kan ett skript blunda karaktärsnamnen.
Alternativt borde du använda starkt för att förmedla? Stark vikt.? Till exempel använder varningsmeddelanden ofta denna konvention.
Med starkt kan du även använda nestning för att förmedla mer viktiga nivåer.
För att lära dig mer om dessa fyra element, kolla in HTML5 Doctor, som har en ganska omfattande förklaring av de förändringar som implementerats i HTML5 och hur du ska använda var och en.
attribut
Klass vs ID
En av de mest kritiska skillnaderna som du behöver förstå som en webbdesigner för framsidan är skillnaden mellan en clasa och ett ID. Tänk på följande två utdrag, förstår du hur de är annorlunda?
Lyckligtvis är skillnaden faktiskt väldigt lätt att förstå: ID-er är unika och klasser är resuable. Till exempel är följande inte en giltig användning av HTML eftersom jag har använt samma ID på två olika element.
Lösningen här är att ändra dessa ID till klasser. Samma klass kan tillämpas på så många element som du vill ha. Att rikta den ena klassen i din CSS låter dig ställa en massa element på en gång.
Vissa har gått så långt som att säga att du aldrig ska använda ID och istället alltid titta på klasser eftersom de är mer mångsidiga. Argumentet är meningsfullt men för att vara ärlig köper jag inte riktigt in det och hittar fortfarande giltiga användningsområden för ID: er hela tiden.
Annat Jargon
Element vs Taggar
Å ena sidan verkar denna skillnad inte som den mest kritiska saken i världen. Trots allt använder många utvecklare dessa villkor utbytbart. En korrekt förståelse av HTML-grundstrukturen är dock grunden för en solid webbutvecklingsutbildning. Det kan tyckas nitpicky, men dessa två termer betyder faktiskt olika saker.
För att illustrera, låt oss börja på den mest grundläggande nivån. Följande är en startkod? för en listobjekt.
På samma sätt är här "slutkoden"? för en listobjekt.
Var och en av dessa är en tagg allt på egen hand. Men de är inte element. Här ser det ut som listelementet ser ut.
För att uttrycka detta kortfattat består HTML av element och element består av taggar och innehåll. I allmänhet innehåller ett element en start tagg, innehåll och en endemärke, men vissa taggar är självslutande så den här terminologin kan bli lite svår.
Uppdatering!
När Paul Irish säger att du har fel, låt oss möta det, det är du förmodligen. Jag kan inte låtsas att veta en tiondel av de saker som den här killen kan recitera om webbutveckling i hans sömn och jag uppskattar verkligen att han tar sig tid att peka oss i rätt riktning på detta i kommentarerna.
Jag kollade en massa skillnadskällor för dessa definitioner och slutligen cobbled mina egna tillsammans baserat på var det verkade vara överenskommelse. I den här videon beskrivs dock vad ett element verkligen är, vilket är mycket mer än du tror. I slutändan drar han slutsatsen att det inte är den största affären i världen, men samtidigt som vi är på ämnet kan vi också se till att vi får det rätt!
DOM
Det här är en annan sak som förvirrade mig mycket när jag började skriva HTML. Jag hörde ständigt att folk hänvisar till DOM? men trodde det lät som något alltför tekniskt som jag förmodligen inte förstod. Jag visste att det fanns en DOM och kanske att folk handlade om att korsa det, men jag hade ingen aning om vad något av det innebar. Det uppenbara svaret,? Det är dokumentobjektmodellen? fick mig inte var.
Det visar sig att DOM faktiskt är ganska lätt att förstå. På sin mest grundläggande nivå refererar det bara till strukturen på en webbsida och ger oss en tydlig konvention för att visualisera och referera till varje bit.
Sätt på ett annat sätt, DOM är släktträdet på en webbsida. Överst har du dokumentet, som sträcker sig ner till rot- eller html-elementet och därefter huvud- och kroppselementen. Om vi tittar på kroppselementet nedan kan vi se att det gränsar till andra element, som alla kan ha eget innehåll och delelement.
Vi hänvisar till relationerna i DOM-trädet, precis som i ett släktträd. Om ett element är inuti ett annat, är det ett förälderns barn. Om två delar direkt delar en förälder, är de syskon.
Denna struktur och verbiage ger oss ett gränssnitt för att interagera med specifika element genom en webbsida. Till exempel i JavaScript eller till och med HTML kan du använda din kunskap om DOM för att rikta första barnet till en orörd lista, vilket betyder det första li-elementet inuti ul-elementet.
Går djupare
Ovanstående definition är verkligen en förenklad version av vad DOM är. När du väl har en stark förståelse för hur DOM definierar strukturen i HTML-dokument, kan du gå vidare till de mer komplicerade definitionerna, vilket förhoppningsvis nu kommer att göra lite mer meningsfullt. Kolla in W3C-definitionen för en mycket djupare diskussion.
Här ser du DOM kallat ett programmerings API för dokument som definierar en objektstruktur. Du ser också att detta API innehåller olika moduler, som CSS och MouseEvents, som kan implementeras på olika sätt.
Blockera vs.Inline Elements
När du skapar element i HTML och definierar sin stil i CSS, ser du att webbläsaren tolkar olika element på olika sätt från ett layoutperspektiv.
När du skapar ett blocknivåelement, till exempel en paragraf eller en div, visas den på en ny rad eller rad i dokumentets flöde. Så om du skapar tre stycken kommer de att visas vertikalt staplade i live-förhandsvisningen i stället för horisontellt som kolumner. En annan viktig skillnad här är att blocknivåelement kan ges en viss bredd och höjd.
Ett inlineelement å andra sidan görs? I linje? med innehållet före och efter det. Om du till exempel lägger in ett starkt element i ett stycke, kommer det inte att skapa en ny rad utan kommer istället att behålla flödet av stycket. Inline-element har en höjd och en bredd som automatiskt bestäms av innehållet, men dessa värden kan inte uttryckas specifikt.
Ändra beteende
Använda CSS? Displayen? egendom, vi kan ändra beteendet hos vissa objekt. Till exempel, här tar jag ett ankare, som som standard är ett inline-element och berättar för webbläsaren att göra det som om det var ett blocknivåelement. Detta kommer nu att ges sin egen linje inställd till en viss höjd och bredd.
Vi gick faktiskt bara över det här ämnet i vår artikel om att använda? Display: inline-block? som ett alternativ till flottor. Kolla här här.
Vilka villkor strider du med?
Jag hoppas att denna korta ordlista med HTML-termer har skurit lite ljus på några potentiellt förvirrande ämnen. Var och en av dessa har snubblat upp mig vid en eller annan gång så känner mig inte dåligt om det finns något som du aldrig förstod förrän nu.
Medan vi är på ämnet finns det andra HTML-termer som för närvarande förvirrar dig eller har förvirrat dig tidigare? Låt oss veta i kommentarerna och var noga med att checka tillbaka snart för vår CSS vocab refresh!