kaxigt.com

HTML står för Hypertext Markup Language och är ett märkspråk som de flesta webbsidor och applikationer är byggda med. Det är stommen, strukturen eller skelettet, kan man säga. Till presentationen/utseendet av sidan använder vi CSS. Hypertext är den text som definierar länken mellan andra textstycken och webbsidor medan ett märkspråk är en serie märken som talar om för webbservrarna vilka stilar och strukturer dokumentet är uppbyggt av.

Grundläggande HTML

HTML-element är byggstenarna i en webbsida. En tagg talar om för webbläsaren var ett element börjar och slutar medan ett attribut beskriver egenskaperna hos ett element. Vi ska nu titta lite närmare på vad ett attribut innebär och flertalet attribut som ofta förekommer.

HTML-attributen

Det krävs två parametrar i ett attribut, ett namn och ett värde. Dessa definierar egenskaperna för elementet och placeras inuti elementets öppningstagg.

Namnparametern tar namnet på egenskapen vi vill tilldela elementet och värdet tar egenskapsvärdet eller omfattningen av egenskapsnamnen som kan justeras över elementet. Varje namn som har ett värde måste skrivas inom citattecken.

Vi repeterar anatomin av ett html-element!

Vi har öppningstaggar, innehåll (content) och stängningstaggar.

<p>lite text</p>

Så var sätter vi in attributet?

De nedanstående exemplen innehåller olika och fler attribut i elementet. Vi tar och börjar med paragraph p (stycket). Attributet är style, egenskapen är color och värdet på egenskapen sätter vi till red. Ge akt på att egenskapen och värdet har omslutande citattecken.

<p style="color:red;">lite text</p>

Output bli då så här: lite text. Observera att det bara är content (innehållet) i ett element som blir synligt.

Bildattribut

Vi kan bygga ut med fler attribut i ett och samma element så låt oss kika på detta exempel.

<img src="solrosor.jpg" alt="Solrosor" width="300px" height="200px"/>

Attributen här är src (source/källa), alt (beskriver bildens innehåll), width (bredd) och height (höjd).

Värdet är solrosor.jpg, Solrosor, 300px och 200px.

Länkattribut

När vi gör en länk så använder vi alltid först a (anchor/ankare) sedan attributet href (Hyper Text Reference) för att ange sökvägen till målet (target), men vi lägger även till attributet title. Se nedan.

<a href="sökvägen till målet" title="vad länken innehåller eller namnet på sökvägen">Målet_för_länken</a>

Om jag länkade hit till kaxigt så skulle hela länkelementet se ut som följande:

<a href="kaxigt.com" title="kaxigt.com">kaxigt.com</a>

Man kan också lägga till attributet target=”_blank” som talar om att länken ska öppnas i ett nytt webbläsarfönster. Då ser det ut så här.
<a href=”kaxigt.com” title=”kaxigt.com” target=”_blank”>kaxigt.com<a>

Har du hört talas om länk-attributen noopener, noreferrer eller nofollow?

<a href="kaxigt.com" title="kaxigt.com" target="_blank" rel="noopener">kaxigt.com</a>

<a href="kaxigt.com" title="kaxigt.com" rel="nofollow">kaxigt.com</a>

<a href="kaxigt.com" title="kaxigt.com" rel="noreferrer">kaxigt.com</a>

Det här är tre rel-attribut som är kända för dem som använder WordPress men de är inte specifika för just WordPress utan kan och bör även användas på vanliga webbplatser. Jag ska här förklara varför.

rel-noopener

Rel-noopener samverkar med attributet target=”_blank” och används när man länkar till andra (hem)sidor som ska öppnas i nya webbläsarfönster.

Syftet med noopener-attributet är att förhindra externa skadliga webbplatser från att komma åt webbplatsen där länken finns, det vill säga din webbplats. Det här är speciellt utformat för att bekämpa skadliga nätfiskeattacker (phishing) som kallas omvänd tabnabbing.

Det finns JavaScript-funktioner som tillåter att en ny flik får kontroll över dess referensfönster. Det är en typ av hackingattack som bäst beskrivs på följande sätt: sidan som är länkens mål, ofta kallad en underordnad sida, kan innehålla skadlig kod. Den koden kan användas för att skicka användare till en kopia av sidan där länken kommer från, i detta fall av din sida.

Så stället för originalet tilldelas den överordnades sida användare med hjälp av window.opener.location.assign() till en falsk överordnad sida. Då kan den falska föräldrasidan användas för att skaffa känslig användarinformation eller sprida skadlig programvara.

rel-noreferrer

Attributet rel-noreferrer har ett liknande syfte som rel-noopener. Det hindrar en webbläsare från att samla in information om den överordnade sidan (även känd som en länkhänvisning) och skicka den till en underordnad sida. I huvudsak döljer noreferrer information om hänvisningsadressen när en länk klickas.

Även om detta inte har någon effekt på din SEO kan det påverka din analys eftersom rel-noreferrer döljer länkhänvisningsinformationen, då kan analysverktygen inte avgöra var en användare kom ifrån. Det betyder att du inte vet någonting om trafiken från din inkommande källa.

rel-nofollow

Attributet rel-nofollow används för att ge sammanhang om länkningssidans relation till länkmålet. Rel-nofollow används för att signalera till sökmotorerna att de inte ska följa länkarna som har dessa attribut och därför inte skicka någon länkbehörighet till länkmålet. Speciellt Google kan dock välja att ignorera detta med att följa länken och/eller skicka vidare länkbehörighet.

Sökmotorerna letar efter och överväger nofollow-attributet när du följer en länk på din webbplats. Dessa länkar påverkar inte sökmotorrankningen för måladressen eftersom Google inte överför PageRank eller ankartext över dem. Faktum är att Google inte ens genomsöker nofollowed-länkar.

Här avslutas Vad är HTML del 2. Jag föreslår att du bekantar dig med översiktstabellerna om vanliga html-attribut samt vanliga html-definitioner innan du går vidare med Vad är HTML del 3.

Lycka till!