How To Add Caption For Image In Html

Accept y'all ever heard that people think just 20% of what they read, but eighty% of what they see? While the exact percentages are debated, the basic idea isn't: It'southward easy for people to learn and process information visually.

That's why most websites utilize images, and why it'southward important to include images on your own site. Images aid brand your content more informative, engaging, and memorable. In add-on to improving the visitor feel, they can also help boost your organic search traffic.

If y'all apply a website edifice platform similarCMS HuborWordPress, only click the image icon in your toolbar, select an image from your file director, and insert information technology. If yous don't employ a architect, you lot can still easily add together images to your website. You lot just demand to know someHTML. Allow'southward walk through the process below.

Download Now: Free HTML & CSS Hacks

How to Insert an Image in HTML

To insert an prototype in HTML, use the epitome tag and include a source and alt attribute. Like any other HTML element, you'll add images to the body section of your HTML file.

The syntax looks like this: <img src="URL" alt="descriptive text">

The HTML image element is an "empty chemical element," meaning it does non have a closing tag. Different elements similar paragraph that consist of an opening and a closing tag with content in between, an prototype specifies its content with attributes in the opening tag.

Compare the following lines of lawmaking to meet the deviation betwixt a paragraph and an image:

                                          <p>This is a paragraph.</p>
                      <img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt="an creative person's rendition of a black pigsty in space">

Notice the ii attributes in the paradigm element above, src and alt. Permit'due south discuss both of these important attributes next.

The img src Attribute

An image element must always have a src (source) attribute, which contains the image URL or file path. Otherwise, the browser will not know what to render. Permitted prototype file types will depend on the browser that loads the page, but all browsers permit you to identify common formats like .jpeg, .png, and .gif, too equally .svg.

In the code example to a higher place, the source is a full hyperlink — this is because the image is being fetched from another website. If you want to place an image stored on your server, yous can use the prototype file path without the website proper noun or protocol. For example, if the image is located in a subfolder stored in the aforementioned identify as your HTML file, your image element can await more like this:

                                          <p>This is a paragraph.</p>
                      <img src="/csz/news/800/2017/theoreticala.jpg" alt="an artist'due south rendition of a black hole in space">

... in this case,"csz" would be a binder located in the same directory as your HTML file.

The img alt Attribute

While a browser can render an image without the alt aspect, information technology's considered a best practice to include this attribute. That's because this attribute contains image alt text.

Image alt text is of import for a few reasons. First, it volition appear in place of an image if the image fails to load on a user's screen. Second, it helps screen-reading tools describe images to readers with visual impairments who might take trouble understanding the image without it.

Tertiary, image alt text allows search engines to better crawl and rank your website. Google Images — non Google Search, Google Image Search — is a major search engine on its ain, and some other way people can observe your website. Providing images with descriptive alt text tin help you rank for your target keywords and bulldoze traffic to your site. In 2019, HubSpot did exactly that, leading to a 25% year-over-year growth in organic traffic that came from web and image search.

The img style Attribute

You might as well see a style aspect inside an <img> tag containing the width and height of the paradigm. Specifying the width and height tin help prevent the web folio from flickering while the epitome loads. Here's how the code might expect with these boosted attributes:

                                          
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt="an artist'due south rendition of a black pigsty in infinite" style="width:400px;height:200px;">

Image inserted below heading and paragraph in HTML file

Information technology's important to notation that you can also specify the size of an image using internal or external CSS, over inline CSS. To learn the difference between these iii types of CSS, come across our guide on how to add together CSS to HTML.

The img width and top Attributes

The width and elevation of an image can also be specified in pixels with separate width and summit attributes, like so:

                                          <img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt="an artist'due south rendition of a black hole in space" width="400" acme="200">

This volition produce the same result equally the prototype to a higher place, where the way attribute was used. The primary difference betwixt these methods is that using split width and style attributes volition tell the browser how much space to salvage for the image, which may result in smoother loading (though this volition depend on your page layout, ultimately).

How to Insert a Background Prototype in HTML

If you'd like to set an image as the background of a spider web folio or an HTML element, rather than simply inserting the image onto the page, yous'll need to use the CSS background-image holding. This CSS property replaced the background-image attribute in previous versions of HTML. It's much more flexible and predictable than the HTML attribute — and however piece of cake to utilise.

To ready the value of background-image, you lot have to apply the following syntax: url(' ');

Between the single quotation marks, yous'll put the image URL or file path.

How to Insert a Background Image on a Page

To starting time, let's say you want to set an image as the background of the entire page. In this case, you would employ CSS to the torso element. Using a CSS selector, yous tin can ascertain the background-image property in the head section of your HTML file or in an external stylesheet. For this demo, we'll utilise the same prototype as above and change the text color to white and so we can run across it.

Hither's the CSS:

                                          
body {
    groundwork-epitome: url('https://scx1.b-cdn.internet/csz/news/800/2017/theoreticala.jpg');
    color: #FFFFFF;
}

Here's the HTML:

                                          
<h2>Background Image</h2>
<p>The groundwork prototype is specified in the body element.</p>

Here'southward the effect:

Setting background image of the entire web page in HTML

Looks great! Merely what happens if the image is smaller than the browser? In that instance, it will tile itself by default as shown below.

Setting background image of the body element in HTML means it will repeat by default

To forestall this from happening, you can use the background-repeat belongings and set up it to no-repeat.

Hither'southward the CSS:

                                          
trunk {
    background-epitome: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-repeat: no-repeat;
    color: #FFFFFF;
}

The HTML stays the same. Hither's how it would expect on the front-end now:

Setting background image of body element in HTML to not repeat

You've solved the repeating problem, but now you have a lot of extra whitespace beneath and to the correct of the prototype. To ensure the groundwork paradigm covers the entire trunk element — or, in other words, takes up the entire browser window — you can use the background-size property and gear up it to cover. Then, to preclude the paradigm from warping its dimensions, use the groundwork-attachment property and set information technology to fixed. That way, the image will continue its original proportions.

Here's the CSS:

                                          
body {
    groundwork-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    groundwork-size: comprehend;
    color: #FFFFFF;
}

The HTML stays the same. Here's how information technology would look on the front-end now:

How to Insert a Background Image on an HTML Element

You can too set an image as the background of an HTML element rather than the unabridged web page.

For example, you could place HTML elements within a div, and so target the div with the CSS properties nosotros used higher up. I divergence is that instead of setting the background-size property to cover, we're going to set it to 100% 100%. That means the prototype will stretch horizontally and vertically as needed to fit the entire div chemical element, without retaining its original dimensions.

Here'southward the CSS:

                                          
div {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-echo: no-echo;
    groundwork-attachment: fixed;
    groundwork-size: 100% 100%;
    colour: #FFFFFF;
}

Here's the HTML:

                                          
<div>
    <h2>Background Image</h2>
    <p>In this example, the groundwork prototype is specified for the div element.</p>
    <p>But you can specify the background image for any HTML element.</p>
    <p>Endeavour information technology for a paragraph, heading, and more.</p>
</div><p>This paragraph is not independent in the div. Therefore it does not take an paradigm background.</p>

Hither's the result:

Setting background image of a div element in HTML

How to Make an Image Link in HTML

Images are likewise effective links — y'all can make a link from an icon or a high-res prototype. Either way, the process is the same: Enclose your <img> chemical element in an <a> (anchor) tag, like and so:

                                          
<a href="URL">
    <img src="URL" alt="descriptive text"/>
</a>

Here's an interactive instance — click the the HubSpot logo to be taken to the HubSpot homepage.

See the Pen Create an Image Link past Christina Perricone (@hubspot) on CodePen.

Making Your Website Visual

Adding images on your website is important to both your visitor feel and to search engines. It'due south easy whether you're building your website with a content management system or from scratch. Yous just demand to know some HTML and CSS.

Editor's note: This post was originally published in September 2020 and has been updated for comprehensiveness.

New Call-to-action