ToMotion AI logo
Menu
Back to gallery

Public AI explainer video

Add an Image in HTML with <img />, src, alt, and sizing

To add an image in HTML, you use the <img /> tag. It’s a self-closing tag, meaning it doesn’t need a separate closing tag like </img>. The most...

Prompt

Source idea used to generate this video.

🗣️ સ્પીકર (વોઇસઓવર / સ્ક્રીન શેર): "સૌપ્રથમ, HTML માં ઈમેજ ઉમેરવા માટે આપણે <img /> ટેગનો ઉપયોગ કરીએ છીએ. આ એક Self-closing tag છે, એટલે કે તેને અલગથી ક્લોઝ કરવાની જરૂર નથી પડતી. <img /> ટેગમાં બે સૌથી મહત્વના attributes હોય છે: src (Source): આમાં આપણે ઈમેજ ફાઈલનું નામ અથવા URL આપીએ છીએ. જો ઈમેજ તમારા પ્રોજેક્ટ ફોલ્ડરમાં જ હોય, તો આપણે અહીં તેનું નામ જેમ કે photo.jpg લખીશું. alt (Alternative Text): જો કોઈ કારણસર ઈમેજ લોડ ન થાય અથવા સ્લો ઈન્ટરનેટ હોય, તો અહીં લખેલો ટેક્સ્ટ યૂઝરને દેખાશે. આ SEO માટે પણ ખૂબ જ જરૂરી છે." 💻 સ્ક્રીન પર કોડ: HTML <!-- HTML માં સાદી Image ઉમેરવા માટે --> <img src="profile.jpg" alt="મારો પ્રોફાઇલ ફોટો" width="300"> "અહીં તમે width અને height પણ સેટ કરી શકો છો, પરંતુ તેને યોગ્ય રીતે હેન્ડલ કરવા માટે આપણે CSS નો ઉપયોગ કરવો વધુ સારો રહેશે."

Narration

Narration used to create this video.

Video narration

To add an image in HTML, you use the <img /> tag. It’s a self-closing tag, meaning it doesn’t need a separate closing tag like </img>. The most important attribute is src. Src tells the browser where the image file is—either a file name like profile.jpg or a full URL. Next is alt. Alt is the text description shown if the image can’t load or the internet is slow, and it’s also important for SEO. Here’s a simple example: <img src="profile.jpg" alt="મારો પ્રોફાઇલ ફોટો" width="300">. You can set width and height right in HTML, but for most layouts, it’s better to control image sizing with CSS so your design stays consistent and responsive.