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:
|
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:
|
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 tillrelattributet 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 attributetcharsetför att låta<meta>taggen representera teckenkodning som skall användas för webbsidan.content– Definierar innehållet associerat mednameattributet 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>taggenscontentattribut, värdet av<link>taggenstitleattribut för den stilmall som är tänkt att agera standard stilmall, ellertitleattributet 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 dettahttp-equivattributvärde antalet sekunder tills webbsidan skall uppdateras.refreshkan 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 attributetcharsetellerhttp-equivredan är satta för aktuella<meta>element. Detta definierade namn associeras sedan med content attributet för<meta>taggen. Lista på godkändanameattributvä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 tillnoarchive, 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örwidth, 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-widthi porträttläge,device-heighti 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 medminimum-scalevärdet för att åstadkomma något)minimum-scale– ett positivt nummer mellan 0.0 och 10.0 som definierar motsvarigheten tillmaximum-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>