HTML-taggar som Element, med Attribut som Egenskaper

HTML-taggarna utgör vad som kallas för s.k. ”element” på webbsidor (t ex. en <div> tagg motsvarar ett ”division”-element, eller på svenska: ”avdelnings element” (personligen föredrar jag att tänka mig <div> element som behållare)), sådana element skulle kunna vara bilder, paragrafer, formulär, tabeller, listor, behållare, m.m. som ni kan se i ovan stycke.

Till varje HTML-tagg så finns det attribut, som nämndes ovan- som motsvarar egenskaper man kan tilldela sina taggar, olika taggar har olika egenskaper, men kan även ha vissa gemensamma attribut/egenskaper även trots att taggarna är olika!

Attributen erbjuder utvecklaren möjlighet att utöka HTML-taggarna på fördefinierade sätt som i sin tur möjliggör skapandet av unika webbupplevelser.

Där finns t ex. attribut som definierar ett elements bredd, respektive höjd, samt attribut som tilldelar identifierande värde (id), som sen kan hänvisas till från andra kodspråk för att hitta just det elementet!

Wrappers – vad är det, hur använder man det, och varför använda det?

Wrappers är ett koncept som ofta glöms att nämna vid utbildande inom området webbdesign och webbutveckling. Kanske då utbildare antar att alla förstår vad det är och hur man använder dessa, men jag tror att för många är detta inte så självklart.. För er som inte ännu är bekanta med wrappers kommer jag här gå igenom vad de är, hur ni kan använda de och varför.

Varför man ska använda wrappers är enkelt: för bättre design och uppbyggnad/struktur av webbsidor.

Vad: Wrappers är samma sak som om ni tänker er ramar som läggs omfamnande kring flera lösa byggklossar för att samla alla klossarna inom den ramen, då har ni i stort sett greppat vad de är och hur de fungerar.

De är tänkta att ”omfamna” lösa byggklossar som är relaterade till varandra – den vanligaste Wrappern är ”huvudwrappern” för en sida som är tänkt att omfamna alla elementen för en webbsida. Se exempel nedan:

<div id="mainContainer">
     <header>
          <img src="logo.png" width="" height="" alt="" />
          <nav>
               <ul>
                    <li></li>
                    <li></li>
               </ul>
          </nav>
     </header>
     
     <article>
          <p></p>
     </article>

     <footer></footer>
</div>

Vad är då poängen med detta? Jo, om ni har en behållare/wrapper som omfamnar alla elementen på er webbsida så är det bl. a. mycket enklare att ange stilar som är gemensamma för flera barn-element inuti den wrappern på ett och samma ställe – nämligen wrappern själv – då barn-elementen ärver egenskaper från wrappern!

Detta är speciellt användbart för att ange en gemensam bredd för samtliga element på webbsidan, såväl som att inte få innehåll att ”flyta över gränserna”, vilket tenderar att hända om man inte har någon form av wrapper som hindrar det från att hända.. Jag gillar att kalla det: ”spacial-confinement-restrictions”, vilket på svenska kan översättas till: rumsliga inneslutnings begränsningar.

Med detta menar jag att om vi antar att ni har en wrapper, och inuti denne har ni en artikeltext, då kommer artikeltexten endast fylla ut fram till kanten av wrappern, och inte längre, då den endast kan sträcka sig så långt som wrappern såvida inte ”speciell” positionering anges via CSS.