How to Insert Images in WordPress with HTML

By Lisa Sabin-Wilson

You will probably want to insert an image into your WordPress website, whether it is within the body of a post or page, in the sidebar by using a widget, or within the template code itself. The HTML markup to insert an image looks like this:

<img src=”/path/to/image-file.jpg” alt=”Image File Name” />

Let’s break down this code for you in easy snippets to help you understand what’s at work here:

  • <img src= — This is the HTML markup that tells the browser that the website is looking for an image file.

  • “/path/to/image-file.jpg” — This is the actual directory path through which the web browser will find the physical image file. For example, if you uploaded an image to your web server in the /wp-content/uploads directory, the physical path for that image file would be /wp-content/uploads/image-file.jpg.

  • alt=”Image File Name” — The alt tag is part of the HTML markup and provides a description for the image that search engines will pick up and recognize as keywords.

    The alt tag description will also display as text on a browser that cannot, for some reason, load the image file; for example, if the server load time is slow, or if the user is using a screen reader with images turned off, the text description will load first to at least provide visitors with a description of what the image is.

  • */> — This HTML markup tag closes the initial <img src=” tag, telling the web browser when the call to the image file is complete.