De HTML IMG-taggen styr infogningen av bilder och andra statiska grafiska objekt på en webbsida. Den här gemensamma taggen stöder flera obligatoriska och valfria attribut som ger rikedom till din förmåga att utforma en engagerande, bildfokuserad webbplats.
Ett exempel på en fullformad HTML IMG-tagg ser ut så här:
Obligatoriska IMG-taggattribut
src = "/ path / to / image.jpg"
Det enda attributet du behöver för att få en bild att visa på en webbsida är src attribut. Detta attribut identifierar namnet och platsen för den bildfil som ska visas.
alt = "Beskrivning av bilden"
För att skriva giltiga XHTML och HTML4, alt attribut krävs också. Detta attribut används för att förse icke-visuella webbläsare med text som beskriver bilden. Webbläsare visar den alternativa texten på olika sätt. Vissa visar det som ett popup-fönster när du placerar musen över bilden, andra visar det i egenskaper när du högerklickar på bilden och andra visar det inte alls.
Använd alt text för att ge ytterligare detaljer om bilden som inte är relevanta eller viktiga för texten på webbsidan. Men kom ihåg att i skärmläsare och andra webbläsare endast text kommer texten att läsas in med resten av texten på sidan. För att undvika förvirring, använd beskrivande alt-text som säger (till exempel), "Om webbdesign och HTML" istället för bara "logotyp".
De alt text är också viktigt för SEO (sökmotoroptimering). Bots som sökmotorer, som Google, använder för att utforska innehållet på webbplatser kan inte "se" bilder. De litar på alt text för att avgöra vad som finns på sidan.
I HTML5, den alt attribut krävs inte alltid eftersom du kan använda en rubrik för att lägga till mer beskrivning till den. Du kan också använda detta attribut för att ange ett ID som innehåller en fullständig beskrivning:
aria-describedby = "Beskrivning av bilden"
Alt-text krävs inte heller om bilden är rent dekorativ, till exempel en grafik högst upp på en webbsida eller ikoner. Men om du inte är säker, inkludera alt-text för alla fall.
Storleksattribut
width = "500"och.
höjd = "500"Beroende på din design använder du. höjd och. bredd
Generellt sett vill du att bildstorlek ska ställas in i din CSS. Oftare kommer det att vara resultatet av måtten på en bilds överordnade behållare. Detta tillvägagångssätt möjliggör mest flexibilitet vid anpassning till olika skärmstorlekar. Det finns dock fortfarande fall där du kanske vill ange bilddimensioner som HTML-attribut.
Andra användbara IMG-attribut
title = "Beskrivande bildnamn"Attributet är ett globalt attribut som kan tillämpas på valfri. HTML-element. Dessutom har. titel
De flesta webbläsare stöder titel attribut, men de gör det på olika sätt. Vissa visar texten som ett popup-fönster medan andra visar den på informationsskärmar när användaren högerklickar på bilden. Du kan använda titel attribut för att skriva ytterligare information om bilden, men räkna inte med att denna information är dold eller synlig. Du bör absolut inte använda detta för att dölja sökord för sökmotorer. Denna praxis straffas nu av de flesta sökmotorer.
usemap = ""och.
ismap = ""Dessa två attribut ställer in klientsidan () och serversidan (ISMAP) bildkartor
longdesc = "En mer detaljerad beskrivning av din bild"De. longdesc
Föråldrade och föråldrade IMG-attribut
Flera attribut är nu föråldrade i HTML5 eller föråldrade i HTML4. För bästa HTML bör du hitta andra lösningar istället för att använda dessa attribut.
border = "3"
align = "left"Detta attribut låter dig placera en bild inuti texten och få texten att flyta runt den. Du kan justera en bild till höger eller vänster. Det har avskaffats till förmån för. flytande CSS-egendom
hspcace = "10"och.
vspace = "10"De. hspace och. vspace attribut lägga till vitt utrymme horisontellt ( hspace) och vertikalt ( vspace
lowsrc = "/ path / to / lowres.jpg"De. lägre attribut ger en alternativ bild när din bildkälla är så stor att den laddas ned extremt långsamt. Du kan till exempel ha en bild på 500KB som du vill visa på din webbsida, men 500KB tar lång tid att ladda ner. Så du skapar en mycket mindre kopia av bilden, kanske i svartvitt eller bara extremt optimerad, och lägger den i. lägre
De lägre attribut lades till Netscape Navigator 2.0 i taggen. Det var en del av DOM-nivå 1 men togs sedan bort från DOM-nivå 2. Webbläsarstöd har varit skissartat för detta attribut, även om många webbplatser hävdar att det stöds av alla moderna webbläsare. Det är inte föråldrat i HTML4 eller föråldrat i HTML5 eftersom det aldrig var en officiell del av någon specifikation.
Undvik att använda detta attribut och istället optimera dina bilder så att de laddas snabbt. Sidans laddningshastighet är en viktig del av bra webbdesign och stora bilder saktar ner sidorna enormt - även om du använder lägre attribut.