How To Close Img Tag In Html

If you are wondering how to close an image tag in HTML, the short answer is: you do not add a separate closing tag. The <img> element is a void element, which means it cannot contain text or other HTML elements and does not use a closing tag such as </img>. You write the opening image tag with its attributes, and the browser displays the image.

For example, a standard HTML image can look like this: <img src="photo.jpg" alt="A mountain at sunrise">. You may also see a slash before the final angle bracket, as in <img src="photo.jpg" alt="A mountain at sunrise" />. Both forms are accepted in modern HTML, but the slash is optional. This guide explains how to close an img tag in HTML, why the rules work this way, and how to write image markup that is accessible and reliable.

Does an Img Tag Need a Closing Tag?

No. An HTML <img> tag does not need a closing tag. The image element is one of HTML’s void elements, sometimes called empty elements. Void elements cannot have child content, so there is nothing for a closing tag to close.

Write the image element on its own, with the information it needs inside the opening tag:

<img src="images/forest.jpg" alt="A forest path in autumn">

Do not write a separate closing tag like </img>. The correct pattern is one <img> element containing attributes such as src and alt, followed by the closing angle bracket.

Why the Img Element Is a Void Element

Many HTML elements wrap content. A paragraph, for example, has an opening tag, content, and a closing tag: <p>Text goes here.</p>. An image works differently. It does not wrap text or other elements. Instead, the browser uses the image element’s attributes to locate and display an external image file.

HTML defines a specific group of elements as void elements. Along with <img>, common examples include <br>, <hr>, <input>, <meta>, and <link>. These elements do not have closing tags in HTML. Learning this distinction helps prevent invalid markup and makes your code easier to read.

Correct HTML Syntax for an Image

The basic syntax for an image tag is straightforward:

<img src="image-file.jpg" alt="Description of the image">

The src attribute tells the browser where the image file is located. The alt attribute provides alternative text, which can describe the image to people using screen readers and appear when an image cannot be displayed. Replace the example file name and description with values that fit your page.

You can add other attributes before the final angle bracket. For example:

<img
  src="images/city-skyline.jpg"
  alt="City skyline at dusk"
  width="1200"
  height="800"
>

Line breaks and indentation are optional; they simply make longer tags easier to scan. The tag is still complete when the browser reaches the final >.

Should You Use a Slash in an Img Tag?

You may encounter image tags written with a slash at the end:

<img src="photo.jpg" alt="A dog playing in a park" />

This syntax is often called self-closing syntax. In modern HTML, the slash is unnecessary. Browsers treat <img> and <img /> as the same void element, provided the markup is otherwise valid. The slash does not replace a closing tag; it is simply an optional character in this context.

For new HTML documents, the usual recommendation is to omit the slash and write <img>. However, including it generally does not cause a problem in an HTML page. The important point is that you must not add a separate </img> tag.

What Happens If You Write </img>?

A closing image tag is not part of the HTML syntax for an image. For example, this is incorrect:

<img src="photo.jpg" alt="A red bicycle"></img>

Some browsers may still display the image because their HTML parsers are designed to recover from common mistakes. That does not make the markup valid or a good practice. Unnecessary closing tags can confuse readers, trigger validation errors, and make it harder to spot genuine problems in a document.

If you see </img> in your code, remove it. Keep the image element as a single tag and check that the opening tag has a valid src value and an appropriate alt attribute.

How to Write an Accessible Img Tag

Correctly ending an image tag is only one part of writing good image HTML. Accessibility matters too. In most cases, include an alt attribute so that people who cannot see the image can understand its purpose or meaning.

• Describe informative images: For a photograph that adds meaning, write concise text that communicates the important information.
• Use empty alt text for decorative images: Write alt="" when an image is purely decorative and does not add useful content.
• Avoid unnecessary phrases: Screen readers already identify an image, so phrases such as “image of” are usually not needed.
• Do not use the file name as a description: Text like “IMG_1042.jpg” rarely helps someone understand the image.

For example, an informative image could be written as <img src="team.jpg" alt="The design team reviewing sketches around a table">. A decorative divider might use <img src="flourish.svg" alt="">. Both are complete without closing tags.

Useful Attributes to Add to an Img Element

The src and alt attributes are the most familiar, but several other attributes can improve the behavior and presentation of an image.

• width and height: Set the image’s dimensions in CSS pixels. Providing them helps the browser reserve space while the image loads and can reduce unexpected page movement.
• loading: Use loading="lazy" for images that are below the fold and do not need to appear immediately. Avoid lazy-loading a key image that visitors should see as soon as the page opens.
• decoding: The value async can let the browser decode an image without delaying other rendering work.
• class: Add a class when you want to style the image with CSS.
• title: This can provide advisory information, but it should not be used as a substitute for meaningful alt text.

Here is an example with several attributes:

<img
  src="images/garden.jpg"
  alt="Raised vegetable beds in a sunny backyard"
  width="960"
  height="640"
  loading="lazy"
  class="article-image"
>

The opening tag ends at the final angle bracket. You do not need to add a closing tag after the image.

Using Responsive Images Without Closing Tags

Responsive images can use srcset and sizes to give the browser options for different screen sizes or display resolutions. These attributes do not change the rule for closing an image tag.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="A coastline viewed from a cliff"
  width="800"
  height="533"
>

The browser chooses an appropriate file from the available sources. The image remains a void element, so the markup still ends with the opening tag’s final >, not with </img>.

Using Img Inside a Picture Element

The <picture> element can provide different image files for different screen conditions or formats. Unlike <img>, <picture> is a container and does have a closing tag. It usually contains one or more <source> elements and a fallback <img> element.

<picture>
  <source srcset="landscape.avif" type="image/avif">
  <source srcset="landscape.webp" type="image/webp">
  <img src="landscape.jpg" alt="A wide mountain landscape">
</picture>

Notice the difference: </picture> closes the container, but the nested <img> has no closing tag. This is a common source of confusion when an image appears inside more complex markup.

How to Close an Img Tag in XHTML

If you are working with an older XHTML document or a system that requires XML-style syntax, you may see the slash form: <img src="photo.jpg" alt="A lake at sunrise" />. XML requires elements to be properly closed, and the slash indicates that the element has no content.

That is different from writing a separate HTML closing tag. In XHTML-style syntax, the slash is part of the single tag; it does not create an opening-and-closing pair. For a regular HTML5 page, use the standard void-element form, with or without the optional slash depending on your project’s style.

Common Img Tag Mistakes to Avoid

When adding images, the following mistakes are more likely to cause issues than the choice to include or omit a trailing slash:

• Adding </img>: Remove it because HTML image elements do not have closing tags.
• Leaving out src: Without a source location, the browser cannot load the intended image.
• Forgetting alt: Add appropriate alternative text, including an empty value for decorative images.
• Using the wrong file path: Check spelling, capitalization, folders, and the file extension.
• Putting child elements inside an image: An <img> element cannot contain other HTML. Use a wrapper such as <figure> if you need a caption or additional content.
• Using very large files unnecessarily: Resize and compress images appropriately to support faster page loading.

How to Check Your Img Markup

If an image does not appear, first confirm that the tag is written correctly and that the src points to an existing file. Check the browser’s developer tools for a failed network request, and make sure the path matches the location of the image relative to the HTML document or site root.

You can also use an HTML validator to find invalid markup, including unnecessary closing tags. A validator can help identify syntax problems, but it cannot decide whether your alt text accurately describes the image. Review accessibility and visual behavior separately, especially when images communicate important information.

Conclusion: The Right Way to Close an Img Tag

To close an img tag in HTML, simply finish the tag with a final angle bracket. The <img> element is a void element, so it does not use a separate </img> closing tag. A trailing slash, as in <img />, is optional in modern HTML and is not required to make the image display.

Use a valid src, provide suitable alt text, and add attributes such as dimensions or lazy loading when they support your page. With those basics in place, your image markup will be clear, accessible, and consistent with modern HTML.

Disclaimer: Articles are written by Humans, AI or Both. Verify Important information.