Det finns en skillnad mellan att infoga en bild på en webbsida och göra bilden till en klickbar länk. Även om HTML är liknande, en länk bygger på en ankare elementet medan en bild använder img element. En bild kan dock bygga bo i ett ankare, vilket gör den bilden klickbar som en länk.
Infoga bilder i ankarelement
En vanlig användning av en bildbaserad länk är webbplatsens logotyp, som sedan länkas tillbaka till webbplatsens hemsida.
Så här placerar du en icke-klickbar bild i HTML-dokumentet:
För att förvandla bilden till en länk, lägg till ankarlänken, öppna ankarelementet före bilden och stäng ankaret efter bilden. Den här tekniken liknar hur du länkar text, förutom att du istället för att slå in orden, omsluter du bilden:
När du lägger till den här typen av HTML på din sida ska du inte placera några mellanslag mellan ankartaggen och bildtaggen. Om du gör det kommer vissa webbläsare att lägga till små fästingar bredvid bilden, vilket ser udda ut.
Logotypen fungerar nu också som en hemsidaknapp, vilket är ganska mycket en webbstandard idag.
Observera att vi inte inkluderar några visuella stilar, som bildens bredd och höjd, i vår HTML-markering. Vi lämnar dessa visuella stilar till CSS och upprätthåller en ren separation av HTML-struktur och CSS-stilar.