I detta inlägg tänkte jag gå igenom Block-level element behållare som vi har till vårt förfogande i HTML(5). Vi ska gå igenom följande element, hur man kan använda dem, såväl som vilken funktion de är tänkta att fylla:

Element Beskrivning och funktion Länk
<div> Division element för icke-semantisk behållare, se MDN citat nedan:

The HTML <div> element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate(!).

MDN Referenssida
<section> Sektions/avdelnings- element, semantisk behållare för att märka upp tematiska delar av en webbsida. Se MDN citat nedan:

The HTML Section Element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section> should be identified, typically by including a heading (<h1><h6> element) as a child of the <section> element.

MDN Referenssida
<article> Artikel element, semantisk behållare för användning vid artikelliknande webbinnehåll, se nedan MDN citat:

The HTML Article Element (<article>) represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, or any other independent item of content. Each <article> should be identified, typically by including a heading (h1h6 element) as a child of the <article> element.

MDN Referenssida
<footer> Sidfots element, semantisk behållare tänkt att användas för att definiera en webbsidas sidfot! MDN Referenssida
<header> Sidhuvud element, semantisk behållare, motsvarighet till <footer> fast tänkt att användas för att definiera en webbsidas sidhuvud. MDN Referenssida
<aside> Sidospalts element, semantisk behållare tänkt att definiera sidospalter för webbsidor. MDN citat nedan:

The HTML <aside> element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content.

MDN Referenssida
<pre> För/O-formaterat element, tänkt att användas när webbläsaren inte ska tolka texten i behållaren. Se MDN citat nedan:

The HTML Preformatted Text (<pre>) represents preformatted text. Text within this element is typically displayed in a non-proportional font exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed.

MDN Referenssida
<nav> Navigations element, tänkt att användas för navigations menyer och liknande för webbsidor. Se MDN beskrivning nedan:

The HTML Navigation Element (<nav>) represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

MDN Referenssida

För att se bra praktiska exempel på när många av dessa elementen t ex. kan användas, så ta en titt på tidigare inlägg där vi gick igenom visualisation och realisation av layout för en webbsida.

Annars tycker jag inte där finns mycket mer att säga om dessa :)

När man använder <pre> elementet för ”preformatted” text

<pre> elementet är ett bra element som jag inte gick igenom i ovan länkade tidigare inlägg, som är väldigt användbart om man vill presentera kod på en webbsida i block-form.

Detta inlägg har som syfte att gå igenom alla användbara och viktiga taggar att känna till för att strukturera upp själva innehållet för en webbsida. Därför kommer jag i det här inlägget gå igenom följande taggar:

  • <hX> (för rubriktexter),
  • <hgroup> (för rubriktexts gruppering),
  • <p> (för paragrafer),
  • <strong> & <b> (för fetstil),
  • <em> & <i> (för kursiv stil),
  • <u> (för semantiskt understruket för t ex. betydelsen: felstavning)
  • <sup> (för upphöjt med),
  • <sub> (för nedsänkt),
  • <br /> (för radbrytning),
  • <hr /> (för sektionsavdelare),
  • <code> & <pre> (för inline- och block-kod),
  • <blockquote> & <cite> & <q> (för citat av olika slag),
  • <span> (för inline-container alternativ till <div>),
  • <mark> (för text-highlightning) samt
  • <a> (för länkar).

Dessa element är väldigt populära och användbara för semantisk uppmärkning av ens webbsidas innehåll, såväl som strukturering av webbsidans innehåll för lättläslighet och professionellare känsla. Dock är inte ovan listade element de enda som finns, learn.shayhowe.com går igenom några andra som finns, och ni kan säkert hitta ytterligare fler på andra webbsidor, men jag har valt att gå igenom dessa då jag tror dessa är några av de populäraste, och de som ni kommer att använda mest för era webbsidor.

Rubriker (och rubrikgruppering (”experimentell teknologi”)) (<hX> & <hgroup>)

Rubriktexter är något väldigt användbart att känna till när man ska ha hand om innehåll för webben. Där finns ett antal ”olika” <hX> taggar (därav X:et), de olika alternativen som finns kan ses nedan:

  1. <h1> – Första rubriktexten (störst sökmotorindexerings vikt, såväl som första hierarkiska rubriktext)
  2. <h2> – Efterföljande underrubrik till <h1> (andra rubriktext i hierarkisk ordning)
  3. <h3> – Efterföljande underrubrik till <h2> (tredje rubriktext i hierarkisk ordning)
  4. <h4> – Efterföljande underrubrik till <h3> (fjärde rubriktext i hierarkisk ordning)
  5. <h5> – Efterföljande underrubrik till <h4> (femte rubriktext i hierarkisk ordning)
  6. <h6> – Efterföljande underrubrik till <h5> (sjätte rubriktext i hierarkisk ordning)

När man strukturerar upp textinnehåll för webben så anger man <h1> som ”huvud-rubrik”/första rubrik för en webbsida eller en del av webbsidans innehåll, därefter följer <h2> som underrubrik till det innehållet som <h1> började presentera.

Det är lite svårt att förklara med ord såhär via text, men om ni tänker er att ni har ett blogginlägg om detta här som ni just nu läser, så var min <h1> rubriktext (första rubriktexten)- den stora ni såg överst innan själva inlägget började: ”HTML Text & ”Inline” taggar – Radbrytning (&lt;br&gt;)…”.

Därefter kom <h2> taggar inuti inlägget för att dela upp inlägget i olika under-delar som t ex: ”Rubriker (och rubrikgruppering) (<hgroup> & <hX>)” <- det är en <h2> rubrik, underrubrik till vår <h1> rubrik.

Sedan längre ned kommer ni se en <h3> tagg som ytterligare delar upp <h2> området i sina egna under-områden där vi kommer skriva <hgroup> för att specifikt kunna gå igenom det elementet i det <h3> området.

Ursäktar att det är lite rörigt att beskriva, men jag hoppas ni ändå kan förstå hur jag menar :)

<h1> taggar är även de rubriker som ”väger mest” vid sökmotorindexeringen – så se till att ha bra texter i dessa! ;)

MDN’s referenssida för <hX> taggar skriver detta som beskrivning för taggarna:

Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces.

<hgroup> för gruppering av rubriktexter

Om där skulle komma ett tillfälle då ni finner er ha att t ex. där först finns en <h1> rubrik, direkt följt av en <h2> (och eventuellt en <h3> rubrik) exempelvis, så kan man semantiskt ”gruppera” dessa genom att omsluta dem med ett <hgroup> element för att indikera att det är en rubrikgrupp.

Notera dock(!) att detta är enligt MDN’s referenssida för hgroup – en ”experimentell teknologi”, vilket innebär att alla webbläsare ännu kanske inte har stöd för detta element!

MDN’s referenssida skriver även följande för en bra beskrivning av det tänkta syftet av <hgroup>:

It allows associating secondary titles, like subheadings, alternative titles, or even taglines, with the main heading, without polluting the outline of the document.

Paragrafer för textstycken (<p>)

Efter att vi lagt in våra rubriker för innehållet är det dags att semantiskt märka upp våra textstycken, så att vi kan lägga in innehållet för rubriktexterna. Detta gör vi med hjälp av våra <p> taggar för att representera paragrafer på webbsidor.

”Inkorrekt användning” av <p> taggen

Ett vanligt misstag jag tror många nybörjare gör som inte ofta tas upp, utan snarare kanske antas höra till ”sunt förnuft” är att inte ha endast en paragraf till hela textinnehållet som skall höra till en rubriktext. Många gör på det viset, och använder sig av radbrytningstaggar (<br />) för att strukturera upp sitt textinnehåll på webbsidor. Se nedan exempel:

 

Visuellt "måhända korrekt", men fortfarande väldigt dåligt och felaktigt* kodade paragrafer.

Visuellt ”måhända korrekt”, men fortfarande väldigt dåligt och felaktigt* kodade paragrafer.

Man kan säga att radbrytningarna ”lurar” dig till att tycka det är korrekt, men tar du bort de ser du att det inte ser rätt ut alls. Man ska kunna se att det är olika paragrafer utan radbrytningar!

Detta är inte hur <p> taggen var tänkt att användas. Självfallet kan man lägga in radbrytningstaggar inuti sina <p> taggar, men om man behöver lägga in fler än 2/3 st. radbrytningar direkt efter varandra för att indikera ”nytt stycke”, så är det lika bra att stänga <p> taggen istället och ”avsluta stycket” där, för att sedan för efterföljande text skapa ett helt nytt <p></p> spann för den texten! Se nedan korrekt exempel:

”Korrekt användning” av <p> taggen

Ordentlig representation av paragrafer via HTML koden!

Ordentlig representation av paragrafer via HTML koden!

Skönheten med <p> taggar stilmässigt (förutom att du får enorm frihet via CSS) är att webbläsare tilldelar oftast en ”standard-botten-marginal” till alla <p> taggarna, vilket gör att radbrytningstaggar är helt överflödigt när det gäller för att ”visa på” ett nytt stycke. Detta görs alltså automatiskt tack vare dessa standard stilar, som ni även kan se i ovan bild :)

Undantaget med radbrytningar inuti paragrafer

Det är OK att använda radbrytningar inuti paragrafer, så länge de används tillhörande ett stycke på korrekt vis, vissa stycken behöver bredas ut över mer än 1 enstaka sammanhängande text, då är detta OK, men detta måste ni känna efter själva vilket som är lämpligast :)

Fetstil med/utan semantisk innebörd (<strong> & <b>)

Detta gick vi igenom i föregående inlägg för semantisk HTML kodning för sökmotorindexering där vi visade hur learn.shayhowe.com visade på skillnaderna, och nämnde att <strong> var till för att indikera saker med ”strong importance” (väldigt viktigt), medan <b> var mer åt ”stylistically offset” (stilistisk fetstil) hållet.

Så försök tänka vilket som passar i just er situation, vilket som är lämpligast, och kör sen på det :)

Kursiv stil med/utan semantisk innebörd (<em> & <i>)

Även detta var en del som gick igenom i föregående inlägg för semantisk HTML kodning för sökmotorindexering där vi även här hänvisade till learn.shayhowe.com’s sida som beskrev <em> som ”stressed emphasis” (”stressad” betoning), medan <i> mer var ”alternative tone/voice” (alternativ klang i texten).

Även här- försök ha detta i åtanke när ni ska välja vilket som är lämpligast att använda för just er situation :)

Semantiskt understruket (<u>) och icke-semantiskt alternativ (<span> med CSS)

Inte förrän nyligen var det som jag förstod vad <u> egentligen är tänkt att användas för, och insåg att jag tidigare hade använt den med fel avsikt då jag antog att det var ”meningslöst semantisk understreck – endast visuellt”, fast så verkar ju inte fallet vara efter att ha läst på MDN’s referenssida för <u> taggen.

Tydligen var <u> borttagen från både XHTML såväl som HTML 4.01, men återintroducerad vid HTML5 med följande innebörd:

In HTML5, this element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelled.

Vilket typ innebär att såvida man inte skriver kinesiska, så är det vid felstavningar och liknande det är lämpligt att användas.

MDN’s referenssida rekommenderar även att man undviker användning av <u> där dess understrukna visuella utseende kan förvirras med länkar.

Icke-semantiskt alternativ för understruket med <span> & CSS

Om ni bara vill ha visuellt understruket, och inte nödvändigtvis ha någon specifik innebörd med er understrykning, så är det <span> taggen tillsammans med en klass eller ID, för att sedan via CSS ange ett attribut för att ge er <span> tagg det visuella understrukna utseendet (Mer om detta kommer senare gås igenom i inlägg om CSS-kodning).

Upphöjt med- och nedsänkt text (<sup> & <sub>)

Har ni någon gång funnit er i en situation där det hade varit behjälpligt att kunna göra som i t ex. Microsoft Office Word- där man kan ”nedsänka”, respektive ”upphöja” bokstäver/tecken/siffror för webbsidas innehåll? <sup> och <sub> finns tillgängliga för att hjälpa till med detta.

Praktiska exempel för när <sup> skulle kunna vara användbart är t ex. om ni skriver något textinnehåll där det förekommer area-måttenheter (m2) eller volym-måttenheter (m3) och liknande. Medan praktiskt exempel för <sub> istället hade kunnat vara om ni skriver kemiska beteckningar och hade behövt en korrekt presentation som t ex: H2O för vatten.

Båda dessa exemplen kodas på följande vis:

m<sup>2</sup> = m2
m<sup>3</sup> = m3

H<sub>2</sub>O = H2O

Kan vara användbart att känna till ;)

Radbrytning och sektionsindelning (<br /> & <hr />)

Behöver ni göra radbrytningar har ni alltid <br /> till ert förfogande för att få jobbet gjort :) 1 st. radbrytning går ned till nästföljande nya rad, medan 2 st. på varandra följande radbrytningar går ned 2 st. nya rader, vilket får det att presenteras som 1 rads mellanrum mellan innehållet före radbrytningarna, och efter radbrytningarna.

För MDN’s referenssidas beskrivning av <hr /> taggens syfte och funktion se nedan citat:

The HTML <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section). In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.

Visning av kod på webbsidor inline och i block (<code> & <pre>)

När ni vill markera kodsnuttar inuti texter (inline) så används <code>, medan:

<pre><code>
   code goes here
</code></pre>

…istället används för att presentera kod-stycken i ”blockform”.

Presentation av olika typer av citat på ens webbsida (<blockquote> & <cite> & <q>)

När jag gör citat så låter jag WordPress göra grovjobbet åt mig – även om det inte alltid är 100% semantiskt korrekt (tyvärr), därav har jag inte så mycket erfarenhet med dessa element, men anser ändå att det är värdefullt att ha kännedom om dem och känna till hur man använder dem, såväl som när.

learn.shayhowe.com skriver följande beskrivning om när vilket element bör användas, som jag själv anser beskriver det väldigt bra :)

  • <cite>: Used to reference a creative work, author, or resource
  • <q>: Used for short, inline quotations
  • <blockquote>: Used for longer external quotations

Kodexempel för respektives användning kommer nedan – citerat/inspirerat från learn.shayhowe.com:

<cite> för citering av kreativa verk

The <cite> inline element is used in HTML to specifically cite a creative work; the element must include either the title of the work, the author’s name, or a URL reference to the work.

<p>The book <cite><a href="http://www.amazon.com/Steve-Jobs-Walter-Isaacson/dp/1451648537">Steve Jobs</a></cite> is truly inspirational.</p>

<q> för dialog citering

The <q> element semantically indicates quoted dialogue or prose and shouldn’t be used for any other purposes.

By default, the browser will insert the proper quotation marks for us.

<p>Steve Jobs once said, <q>One home run is much better than two doubles.</q></p>

<blockquote> för flerrads citering från extern källa

To quote a large block of text that comes from an external source and spans several lines, we’ll use the <blockquote> element. The <blockquote> is a block-level element that may have other block-level elements nested inside it, including headings and paragraphs.

<blockquote> 
   <p>&#8220;In most people&#8217;s vocabularies, design is a veneer. It&#8217;s interior decorating. It&#8217;s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.&#8221;
   </p>
</blockquote>

The cite attribute can be included on the <blockquote> element—in the same way that it was used on the <q> element earlier—to provide a citation reference to the quote in the form of a URL.

Inline-container för markering av specifika text-delar (<span>)

<span> elementet är väldigt användbart när ni vill tilldela CSS-stilar eller liknande till specifika delar av en text – detta görs då genom att omfamna ert specifika område med text ni önskar styla med <span> & </span>, se exempel nedan:

<p>Detta är en text där jag önskar styla ordet <span class="red">färg</span> med röd textfärg</p>

Som ni även kan se i ovan exempel på har jag angivit ett class attribut för <span> elementet, klass eller ID måste vi ange om vi vill kunna ”sikta” våra CSS-stilar till just det specifika <span> området i texten.

Highlightning av text (<mark>)

<mark> är ett element jag nyligen snubblade över, som kan vara användbart för referensindikering av speciella ord i en text, eller för att ”highlighta” söktermer i sökresultat.

Se MDN’s referenssida för <mark> och deras beskrivning nedan:

The HTML Mark Element (<mark>) represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched-for word.

Länkar på webbsidan (<a>)

Länkar har vi tidigare gått igenom, jag hänvisar er här till föregående inlägg om HTML’s länktagg <a>.

HTML tabeller kan vara användbart att känna till – speciellt när det gäller formatering av data på en webbsida.

Det populäraste för tabeller tror jag är att bygga en tabell med tabellrader (<tr> – table rows) och tabellkolumn-celler (<td> – table cell), dock finns där även möjlighet att lägga till en s.k. caption (rubrik) för en tabell, såväl som ”kolumnhuvud” så man kan definiera rubriktexter för vardera kolumn (<thead> & <th>). Utöver detta kan man även definiera specifikt vilken del av tabellen som är själva ”kroppen” av tabellen (<tbody>) för att bidra både semantiskt såväl som för lättläslighet för kodaren.

Där finns fler möjligheter med tabeller, däremot har jag aldrig fått mer användning för annat än egentligen tabellrader (<tr>), och tabellkolumn-cellerna (<td>) själv, så jag kommer som mest gå igenom dessa + <caption> såväl som <thead> & <th> samt <tbody> då dessa är de delar jag känner är viktigast och kan vara mest användbara att känna till och veta hur man i sådana fall använder dem. De andra delarna man kan använda för tabeller kan läsas mer om på nedanstående referenssida hos MDN.

Jag är säker på att grunderna som vi går igenom här räcker för de flesta tillfällen, och om ni nu skulle finna er i en situation där ni skulle behöva fler möjligheter kan ni alltid utforska ytterligare på MDN’s referenssida för HTML Tabeller.

Hur tabeller i HTML är uppbyggda

När vi tittar på hur man bygger tabeller i HTML så kan vi (som vi senare kommer visa) se att man först kodar själva behållaren som ska vara hela tabellen (<table>), därefter gör man taggar för att representera antalet rader man önskar ha (<tr>), och inuti dessa sen placeras tabellradernas celler (<td>) motsvarande hur många kolumner ens tabell skall ha.

Utöver dessa väldigt fundamentala delar för att bygga en HTML tabell, finns där tillskott man kan använda som utökar möjligheterna med att bygga HTML tabeller, den första värd att nämna av dessa tillskotten är då: <caption> taggen, som ska placeras direkefter själva <table> taggen när man kodar sin tabell.

Vad <caption> då gör är att låta den som kodar tabellen sätta en rubriktext som skall representera hela tabellens innehåll. Exempel på hur detta kodas kommer demonstreras längre ned i inlägget.

Efter detta har vi även möjlighet att ange ett s.k. <thead> område för vår tabell (direkt efter <caption> taggen i sådana fall (första faktiska tabellraden som inte är del av vanliga tabellraderna (<tr>))), <thead> fyller funktionen att låta den som kodar tabellen ange rubriktexter för vardera enskilda kolumn. <thead> verkar precis som en vanlig tabellrad (<tr>), fast står utanför de vanliga tabellraderna då den inte är del av själva tabelldatan.

Om vi nu har valt att utöka våra möjligheter med tabellen redan genom att använda <thead> kan vi lika bra fortsätta och definiera området där själva tabelldatan skall placeras genom att ange <tbody> direkt efter sluttaggen för vårt <thead> område (</thead>). <tbody> kommer då att omfamna all tabelldatan för tabellen.

Man kan även ha en s.k. ”tabellfot”, men det är inget jag någonsin har varken sett användas för webbaserade tabeller, och inte heller haft användning för själv, så detta kommer vi inte gå igenom i det här inlägget, vill ni veta mer om detta och annat gällande HTML tabeller, så kolla in MDN’s referenssida för HTML Tabeller som vi länkade till i ovan stycke.

Själva tabell-taggen <table>

Alltid när ni vill skapa en tabell i HTML, måste ni börja med att ange <table> taggen, denna kommer att fungera som en omfamnande tagg som kommer hålla/omfamna all tabell-relaterad HTML-kod.

Tidigare (HTML 4.01) var det populärt att via <table> taggen definiera s.k. cellpaddingcellspacingborders, m.m. som attribut, men alla dessa har numera blivit inaktuella, och blivit ersatta med CSS-kod för samtliga stilar man kan tänkas önskas istället.

<table>
</table>

Eventuell tabellrubrik för hela tabellinnehållet (<caption>)

Om man önskar ha en tabellrubrik som skall stå för hela innehållet man tänker ha i sin tabell, så måste första taggen som följer <table> vara: <caption> taggen, som då kommer att utgöra denne rubriktext för hela tabellens innehåll.

Den kommer då även sträcka sig över alla kolumners sammansatta bredd och förmodligen vara centrerad ovanför alla tabellcellerna (kan säkert ställas in via CSS annars).

Utöver detta får ni själva ”styla” rubriktexten ni väljer att placera där via CSS.

<table>
   <caption>Tabellrubrik här</caption>
</table>

Eventuella kolumnrubriker med <thead> (kolumnrubriks-raden/området) & <th> (kolumnrubriks-cellerna)

Man får sen välja själv också om man vill ha rubriker för de respektive kolumnerna man planerat att ha i sin tabell, t ex. om ni väljer att skapa en tabell med 3 kolumner, så kanske den första är ”förnamn”, den andra ”efternamn” och den tredje ”personnummer” exempelvis, då hade ni kunnat koda in dessa som rubriker för respektive kolumn på följande vis:

<table>
   <caption>Tabellrubrik här</caption>
   
   <thead> <!-- Tabellkolumn rubriks raden -->
      <th>Förnamn</th> <!-- Första kolumns rubrik cell -->
      <th>Efternamn</th> <!-- Andra kolumns rubrik cell-->
      <th>Personnummer</th> <!-- Tredje och sista kolumns rubrik cell -->
   </thead> 
</table>

Jag har skrivit att detta är eventuellt att ha med, då ni själva väljer om ni vill ha med detta eller ej :) Samma som med caption taggen!

Tabellens ”kropp” med tabelldata: <tbody>

Efter att man angett en <thead> kanske det endast är logiskt att definiera vart <tbody> skall vara (om vi har ett huvud definierat är det logiskt att definiera kroppen också) så man med enkelhet kan skilja på tabellhuvud och tabellkropp. Om man däremot inte har angivit <thead> anser jag själv att <tbody> kan vara lite överflödigt, det kanske ger extra semantisk betydelse för sökmotorindexerings bottarna, men för egen del brukar jag i sådana fall köra rent med bara tabellrader (<tr>) och tabellceller (<td>) utan <thead> och <tbody>. Dock om omvänt är det logiskt för mig att de likaväl kan hänga ihop. Se exempel nedan:

<table>
   <caption>Tabellrubrik här</caption>
   
   <thead> <!-- Tabellkolumn rubriks raden -->
      <th>Förnamn</th> <!-- Första kolumns rubrik cell -->
      <th>Efternamn</th> <!-- Andra kolumns rubrik cell-->
      <th>Personnummer</th> <!-- Tredje och sista kolumns rubrik cell -->
   </thead>

   <tbody>
   </tbody>
</table>

Tabellrader: <tr>!

Nu sen kommer vi in på de mer väsentliga delarna av att skapa HTML-tabeller, nämligen tabellraderna som kodas varje rad för sig, så önskar ni ha 5 st. rader i er tabell, så måste ni för-hand, eller via annat verktyg koda in 5 st. tabellrader via HTML-koden på följande sätt:

<table>
   <caption>Tabellrubrik här</caption>
   
   <thead> <!-- Tabellkolumn rubriks raden -->
      <th>Förnamn</th> <!-- Första kolumns rubrik cell -->
      <th>Efternamn</th> <!-- Andra kolumns rubrik cell-->
      <th>Personnummer</th> <!-- Tredje och sista kolumns rubrik cell -->
   </thead>

   <tbody>
      <tr></tr> <!-- Första raden -->
      <tr></tr> <!-- Andra raden -->
      <tr></tr> <!-- Tredje raden -->
      <tr></tr> <!-- Fjärde raden -->
      <tr></tr> <!-- Femte och sista raden -->
   </tbody>
</table>

Tabellkolumns celler: <td>!

Förutom tabellraderna så är tabellkolumnernas celler den andra viktigaste komponenten i samtliga HTML tabeller, det är i dessa som data för tabellen sen placeras, raderna är bara en typ av ”behållare” som håller samtliga celler för en specifik tabellrad. Varje cell som sen placeras på en specifik tabellrad kommer att utgöra en specifik kolumn. Tillsammans sen bildar alla tabellradernas samtliga tabellkolumns celler, samtliga kolumner i tabellen. Se nedan exempel för tydligare bild av hur allt hänger samman :)

<table>
   <caption>Tabellrubrik här</caption>
   
   <thead> <!-- Tabellkolumn rubriks raden -->
      <th>Förnamn</th> <!-- Första kolumns rubrik cell -->
      <th>Efternamn</th> <!-- Andra kolumns rubrik cell-->
      <th>Personnummer</th> <!-- Tredje och sista kolumns rubrik cell -->
   </thead>

   <tbody>
      <tr> <!-- 1:a raden -->
         <td></td> <!-- 1:a raden: Första kolumns 1:a tabellcell -->
         <td></td> <!-- 1:a raden: Andra kolumns 1:a tabellcell -->
         <td></td> <!-- 1:a raden: Tredje kolumns 1:a tabellcell -->
      </tr> 
      <tr> <!-- 2:a raden -->
         <td></td> <!-- 2:a raden: Första kolumns 2:a tabellcell -->
         <td></td> <!-- 2:a raden: Andra kolumns 2:a tabellcell -->
         <td></td> <!-- 2:a raden: Tredje kolumns 2:a tabellcell -->
      </tr> 
      <tr> <!-- Tredje raden -->
         <td></td> <!-- 3:e raden: Första kolumns 3:e tabellcell -->
         <td></td> <!-- 3:e raden: Andra kolumns 3:e tabellcell -->
         <td></td> <!-- 3:e raden: Tredje kolumns 3:e tabellcell -->
      </tr> 
      <tr> <!-- Fjärde raden -->
         <td></td> <!-- 4:e raden: Första kolumns 4:e tabellcell -->
         <td></td> <!-- 4:e raden: Andra kolumns 4:e tabellcell -->
         <td></td> <!-- 4:e raden: Tredje kolumns 4:e tabellcell -->
      </tr>
      <tr> <!-- Femte och sista raden -->
         <td></td> <!-- 5:e raden: Första kolumns 5:e tabellcell -->
         <td></td> <!-- 5:e raden: Andra kolumns 5:e tabellcell -->
         <td></td> <!-- 5:e raden: Tredje kolumns 5:e tabellcell -->
      </tr>
   </tbody>
</table>
HTML Tabeller Demonstration - kod + förhandsgranskning.

HTML Tabeller Demonstration – kod + förhandsgranskning.

När man ska använda HTML tabeller på en webbsida

HTML Tabeller brukar man säga skall användas för att formatera data i tabellform. De ska INTE användas för att bygga upp layouter för ens webbsida, det var för HTML 4.01 man gjorde detta, i dagsläget finns tillräckligt bra CSS-kodning som tar hand om detta. Därför bör man fokusera användning av HTML tabeller på att presentera data i tabellform!

Exempel på hur jag menar för när tabeller inte ska användas, är t ex. om du tänkt göra en ny webbsida där du gör hela den nya webbsidans layout med <table>, colspan, rowspan– för sammanslagning av tabellceller för att bygga upp layouten m.m.

Exempel på korrekt användning av tabeller är t ex. om du vill presentera excel data på en webbsida, eller liknande typ av data, då passar tabellform alldeles utmärkt :) Eller om du t ex. ska presentera en kundvagn för en Webbshops webbsida.

Tabelltips och tricks: Slå samman tabellceller med colspan och rowspan attribut

Där finns två attribut som går att använda till <td> taggen (såväl som <th> taggen) för tabellcellerna, och dessa används för att slå samman ”x” antal tabellceller så de tar upp samma utrymme som det ”x” antalet celler som slogs ihop annars hade gjort.

colspan attributet för sammanslagning av flera kolumner

Som ett exempel kan ni tänka er att vi har en väldigt basic tabell med 3 rader och 4 kolumner, låt säga då att jag vill att denne tabell skulle se ut som nedan bild demonstrerar:

Visuellt exempel för hur colspan attributet ter sig i praktiken.

Visuellt exempel för hur colspan attributet ter sig i praktiken.

Notera dock i ovan bildexempel att första raden nu har endast 3 tabellceller sammanlagt, vilket innebär att vi måste ha 3 st. tabellceller i koden(!) (där den andra tabellcellen har attributet colspan med värdet ”2” för att motsvara 2 cellers utrymme).

Man anger attributet colspan till den tabellcell där sammanslagningen skall börja, som ni ser i bilden ovan så gav vi colspan attributet till tabellcell #2 på första raden, och gav den attributvärdet ”2”, vilket innebar att den specifika tabellcellen skulle uppta 2 st. tabellcellers utrymme – och då sträcker den sig över kolumnerna då vi angav sammanslagning med colspan.

NOTERA(!) att om vi anger att en specifik tabellcell skall sträcka sig över 2 st. tabellcellers utrymme, så måste vi ta bort efterföljande cell(er) för att bibehålla antalet korrekta kolumner(!).

colspan attributet gör inte detta åt oss då vi kodar webbsidor och HTML-kod för hand, utan vi måste själva vara uppmärksamma på att räkna med colspan och rowspan attribut och få HTML-koden för tabellen att stämma överens med vad som blivit angivet.

Se nedan bild för att jämföra koden med resultatet:

HTML kod + förhandsgranskning av colspan för tabellcell #2 med värde av 2 cellers utrymme.

HTML kod + förhandsgranskning av colspan för tabellcell #2 med värde av 2 cellers utrymme.

rowspan attributet för sammanslagning av flera rader

Om vi istället har behov av att få flera stycken tabellrader att smälta samman, så använder vi oss utav attributet: rowspan, som fungerar i princip på exakt samma sätt som colspan fast för tabellrader. Se bild nedan för hur detta skulle kunna se ut:

 

Visuellt exempel som tydligt visar på behovet att själv som kodare kompensera för effekten av colspan respektive rowspan attributen!

Visuellt exempel som tydligt visar på behovet att själv som kodare kompensera för effekten av colspan respektive rowspan attributen!

Använda <col> och <colgroup> för att sätta gemensamma inställningar för tabellens kolumner

<col> och <colgroup> tror jag är många som kanske inte riktigt har koll på vad dessa gör, eller hur man använder dem (inte ens jag hade speciellt bra koll förrän för någon timma sedan då jag själv läste på om dessa lite noggrannare för att för er läsares skull, såväl som min egen – i detta inlägget bättre kunna förklara dessa och funktionen de fyller för HTML tabeller).

De är faktiskt oerhört användbara och löser en hel del ”styling dilemma” man senare annars kan få med CSS.

Jag hittade ett Youtube klipp som tydligt och på ett väldigt bra och lättabsorberat sätt demonstrerar hur man använder dessa taggarna för att utöka sina möjligheter och framtida styling via CSS för sina HTML tabeller: https://www.youtube.com/watch?v=Q8cPRnVIt20.

Jag kommer här nedan gå igenom i stort sett samma som youtubeklippet ovan gick igenom, och försöka förklara det så tydligt det bara går med MDN’s referenssidor för <col>, såväl som <colgroup> till hjälp :)

Komma igång med att använda <colgroup> och <col>

Det första ni behöver veta är att <colgroup> är ”huvud-taggen” som kan innehålla/representera en eller flera kolumner (via span attributet eller <col /> taggar), och den måste placeras direkt efter <table> taggen (har man valt att ha en <caption> så ska <colgroup> placeras efter <caption> taggen – men Måste vara innan <thead>). Man skulle kunna säga att <colgroup> liknas ”meta-data” för tabellen, och inte riktigt är del av själva tabellens innehåll. Funktionen <colgroup> och <col /> fyller är att hjälpa till att på ett bättre och smidigare sätt kunna tilldela stilar och andra ”inställningar” till specifika kolumner. Väldigt användbart!

Alternativet om man inte hade använt <colgroup> och <col /> hade varit att ange CSS-stilar till varje enskild tabellcell, vilket i längden blir ganska utmattande (tro mig)..

<colgroup> har ett attribut man kan använda istället för att placera <col /> taggar inuti <colgroup>, detta attribut är span, som låter en ange hur många tabellkolumner <colgroup> taggen skall påverka/gälla. Alternativt är att man anger <col /> taggar inuti <colgroup> taggen, där dessa sen då motsvarar de faktiska kolumnerna som existerar i er HTML tabell, dessa kan sen ges individuella och egna CSS-stilar på ett smidigt sätt via t ex. klasser eller ID:n :)

Ange antingen span attributet för <colgroup>eller <col /> taggar motsvarande kolumnerna ni önskar ange stilar (eller annat) till, inte både och! Notera även att er kod förmodligen inte kommer valideras som HTML5 om ni anger annat än klass/ID för <col /> taggarna, och egentligen behöver ni inte mer än så! För allting ni behöver göra med era kolumner kan anges via CSS – vi kommer gå igenom detta i senare inlägg :) Er kod kommer inte heller valideras verkar det som om ni för den delen anger en sluttagg till <col> (<col></col>) istället för att ange <col> enligt XML reglerna för stängning av ensamstående tagg (<col />). Ni kan testa själva i W3C HTML validator :)

<table>
   <caption>Tabellrubrik här</caption>

   <colgroup>
      <col class="firstColumn" />
      <col class="secondColumn" />
      <col class="thirdNLastColumn" />
   </colgroup>
   
   <thead> <!-- Tabellkolumn rubriks raden -->
      <th>Förnamn</th> <!-- Första kolumns rubrik cell -->
      <th>Efternamn</th> <!-- Andra kolumns rubrik cell-->
      <th>Personnummer</th> <!-- Tredje och sista kolumns rubrik cell -->
   </thead>

   <tbody>
      ...
   </tbody>
</table>

Slutkläm

Tabeller är som sagt väldigt användbart att känna till hur man skapar i HTML, och det är egentligen inte så svårt heller när man har en bra och översiktlig koll på alla delarna som utgör HTML tabeller. Och detta hoppas jag att det här inlägget kan ha försett er med :)

Prova på lite själva och experimentera med det jag visat ovan, kanske även med några av delarna som MDN’s referenssida gick igenom, och testa lägg in eget innehåll m.m. :)

Tills nästa inlägg-

Bilder är något av det vanligaste typen av innehåll förutom text som man brukar placera på sina webbsidor, de kan ge webbsidan ett proffsigare och ”fullare” intryck om det är bilder av rätt typ, på rätt plats :)

HTML’s bildtaggar känner ni säkert igen sedan tidigare: <img>, själv brukar jag använda 4 attribut (+ klass / ID) för mina bilder: src, width, height samt alt.

MDN’s referenssida för HTML bildtaggen <img> hittas här: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img.

Tankar kring bildformat att använda (.jpg, .png, .gif, etc.)

Jag brukar hålla mig till .jpg, .png, .gif när jag lägger upp bilder med <img> taggen på webbsidor, däremot säger MDN’s referenssida att antalet stödda bildformat är upp till webbläsaren som tolkar webbsidan – förutom de listade ovan finns ju även SVG (Scalable Vector Graphic (bibehåller alltid samma höga kvalitet)), samt BMP (Bitmap picture).

Några webbartiklar jag hittade som verkar ha intressant och bra information om detta område kan ses nedan för de av er som vill läsa på lite extra om detta:

Insikt .png bildformat (Portable Network Graphics – fonetiskt uttalat PING)

.png är ett jättestarkt bildformat i mån av snabb laddningstid, stöd för alpha-kanal (genomskinliga bilder – som GIF fast högre upplösning), bra kvalitet och har allt.

MEN(!) det är inte alltid som .png bildformatet stöds i alla webbläsare – därför kan man i t ex. Internet Explorer ibland behöva lägga in extra kod för att bidra med extra stöd (JavaScript).

Detta är nog enda nackdelen jag kan komma på. När .png bildformatet inte stöds så kan kvaliteten bli lidande och i värsta fall (typ i äldre Internet Explorer) så försvinner alphakanalen och blir vanlig vit färg istället.

.png brukar jag själv använda för t ex. logotyper, ikoner, transparenta bilder.

För att se lite kortfattat vad Wikipedia säger om .png som bildformat se nedan utdrag:

Portable Network Graphics (PNG) is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF), and is the most used lossless image compression format on the Internet.

PNG supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors), grayscale images (with or without alpha channel), and full-color non-palette-based RGB[A] images (with or without alpha channel). PNG was designed for transferring images on the Internet, not for professional-quality print graphics, and therefore does not support non-RGB color spaces such as CMYK.

PNG files nearly always use file extension PNG or png and are assigned MIME media type image/png

För webbläsarsupport se följande utdrag från Wikipedia:

Despite calls by the Free Software Foundation and the World Wide Web Consortium (W3C), tools such as gif2png, and campaigns such as Burn All GIFs, PNG adoption on websites has been fairly slow due to: late and buggy support in Internet Explorer, particularly regarding transparency.

PNG compatible browsers include: Apple Safari, Google Chrome, Mozilla Firefox, Opera, Camino, Internet Explorer 7 (still numerous issues), Internet Explorer 8 (still some issues), Internet Explorer 9 and many others. For the complete comparison, see Comparison of web browsers (Image format support).

Especially versions of Internet Explorer (Windows) below 9.0 have numerous problems which prevent it from correctly rendering PNG images.

Där kan ni ju se hur stora problem Internet Explorer haft och har med .png som bildformat.

Inkluderade även där lite länkar från Wikipedia utdraget som kan hjälpa skapa stöd för .png bilder om ni är ute efter sådant i tidigare versioner av Internet Explorer, såväl som länken till en jämförelsetabell där man lättare kan översiktligt se vilka webbläsare har vilket typ av stöd för .png som bildformat.

Var dock vaksamma på att även om där finns s.k. ”hack” för att fixa stöd för .png bildformat, så brukar detta fortfarande vara rätt så klumpigt och problematiskt och inte optimal lösning.

Insikt .jpg bildformat

.jpg formatet är ett jättestarkt bildformat när det gäller högupplösta och högkvalitativa bilder (mycket färger och mycket nyanser) – bör användas vid fotografier eller liknande.

Se följande artikel för mer insikt: https://css-tricks.com/when-to-use-jpg-and-when-to-use-gif/

Insikt .gif bildformat (Graphics Interchange Format)

Använd om bilden har fåtalet färger, ganska hårda och distinkta kanter, ev. alpha kanal för transparens, eller om ni har GIF animationer (PNG kan inte göra animationer).

GIF animationer (se hur man skapar dessa med hjälp av verktyg listade på Länkar-sidan) kan läggas in på webbsidor med <img> taggen.

Positionering av bilder bland innehållet för webbsidan

Angående positionering av bilder på en webbsida säger jag bara en sak: CSS.

All positionering utav bilder sker via CSS. Kommer skriva mer om detta i inlägg för CSS-kodning senare framöver :)

Klickbara bilder med länkar (<a>)

Ni har säkert besökt webbsidor där de haft ikoner/bilder som varit klickbara, detta kan göras genom att ersätta länktexten med en <img> tagg med bilden man önskar vara klickbar!

Det är egentligen väldigt enkelt. Enda anledningen att kanske överväga kompletterande text eller andra alternativ än bilder som länkar, är då bilders information inte är så lättupptaglig av sökmotorindexerings robotarna (se följande inlägg). Se nedan för hur en sådan bild-länk annars kan göras i HTML:

<a href="#" target="_blank"><img src="bilder/bildfil.jpg" width="150" height="150" alt="alternativ texten här" /></a>

Vid klickning av ovan länk så är det <a> taggens href (hypertext reference) attribut som bestämmer vart länken ska leda som för alla andra länkar, <img> taggens src attribut är som vanligt till för att indikera källan till bilden som skall visas.

Figure behållare med Figcaption för bilder med undertexter

Figure och figcaption är en ny tagg som kom med HTML5 och är väldigt populär att använda som bildbehållare och utifall man vill ha bildtexter till sina bilder.

Jag har hittat en jättebra och fin webbartikel hos HTML5Doctor.com, där de i detalj går igenom hur man använder <figure> och <figcaption>. Det var den artikeln som lärde mig hur man gjorde. Se nedan lista med dels den artikeln, såväl som MDN referenssidor för <figure> och <figcaption>:

Som ni säkert redan listat ut så är <figure> själva behållaren för en/flera bilder, medan <figcaption> hamnar inuti behållaren och utgör bildtexten för den ene/flera bilder(na) som ligger i <figure> behållaren.

Varken <figure> eller <figcaption> har några attribut direkt att använda, styling sker via CSS.

Dock är inte <figure> och <figcaption> begränsat till enbart <img> taggar, utan kan även användas till andra taggar. Det är heller inte alltid <figure> och <figcaption> är lämpligt att använda. För mer info om båda dessa påståendena se nedan citat från HTML5Doctor’s webbartikel om <figure> och <figcaption>:

No need to constrain your <figure>s to images and code examples. Other content suitable for use in <figure> includes audio, video, charts (perhaps using <canvas> or <svg>), poems, or tables of statistics.

It may not always be appropriate to use the <figure> element, though. For example, a graphic banner should not be marked up with<figure>. Instead, simply use the <img> element.

<figure> med 1 bild och utan <figcaption>

<figure>
   <img src="bilder/bildfil.jpg" width="150" height="150" alt="alternativ text för bild här" />
</figure>

<figure> med 1 bild och <figcaption>

<figure>
   <img src="bilder/bildfil.jpg" width="150" height="150" alt="alternativ text för bild här" />
   <figcaption>Här placeras sen bildtexten för bilden</figcaption>
</figure>

<figure> med flera bilder och <figcaption>

<figure>
   <img src="bild1.jpg" width="150" height="150" alt="alttext" />
   <img src="bild2.jpg" width="150" height="150" alt="alttext2" />
   <img src="bild3.jpg" width="150" height="150" alt="alttext3" />
   <figcaption>Bildtext för ovan 3 st. bilder placeras här</figcaption>
</figure>

Alla ovan exempel kan se förhandsgranskade i webbläsaren här

Praktiskt exempel och demo av figure och figcaption i HTML.

Praktiskt exempel och demo av figure och figcaption i HTML.

iFrames element är en inbäddnings-bar ram som har möjlighet att ladda in andra webbsidor och innehåll till en annan webbsidas <body> tagg. Jag har endast använt iFrames själv i allra första början av min karriär som webbdesigner/webbutvecklare, och då använde jag den till att bl. a. ladda in aftonbladets webbplats på min egen webbsida inuti en ram för mina besökare att läsa. ”i”:et i ”iFrame” står för inline vilket indikerar att elementet är en ram man kan lägga inline på sin sida bland annat innehåll.

iFrames kan alltså användas för att t ex. ladda in externa resurser, webbradios, eller annat. Dock(!), var vaksamma på att där brukar finnas bättre alternativ att använda än iFrames! De är i regel ganska klumpiga att jobba med.

För MDN’s referenssida för iFrame, se: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe.

Nedan ser ni ett utdrag från MDN’s referenssida som förklarar iFrames syfte och funktion lite i allmänhet:

The HTML Inline Frame Element (<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page.

3 attribut för iFrame att ha koll på – width, height, src

Efter att noga kollat igenom MDN’s referenssida själv har jag dragit slutsatsen att det egentligen bara finns 3 attribut för både HTML 4.01 såväl som HTML5, värda att ha koll på- sen finns där något som endast är för HTML5, som jag kommer nämna mer om senare som också kan vara användbara att känna till, men för nu så håller vi oss till dessa 3 attributen.

width och height attributet som ni säkert redan har gissat låter er ange en bredd för er iFrame på webbsidan. Attributvärdet för width såväl som height anges i pixlar.

src attributet är där ni anger vilken adress/resurs som skall bäddas/laddas in till iFramen på webbsidan. Värdet som anges till src attributet skall vara en URL. Detta innebär också att både globala såväl som lokala länkadresser är giltiga.

Ett HTML5 attribut för iFrame som fångar intresse – seamless

seamless attributet anpassar iFramen att matcha webbsidan den bäddades in i, genom att göra att länkar från iFramen öppnas i inbäddnings webbsidan istället för själva iFramen, gör att CSS-stilar för inbäddnings webbsidan har prioritet över iFramens egna CSS-stilar.

Syftet med attributet är helt enkelt att få iFramen att se ut på bästa sätt möjligt som om den är del av ursprungs webbsidan(!).

Exempel på hur seamless kan anges för iFrame taggen, se nedan:

<iframe width="500" height="350" src="https://www.aftonbladet.se" seamless></iframe> <!-- HTML5-->
<iframe width="500" height="350" src="https://www.aftonbladet.se" seamless="seamless"></iframe> <!-- XHTML -->

iFrame attribut för att referera till iFramen från CSS och annan kod

Självfallet kan ni fortfarande ange både klasser och ID för att kunna referera till iFramen från t ex. CSS eller annan kod.

Attribut som användes i HTML 4.01, men som inte(!) valideras av HTML5

Förr fanns attribut som frameborder och scrolling (HTML 4.01), som jag minns att jag själv använde för mina första webbsidor – dessa kunde då låta en ange om iFramen skulle ha en ram/kantlinje runt sig eller inte, samt vare sig iFramen skulle scrollas eller inte. Men de verkar inte längre vara aktuella (åtminstone inte om du kodar HTML5). Se nedan bild för bevis:

frameborder och scrolling attribut = no-go enligt HTML5 validering.

frameborder och scrolling attribut = no-go enligt HTML5 validering.

 

Praktiskt exempel iFrame – kod + resultat i webbläsare

<iframe width="500" height="350" src="https://www.aftonbladet.se">
   <p>Text here is for browser that does NOT support iFrames...</p>
</iframe>
Exempel på iFrame som laddar in aftonbladet.se på 500x350 yta på webbsida.

Exempel på iFrame som laddar in aftonbladet.se på 500×350 yta på webbsida.

När ska man använda iFrames idag?

Såhär på rak arm hade jag kunnat säga att jag förmodligen hade använt iFrames för att öppna och förhandsgranska PDF:er t ex. på en webbsida – användandet av iFrame brukar låta Adobes plugin förhandsgranska PDF:en direkt på sidan utan att besökaren behöver ”ladda ned och öppna” filen (även om detta görs fast av plugin i webbläsaren istället).

Och allmänt om jag hade velat ladda in externa resurser från andra domäner till min sida, tror jag iFrames hade varit bästa alternativet.

För ett kanske bättre och mer utförligt svar på StackOverflow.com, se: http://stackoverflow.com/questions/3797179/why-do-people-still-use-iframes#3797217.