How to Insert Image in HTML
Web structure starts with solid HTML. Learn how How to Insert Image in HTML contributes to accessible and semantic web pages in the tutorial below.
To display an image on a webpage in an HTML document, we need to adhere to the following set of instructions. By following these steps, we can seamlessly include an image within the document.
To begin, the initial step involves entering the Html code into a text editor or accessing an already existing Html file in the text editor where we wish to include the image.
<!Doctype Html>
<Html>
<Head>
<Title>
Insert an Image
</Title>
</Head>
<Body>
Hello World! <br>
Hello User! <br>
How are You?
</Body>
</Html>
Step 2: Next, position the cursor at the desired location for inserting the image. Proceed by entering the vacant <img> tag at that specific point.
<!Doctype Html>
<Html>
<Head>
<Title>
Insert an Image
</Title>
</Head>
<Body>
Hello World! <br>
<img>
Hello User! <br>
How are You?
</Body>
</Html>
Step 3: Next, we need to include the "src" attribute within the image tag. Therefore, insert the src attribute inside the <img> tag.
<!Doctype Html>
<Html>
<Head>
<Title>
Insert an Image
</Title>
</Head>
<Body>
Hello World! <br>
<img src="https://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image">
Hello User! <br>
How are You?
</Body>
</Html>
Step 4: Next, we need to specify the location of the image we wish to include. Insert the path of the image into the src attribute. If the image is saved in the identical directory as our HTML file, then use the following path:
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> <br>
If the image is saved in a different directory, provide the accurate file path for the image to enable the browser to access it effortlessly, as detailed below.
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
In the case that our image is hosted online, we have the option to include the image using a URL, as demonstrated in the screenshot below.
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
Step 5: Next, we have the option to define the dimensions of the image by utilizing two distinct attributes, as demonstrated in the code snippet below:
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="500" height="200">
Step 6 involves saving the Html file or Html Code in the text editor.
<!Doctype Html>
<Html>
<Head>
<Title>
Insert an Image
</Title>
</Head>
<Body>
Hello World! <br>
<img src="https://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image" width="400" height="200"> <br>
Hello User! <br>
How are You?
</Body>
</Html>
The result of the code above can be observed in the screenshot displayed below:
