av ·0 kommentarer

Step 1: Suggested File & Folder Structure

MainFolder
   -file:   index.php
   -file:   index.html (base-template file)
   -folder: incl/ (for includes)
      -file:   incl/header.php
      -file:   incl/footer.php
      -file:   incl/config.php (PHP settings)
      -file:   incl/functions.php (PHP functionality for all pages)
   -folder: css/
      -file:   css/mainstyles.css
   -folder: img/

Step 2: Creating the base-template file (index.html)

This is where we build our website as a normal .html file with header, body and footer sections (the whole layout in a single file)!

Later on this will in turn be used as our base template that we will disect into 3 separate pieces:

  • header.php for header code
  • index.php for body and page-specific code
  • footer.php for endpage and footer code

Our base-template file will be very basic and simple and can be seen below:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>This will be our first Dynamic website using PHP dynamic templating techniques :)</title>

   <!-- Make browser understand this is responsive site and not in need of 'pinch-zoom-ins' - Commented for now- remove if u want to use this--> 
   <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->

   <!-- Below is our main stylesheet for the page -->
   <link href="css/mainstyles.css" rel="stylesheet" type="text/css" media="all" />

   <!-- Below adds a 'shortcut-icon' a.k.a. 'bookmark/favorite icon'-->
   <link rel="shortcut icon" href="img/favicon.ico">

   <!-- Below allows for addition of this particular page's description for SEO -->
   <meta name="description" content="" />

   <!-- Below Meta-tags tells SE-Indexation spiders to index page and follow pagelinks of site -->
   <meta name="robots" content="index, follow" />
</head>
<body>
<div id="mainContainer"> <!-- Wrapper for page -->
   <header>
      <img src="img/logo.jpg" width="200" height="60" alt="" />
      <h1>Our homepage</h1>
      <p>- Slogan for this website</p>
   </header>
   <nav>
      <ul>
         <li><a href="#" target="_top">Home</a></li>
         <li><a href="#" target="_top">Portfolio</a></li>
         <li><a href="#" target="_top">About us</a></li>
         <li><a href="#" target="_top">Contact</a></li>
      </ul>
   </nav>
   <article>
      <h1>Content area for site is here...</h1>
      <p>And this is where all the content for the individual pages will end up.</p>
   </article>
   <footer>
      <p>&copy; Copyright <?php echo date('Y'); ?>. All rights reserved.</p>
      <hr />
      <a href="#" target="_top">Sitemap</a>
      <a href="#" target="_top">FAQ</a>
      <p>Phone: 070X-XX-XX-XX &bull; Email: test-[at]-testsite.org &bull; Address: Fictionstreet 32B, CA, USA</p>
   </footer>
</div> <!-- End of Wrapper for the page -->
</body>
</html>

Step 3: Process breakdown of how this is going to work

Okay, so the idea is to divide this website that we just created into different pieces (header, content and footer).
We do this by analyzing which parts will be recurring throughout every single subpage of the website.

For example: We can be pretty sure that all the code belonging to the ”header” section (including the main menu) will be available on every single subpage- as will the footer code!

This means that we can take all this code and place it in separate files.
In our case we call these files header.php & footer.php and have them placed in a folder named: incl, which is short for ”includes”.

Why do we do this then? Well the idea is to later include these separated external files, which together contains all the code for the entire page layout!

In this way we ”re-create” the website section by section by including these different parts into the ”main-subpage-file” – such as index.php for the mainpage, and contact.php for the contact page for example, etc.

Step 4: Start disecting & dividing the different sections of the website

###- header.php - can be seen below
###################################
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>This will be our first Dynamic website using PHP dynamic templating techniques :)</title>

   <!-- Make browser understand this is a responsive site and not in need of 'pinch-zoom-ins' - Commented for now- remove if you want to use this --> 
   <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->

   <!-- Below is our main stylesheet for the page -->
   <link href="css/mainstyles.css" rel="stylesheet" type="text/css" media="all" />

   <!-- Below adds a 'shortcut-icon' a.k.a. 'bookmark/favorite icon' -->
   <link rel="shortcut icon" href="img/favicon.ico">

   <!-- Below allows for addition of this particular page's description for SEO -->
   <meta name="description" content="" />

   <!-- Below Meta-tags tells SE-Indexation spiders to index page and follow pagelinks of site -->
   <meta name="robots" content="index, follow" />
</head>
<body>
<div id="mainContainer"> <!-- Wrapper for page -->
   <header>
      <img src="img/logo.jpg" width="200" height="60" alt="" />
      <h1>Our homepage</h1>
      <p>- Slogan for this website</p>
   </header>
   <nav>
      <ul>
         <li><a href="#" target="_top">Home</a></li>
         <li><a href="#" target="_top">Portfolio</a></li>
         <li><a href="#" target="_top">About us</a></li>
         <li><a href="#" target="_top">Contact</a></li>
      </ul>
   </nav>
   <article>
-----------------------------------
###- footer.php - can be seen below
###################################
   </article>
   <footer>
      <p>&copy; Copyright <?php echo date('Y'); ?>. All rights reserved.</p>
      <hr />
      <a href="#" target="_top">Sitemap</a>
      <a href="#" target="_top">FAQ</a>
      <p>Phone: 070X-XX-XX-XX &bull; Email: test@testsite.org &bull; Address: Fictionstreet 32B, CA, USA</p>
   </footer>
</div> <!-- End of Wrapper for the page -->
</body>
</html>
###################################

Now as you can probably can see, we included the ”<article>” in the header.php file, while we included the ”</article>” in the footer.php file, but totally ”ignored” the content of <article> in both files.

We did this because we plan ahead!

Every subpage of the website will probably have the need for a ”general content-container” to place that particular page’s contents in – so we make the <article> container itself become recurring, while the content of the container- is not.

So perhaps you’re asking yourselves now whats next? Well, we need to put the website back together again after having disected it- thats our next move- including the header.php & footer.php in the index.php for the websites main-subpage.

###- index.php - can be seen below:
###################################
<?php include('incl/header.php'); ?>

<!-- Here comes the HTML content specific to this Mainpage (will be placed inside of <article> in header.php since that is the last piece of code included with the header.php file) -->

<?php include('incl/footer.php'); ?>
###################################

Now the website will have been recreated in index.php, since it first includes header.php (and all the code this file holds), then the HTML-content for that specific subpage, and last but not least- the footer.php file and the code that file holds.

Step 5: config.php & functions.php Explained

Okay, so you might be wondering now that we seem to be done already why we made 2 extra files in the incl/ folder?

Well this is simply for the purpose of ”looking & planning ahead”.

In the future the idea is that the config.php file will hold configuration code for the entire page (settings if you will). While the functions.php file will hold useful PHP functionality – which later can be included into the header.php to be available for all of the respective subpages.

And another thing worth pointing out- the footer.php will be able to hold all of the JavaScript code file inclusions that you want to load at the end of all subpages!

Step 6: Adding dynamic SEO content (title & meta-desc) for each individual page

There are tons of more fun and powerful/useful stuff you can do with a Dynamic website template like this in PHP!

For example if we want unique <title> texts for each individual subpage, we only replace our current HTML content in the header.php file between <title> & </title> with something like:
<?php echo $subPageTitleVariable; ?>

Then all thats left to do is to within index.php Above where we include header.php -> place:

$subPageTitleVariable = "our specific subpage &lt;title&gt; text";

And this would be available for the header.php file to make use of- seeing as how we placed it Above where header.php was included within the file and PHP works vertically through the code from top->bottom. Where top-placed code will be available for bottom-placed code in the code file/page. See below example:

###- index.php - can be seen below:
###################################
<?php $subPageTitleVariable = "This is our dynamic index page specific title text"; ?>
<?php include('incl/header.php'); ?>

<!-- Here comes the HTML content specific to this Mainpage (will be placed inside of <article> in header.php since that is the last piece of code included with the header.php file) -->

<?php include('incl/footer.php'); ?> 
###################################

This method and technique can also be utilized- and comes in very handy for On-Page SEO- where you need to specify specific meta-descriptions for each individual subpage!

As one last thing worth to mention is that I recommend you to start the config.php file by placing:

<?php error_reporting(-1); ?>

To report ALL Possible (PHP) errors on the page for debugging (recommended to be turned off when publish page – 0 as value instead of -1).

Also- include config.php Above header.php inside the index.php file, so that the Error Reporting is active for the Entire page.

Good Luck with all your Coding out there now ;)

Hope you learned something new and/or get some new ideas for your next projects ;) Was a pleasure helping out and hopefully inspiring to new creativity :) Enjoy!

av ·0 kommentarer

Hej igen! :)

I det här inlägget tänkte jag ta upp och gå igenom samtliga taggar som nämndes i detta inläggs rubriktext, både översiktligt och i detalj! Jag kommer börja med en tabell någorlunda liknande till den jag hade för tidigare inlägg om HTML behållare, där jag listade själva taggen, en översiktlig beskrivning (+ ev. MDN citat), tillsammans med länk till MDN’s referenssida.

Översiktlig beskrivning av elementen vi kommer gå igenom i detta inlägg

<base> <base> taggen kan placeras i <head> området av en webbsida för att specificera detaljer om hur länkar på en webbsida skall uppföra sig. MDN’s referenssida för <base> taggen
<link> <link> taggen låter dig länka in externa resurser att kopplas samman med ens webbsida – och webbdokumentet man befinner sig i. Se MDN citat nedan:

The HTML Link Element (<link>) specifies relationships between the current document and an external resource.

This Element is most used to link to style sheets.

 MDN’s referenssida för <link> taggen
<meta> <meta> taggen representerar meta-data information som ingen av de andra <head> meta-data taggarna som gås igenom i det här inlägget kan representera. För vilken typ av meta-data <meta> taggen kan representera se nedan citat från MDN’s referenssida:

According to the attributes set, the kind of metadata can be one of the following:

  • if the name is set, a document-level metadata, applying to the whole page;
  • if the http-equiv is set, a pragma directive, i.e. information normally given from the webserver on how the webpage should be served;
  • if the charset is set, a charset declaration, i.e. the charset used for the serialized-form of the webpage; HTML5
 MDN’s referenssida för <meta> taggenMetaTags.info referenssida
<style>  <style> elementet innehåller styling information för ett webbdokument, eller delar av ett webbdokument, innehållet förväntat brukar vara CSS stilmalls kod. MDN’s referenssida för <style> taggen
<script>  <script> elementet är till för att ”bädda in”/referera till körbara script på HTML dokumentsidor. MDN’s referenssida för <script> taggen
<noscript> <noscript> definierar en sektion på webbsidan med HTML kod som skall visas om scripting är avstängt i webbläsaren eller om script typen ej stöds för besökaren. MDN’s referenssida för <noscript> taggen

 

<base> – med syfte att specificera allmänna detaljer för relativa/lokala länkar på webbsidan

Personligen har jag aldrig använt detta element på någon av mina egna webbsidor, när man kollar på dess MDN referenssida så ser man även att de lagt till en liten notis som säger ”I behov av ett tekniskt omdöme”, vilket säger mig att man kanske bör överväga att undvika/planera sina sidor så man slipper ett behov av att använda <base> taggen. Jag tror inte man behöver oroa sig om man inte använder den, dels då jag själv inte behövt det tidigare, samt då det är svårt att se vilket syfte och funktion användningen av elementet skulle ha för webbsidor i allmänhet – i alla fall med dess href attribut.

Jag hade kunnat se ett visst värde dock med att kunna specificera att samtliga länkar på en webbsida skulle öppnas på ett visst sätt (_blank, _top, eller så), men annars förstår jag inte riktigt poängen med att specificera href delen av <base> elementet, då man oftast på webbsidor behöver nå fram till ”x” antal olika undermappar på webbservern för att få access till alla de olika materialen som bygger upp webbsidan.

En annan sak man kan läsa om på MDN’s referenssida som jag var lite skeptisk till var det här med att <base> taggen skall lämnas öppen och inte stängas – antar att detta har något att göra med att den ska påverka alla efterföljande <a> element, men för mig går detta emot vad jag lärt mig, och känns allmänt slarvigt.

<link> – för länkning av externa resurser till ett webbdokument

<link> taggen är en väldigt populär och mycket använd tagg att ha i sina <head> delar av webbsidor, mestadels då den låter utvecklare länka in externa resurser till webbdokument, som t ex. CSS style sheets.

De förmodligen vanligaste attributen för <link> elementet är som följer:

  • href – Absolut/relativ länkadress som leder till den externa resursen man önskar länka in till webbdokumentet.
  • rel – Specificerar relationen mellan inlänkade resursen och själva webbdokumentet, vanligaste värdet för detta attribut är ”stylesheet”, men relationsvärdena kan anges med ”mellanrums-separerad-lista” med värden från Link types. Ett vanligt relationsvärde till rel attributet för t ex. utskrifts CSS stilar, brukar vara ”alternate stylesheet” <- notera mellanrummet mellan ”alternate” och ”stylesheet”.
  • media – Låter utvecklaren ange (med hjälp av CSS Media Queries (gås igenom mer i detalj i inlägg framöver)) vilket media som den länkade resursen skall påverka – t ex. om den inlänkade stilmallen endast påverkar skärmar, eller utskrift, osv.
  • type – Detta attribut används för att definiera vilken typ av innehåll som länkas till med <link> taggen, vanligast vid länkning till CSS stilmallar är att man använder type-värdet: ”text/css” vilket då indikerar att typen av innehåll som länkas till är Cascading Style Sheet.

<meta> – för representation av meta-data som ingen annan <head> tagg kan representera

Många av er som tidigare sysslat med on-page sökmotoroptimering känner säkert igen <meta> taggen, men faktum är att detta är inte det enda användningsområdet för <meta> taggen.

Följande attribut existerar för <meta> taggen:

  • charset – i HTML5 introducerades attributet charset för att låta <meta> taggen representera teckenkodning som skall användas för webbsidan.
  • content – Definierar innehållet associerat med name attributet för <meta> elementet.
  • http-equiv – definierar ett värde som kan ändra server/webbläsares beteende.
    • http-equiv värde: default-style – Definierar vilken stilmalls kod som skall vara standard att använda för webbsidan. Definieras genom att ange i <meta> taggens content attribut, värdet av <link> taggens title attribut för den stilmall som är tänkt att agera standard stilmall, eller title attributet av <style> blocket som skall agera standard stilar för sidan. (Se MDN referenssida för mer detaljer – länk hittas i översta tabell)
    • http-equiv värde: refresh – Om content attributet innehåller ett positivt integer värde (heltals värde) så anger detta http-equiv attributvärde antalet sekunder tills webbsidan skall uppdateras. refresh kan också användas för att vidarebefordra besökare till en annan URL efter ”x” antal sekunder genom att första ange antalet sekunder som en positiv integer i content attributet för <meta> taggen, följt av texten ;url= varpå där sedan följer URL:en som skall vidarebefordras till – kod exempel på detta kommer visas nedan :)
  • name – Definierar dokument-nivås meta-data namn, skall inte användas om attributet charset eller http-equiv redan är satta för aktuella <meta> element. Detta definierade namn associeras sedan med content attributet för <meta> taggen. Lista på godkända name attributvärde för <meta> taggen se nedan:
    • author – Låter utvecklaren definiera författaren till dokumentet.
    • description – Innehåller en kort och sammanfattad beskrivning av innehållet på webbsidan – läs mer i sökmotoroptimerings inlägget för <meta> taggar.
    • generator – Innehåller text som indikerar programmet som byggde webbsidan.
    • keywords – Innehåller en/flera textsträngar separerade med kommatecken (,), relevanta ord associerade med webbsidan.
    • creator – Definierar namnet på skapren av webbdokumentet, kan även vara namnet för en institution, om flera skapare av webbsidan skall flera <meta> taggar användas!
    • googlebot – Synonym för robots, men följs endast av Googles indexeringsrobotar.
    • publisher – Definierar namnet av den som publicerade webbsidan/dokumentet.
    • robots – Definierar önskvärt beteende utvecklaren av sidan föredragit från samarbetsvilliga sökmotorindexerings robotar, robots namnet kan ha en hel del värden separerade med kommatecken (,), se nedan lista:
      • index – tillåter sökmotorindexerings robotarna att indexera sidan.
      • noindex – hindrar robotar från att indexera sidan.
      • follow – tillåter sökmotorindexerings robotarna att följa länkar som kan hittas på webbsidan.
      • nofollow – hindrar robotarna från att följa länkarna på webbsidan.
      • noarchive – hindrar sökmotorindexerings robotar från att ”cacha” webbsidan (spara ned dess innehåll – berör: Google & Yahoo).
      • nosnippet – hindrar visningen av beskrivning på sökresultat sidan hos en sökmotor för ens egen webbsida (Google).
      • noimageindex – hindrar sidan från att dyka upp som referens till en indexerad bild (typ Google bildsökning).
      • nocache – synonym till noarchive, fast för Bing.
    •  slurp – synonym till robots, fast för Yahoos indexerings robot.
    • viewport – Indikerar ledtrådar för den initiala viewport (mer om detta i inlägg framöver) storleken (mest applicerbart för mobila enheter som besöker webbsidan). Se värden i listan nedan:
      • width – Värde anges i sådana fall antingen med en positiv integer (heltal) som motsvarar pixlar för viewporten (oftast rektangulärt område av datorgrafik som för tillfället kollas på av besökaren), eller som texten ”device-width”.
      • height – Samma som för width, textalternativet blir dock istället ”device-height”.
      • initial-scale – ett positivt nummer mellan 0.0 och 10.0 – definierar förhållandet mellan t ex. enhetens bredd och viewport bredden (device-width i porträttläge, device-height i landskapsläge)
      • maximum-scale – ett positivt nummer mellan 0.0 och 10.0 som definierar maximala zoom-värdet för sidan (måste vara större eller lika med minimum-scale värdet för att åstadkomma något)
      • minimum-scale – ett positivt nummer mellan 0.0 och 10.0 som definierar motsvarigheten till maximum-scale – minimala zoom-värdet.
      • user-scalable – booleskt värde: yes/no – standardvärdet är ”yes”, om satt till ”no” kommer besökare inte kunna komma att zooma på webbsidan.

Nedan kan ni se några användningsexempel av <meta> taggen:

<!-- Define UTF-8 charset in HTML5 -->
<meta charset="utf-8">

<!-- Redirect to Google.se after 3 seconds -->
<meta http-equiv="refresh" content="3;url=http://www.google.se">

<!-- Instruct cooperative bots NOT to index the page -->
<meta name="robots" content="noindex, nofollow">

* Notera att MDN’s referenssida nämner att man inte ska stänga <meta> taggen då det är ett ”void element” – är inte helt säker på vad detta innebär, men void metoder i programmering brukar vara saker som ”utförs utan att returnera något”.

* Notera att endast indexerings bottar som är samarbetsvilliga kommer att följa reglerna utsatta i <meta> taggens name attributvärde ”robots”, e-post spammare eller annat kommer förmodligen inte följa sådana regler. Vill man undvika bandbredds konsumtionen av att indexeringsrobotar besöker ens webbsida t ex. om man inte önskar att få den indexerad överhuvudtaget, så kan man istället använda en robots.txt fil (kommer skriva ett dedikerat inlägg om dessa framöver), eller som komplement till <meta> taggens name attributvärde ”robots”.

<style> – för tilldelning av stil information till ett-/delar av ett webbdokument

<style> elementet tror jag flest känner till som on-page CSS kod tilldelning till ett specifikt webbdokument, i CSS brukar man dock föredra att använda extern stilmall av flexibla skäl- såväl som att slippa ”kladda ned” HTML dokument med CSS-stilmalls kod. Hålla Stilar, Semantik/uppmärkning och beteende separerat helt enkelt – brukar anses vara bästa praktiken.

Tillgängliga attribut till <style> elementet kan ses listade nedan:

  • type – Används för att definiera stilmalls språket med en specifik MIME typ , om ingen skulle vara definierad så är standard ”text/css” (den antar att stilmalls språket är CSS).
  • media – Samma som för ovan <link> attribut så kan här anges Link type attributvärden, men om inget angivits, så sätts standard till ”all media”.
  • disabled – Om detta attribut är satt så inaktiveras stilarna från att bli tillagda till dokumentet.

Där fanns fler attribut, men dessa är de enda 3 attributen jag själv har tidigare använt (de få gångerna jag faktiskt haft behov av att använda <style> taggen överhuvudtaget).

Där finns ytterligare ett attribut dock kallat scoped som var till för om <style> block skulle bli applicerade på föräldrar element inuti <body>, dock tyckte jag att man i sådana fall lika gärna kunde använda ”inline” CSS-stilar genom style attributet för HTML elementen.

Exempel på användning av <style> elementet – se nedan:

<!-- Jag gillar att skriva ut detta även om det är satt som standard om icke angivet, för tydlighetens skull -->
<style type="text/css"> 
body {
   background-color: #0f0;
   font-family: arial, sans-serif;
   font-size: 12px;
   line-height: 1.5em; /* 150% of the currently used font-size - good typography praxis */
}
</style>

<script> – inhämtning av körbar script kod från externa källor eller direkt på webbdokuments sidan

<script> taggen används oftast för att inkludera JavaScript’s kod till webbsidor, för att sköta beteende av webbsidor och bidra till en rikare besökarupplevelse.

Där finns 2 st. attribut man bör ha koll på när man jobbar med <script> taggen för HTML dokument:

  • type – attributet hjälper att identifiera vilket scripting språk som src attributet länkar till/vilket scripting språk som scriptet är kodat med.
  • src – kan ange en URI (se förklaring av skillnader mellan URI, URL och URN i denna stackoverflow forumtråd)  till ett externt script istället för att ange script-koden direkt på sidan mellan <script> start-taggen och </script> slut-taggen.

Exempel på type attributvärden (MIME types) hade kunnat vara: text/javascript, text/ecmascript, application/javascript, andapplication/ecmascript.

Man skulle kunna säga att där finns 2 typer av användningar för <script> taggen, antingen script-kod direkt på sidan, eller inhämtat utifrån. Se nedan kod exempel:

<!-- Implementering av externt javascript dokument -->
<script src="javascript.js"></script>

<!-- JavaScript kod direkt på HTML-sidan -->
<script type="text/javascript">
   /*
      JavaScript put into here...
   */
</script>

<noscript> – HTML-kod att visa om scripting/script-typ ej stöds i besökares webbläsare

Har personligen inte sysslat så mycket med scripting ännu för webbsidor, så det har inte blivit av att använda denne tagg speciellt mycket, dock kan jag förstå dess värde med tanke på funktionen den fyller.

Är ju superbra att ha på sin sida som alternativ-innehåll utifall scripting skulle vara avstängt i besökares webbläsare eller om script-typen ej stöds, tänk er själva om ni har en webbsida med mycket JavaScript, då hade kanske besökaren inte kunnat se någonting överhuvudtaget i värsta fall, dock med hjälp av <noscript> taggen hade man som utvecklare kunnat förmedla värdefull information till sin besökare – utifall script är avstängt eller liknande.

Kodexempel nedan:

<noscript>
<!-- Reference link to site version non-based on Scripting -->
<p>Du verkar ha inaktiverat (eller saknar stöd för-) JavaScript som vi använder på sidan, vänligen klicka <a href="http://www.homepage.se/no-js" target="_top">här</a> för att gå till en icke-JavaScript baserad version av webbsidan.</p>
</noscript>

av ·0 kommentarer

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 (h1–h6 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.

av ·0 kommentarer

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>.

av ·0 kommentarer

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 direkt efter 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. cellpadding, cellspacing, borders, 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-