برای قرار دادن عکس درون صفحات از تگ <img> استفاده می شود که دارای چند اتریبیوت مهم مانندsrc=” “، alt=” “ و title=” “ است (این تگ یک تگ منفرد بوده و نیازی به تگ بسته ندارد). اتریبیوت src نشان دهنده محل ذخیره سازی عکس مورد نظر است. توجه داشته باشید که حتما نام عکس همراه با پسوند آن نوشته شود مانند src=”myPicture.jpg” که پسوند jpg در انتهای نام عکس آمده است.
همان طور که مشاهده می شود، تصویر مورد نظر در مرورگر به نمایش درآمده است.



اتریبیوت alt=” “ از نظر سئو دارای اهمیت است و مقدار قرار گرفته در آن یک متن است که در صورت لود نشدن تصویر (به هر علتی)، این متن به جای تصویر نمایش داده می شود. بهتر است که مقدار قرار داده شده در این اتریبیوت متن کوتاهی باشد که بهترین توصیف را از آن عکس ارائه می کند.
همان طور که مشاهده می شود، زمانی که مرورگر به هر دلیلی قادر به نمایش تصویر نباشد، متن قرار داده شده درون اتریبیوت alt را نشان خواهد داد.



مقدار قرار داده شده درون اتریبیوت title=” “ هنگامی به نمایش در می آید که ماوس روی عکس ثابت مانده باشد (هاور شده باشد).
همان طور که مشاهده می شود با نگه داشتن ماوس بر روی تصویر، مقدار قرار داده شده درون اتریبیوت title به کاربر نشان داده می شود.



برای تبدیل کردن یک عکس به لینک کافی است تا تگ <img> را بین تگهای <a></a> قرار دهید. نکته قابل توجه آن است که بهتر است (بخوانید واجب است) برای عکسها ابعاد مشخص تعریف کرد که برای این کار سه روش وجود دارد. روش اول آن است که از اتریبیوت های width=” “ و hight=” “ استفاده شود (این روش دیگر منسوخ شده است).
روش دوم آن است که از استایل دهی in-line (که در CSS با آن بیشتر آشنا می شوید) استفاده شود.
روش سوم آن است که عرض را به صورت استایل CSS درون فایل style.css یا هر فایلی که برای CSS تهیه کرده اید قرار دهید (بهترین روش استایل دهی).