kaxigt.com

Jag skriver om webben för webben

Vad är HTML? Del 2 – attribut och element

Postad: 18 april 2022 | HTML-guider | No Comments
Lästid: 4 minuter
Det här är del 2 i en omarbetad artikelserie. Här tar jag upp HTML-attributen och betydelsen av dessa.
Guiderna till höger bygger på denna artikelserie. De är utformade för en stegvis inlärningskurva. Vill du få den bästa lärandeprocessen rekommenderar jag Dig därför att läsa dem efter att denna artikelserie är avslutad.

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.

Alla HTML-sidor har flera HTML-element som består av en uppsättning taggar < > och attribut. Alla HTML-element kan ha attribut.

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

Man använder ett attribut för att ge extra och ytterligare information om ett element.

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!

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.

Du minns väl att <img> är ett tomt element som är självstängande?

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>
När man använder länkattributet title så skriv aldrig in ”läs mer”. Det ska man inte heller skriva i länkad brödtext enligt god praxis. Längre fram i guiderna får du läsa mer om detta.

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>

Utelämna ALDRIG alt-attributet för bilder eller title-attributet på länkar. Alt och title-attributen ger information om elementet. God praxis inom UX (user experience) innebär just att ge bästa tillgänglighet och användbarhet till besökarna. Det medverkar dessutom till att bli en väl utformad webbsida och sökmotorerna ger högre rank.

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.

Attributet rel-noopener är en teknisk säkerhetsfunktion för webbplatsen och på sidan som länken finns.

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.

Praxis numer är att låta länkarna öppnas i samma webbläsarfönster som de befinner sig i. Rel-noopener påverkar inte SEO. Tvärtom. Eftersom den förbättrar sidans säkerhet så påverkar det sökmotorerna positivt!

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.

Både rel-noreferrer och rel-noopener hjälper till att förbättra din webbplats säkerhet.

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.

Utifrån ett SEO-perspektiv så påverkar därför nofollow sökmotorerna eftersom de inte rankar länkar som använder attributet nofollow.

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!