De HTML IMG-tag regelt het invoegen van afbeeldingen en andere statische grafische objecten binnen een webpagina. Deze algemene tag ondersteunt verschillende verplichte en optionele kenmerken die uw vermogen om een boeiende, op afbeeldingen gerichte website te ontwerpen, rijker maken.
Een voorbeeld van een volledig gevormde HTML IMG-tag ziet er als volgt uit:
Vereiste IMG-tagkenmerken
src="/pad/naar/afbeelding.jpg"
Het enige attribuut dat u nodig hebt om een afbeelding op een webpagina weer te geven, is de src attribuut. Dit kenmerk identificeert de naam en locatie van het afbeeldingsbestand dat moet worden weergegeven.
alt="Beschrijving van afbeelding"
Om geldige XHTML en HTML4 te schrijven, moet de alt attribuut is ook vereist. Dit kenmerk wordt gebruikt om niet-visuele browsers te voorzien van tekst die de afbeelding beschrijft. Browsers geven de alternatieve tekst op verschillende manieren weer. Sommige geven het weer als een pop-up wanneer u uw muis over de afbeelding houdt, andere geven het weer in eigenschappen wanneer u met de rechtermuisknop op de afbeelding klikt, en weer andere geven het helemaal niet weer.
Gebruik de Alt-tekst om aanvullende details over de afbeelding te geven die niet relevant of belangrijk zijn voor de tekst van de webpagina. Maar onthoud dat in schermlezers en andere browsers met alleen tekst de tekst in lijn met de rest van de tekst op de pagina wordt gelezen. Gebruik om verwarring te voorkomen beschrijvende alt-tekst die (bijvoorbeeld) zegt: 'Over webdesign en HTML' in plaats van alleen 'logo'.
De alt tekst is ook essentieel voor SEO (Search Engine Optimization). De bots die zoekmachines, zoals Google, gebruiken om de inhoud op sites te verkennen, kunnen geen afbeeldingen 'zien'. Ze vertrouwen op de alt tekst om te bepalen wat er op de pagina staat.
In HTML5, de alt attribuut is niet altijd vereist, omdat je a. kunt gebruiken onderschrift om er meer beschrijving aan toe te voegen. U kunt dit kenmerk ook gebruiken om een ID aan te geven die een volledige beschrijving bevat:
aria-descriptionby="Beschrijving van afbeelding"
Alt-tekst is ook niet vereist als de afbeelding puur decoratief is, zoals een afbeelding bovenaan een webpagina of pictogrammen. Maar als je het niet zeker weet, voeg dan alt-tekst toe voor het geval dat.
Maatkenmerken
breedte = "500"en.
hoogte = "500"Afhankelijk van uw ontwerp, gebruikt u de. hoogte en. breedte
Over het algemeen wilt u dat de afbeeldingsgrootte wordt ingesteld in uw CSS. Vaker wel dan niet, zal dat het resultaat zijn van de afmetingen van de bovenliggende container van een afbeelding. Deze aanpak zorgt voor de meeste flexibiliteit bij het aanpassen aan verschillende schermformaten. Er zijn echter nog steeds gevallen waarin u afbeeldingsafmetingen wilt opgeven als HTML-kenmerken.
Andere nuttige IMG-kenmerken
title="Beschrijvende naam afbeelding"Het attribuut is een globaal attribuut dat op elk kan worden toegepast. HTML-element. Bovendien, de. titel
De meeste browsers ondersteunen de titel attribuut, maar ze doen het op verschillende manieren. Sommige geven de tekst weer als een pop-up, terwijl andere deze in informatieschermen weergeven wanneer de gebruiker met de rechtermuisknop op de afbeelding klikt. U kunt de titel attribuut om aanvullende informatie over de afbeelding te schrijven, maar reken er niet op dat deze informatie ook verborgen is of zichtbaar. Gebruik dit zeker niet om zoekwoorden voor zoekmachines te verbergen. Deze praktijk wordt nu bestraft door de meeste zoekmachines.
usemap=""en.
ismap=""Deze twee attributen stellen client-side () en server-side (ISMAP) in. afbeeldingskaarten
longdesc="Een meer gedetailleerde beschrijving van uw afbeelding"De. lange beschrijving
Verouderde en verouderde IMG-kenmerken
Verschillende attributen zijn nu verouderd in HTML5 of verouderd in HTML4. Voor de beste HTML moet je andere oplossingen vinden in plaats van deze attributen te gebruiken.
grens = "3"
uitlijnen = "links"Met dit kenmerk kunt u een afbeelding in de tekst plaatsen en de tekst eromheen laten lopen. U kunt een afbeelding rechts of links uitlijnen. Het is afgekeurd ten gunste van de. float CSS-eigenschap
hspcace="10"en.
vspace = "10"De. hspace en. vspace attributen voegen horizontaal witruimte toe ( hspace) en verticaal ( vspace
lowsrc="/pad/naar/lowres.jpg"De. lowsrc attribuut biedt een alternatieve afbeelding wanneer uw afbeeldingsbron zo groot is dat deze extreem langzaam wordt gedownload. U heeft bijvoorbeeld een afbeelding van 500 KB die u op uw webpagina wilt weergeven, maar het downloaden van 500 KB zou lang duren. Je maakt dus een veel kleinere kopie van de afbeelding, misschien in zwart-wit of juist extreem geoptimaliseerd, en zet die in de. lowsrc
De lowsrc attribuut is toegevoegd aan Netscape Navigator 2.0 aan de tag. Het maakte deel uit van DOM-niveau 1 maar werd vervolgens verwijderd van DOM-niveau 2. Browserondersteuning voor dit kenmerk is summier, hoewel veel sites beweren dat het door alle moderne browsers wordt ondersteund. Het is niet verouderd in HTML4 of verouderd in HTML5 omdat het nooit een officieel onderdeel was van een van beide specificaties.
Vermijd het gebruik van dit kenmerk en optimaliseer in plaats daarvan uw afbeeldingen zodat ze snel worden geladen. De snelheid van het laden van pagina's is een cruciaal onderdeel van goed webontwerp, en grote afbeeldingen vertragen pagina's enorm - zelfs als u de lowsrc attribuut.