search

Adding Images to a Webpage

To add images to a webpage in HTML, you use the <img> tag. This tag is self-closing and doesn't require an ending tag. The most important attributes for the <img> tag are:

  • src: Specifies the path to the image.

  • alt: Provides alternative text for the image if it cannot be displayed.

  • width and height: Define the dimensions of the image (optional).

Here’s how to add images to your webpage:

hashtag
Basic Structure

<img src="path-to-image.jpg" alt="Description of image">

hashtag
Example 1: Adding a Local Image

If the image is saved in the same folder as your HTML file:

<img src="myImage.jpg" alt="A description of the image">

hashtag
Example 2: Adding an Image from a URL

You can also load an image directly from the internet by providing its URL:

<img src="https://example.com/image.jpg" alt="A description of the image">

hashtag
Example 3: Specifying Image Size

You can set the image’s width and height (in pixels) like this:

hashtag
Example 4: Responsive Images

To make an image responsive (automatically scale with screen size), you can use CSS or the style attribute in HTML:

This will ensure the image adjusts according to the size of the viewport (e.g., mobile screens).

hashtag
Example 5: Image with a Link

To make the image clickable (linking to another webpage), wrap it inside an anchor <a> tag:

hashtag
Putting it All Together

Here's a full example:

hashtag
Keywords

HTML, Hypertext Markup Language, Tags, Elements, Attributes, Head, Body, Paragraph, Heading, Title, Meta, Link, Image, Anchor, Hyperlink, List, Table, Form, Input, Button, CSS, Class, ID, Inline, Block, Div, Span, Script, Styles, Font, Color, Background, Margin, Padding, Border, Doctype, HTML5, Video, Audio, Canvas, SVG

PreviousWorking with LinksNextEmbedding Videos and Audio

Last updated