How to add an image to a webpage using HTML5?

The core method of adding images to a web page is to use the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560396668.jpeg" class="lazy" alt="How to add an image to a webpage using HTML5?" > tag and match the necessary attributes. First, use the self-closed <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560396668.jpeg" class="lazy" alt="How to add an image to a webpage using HTML5?" > tag, and specify the image path through the src attribute, and provide alternative text; second, you can wrap the image through the <a> tag to achieve click jump; again, use the new <figure> and <figcaption> tags added by HTML5 to structure the image and title; in addition, you can set width, height or use CSS to control the image size, and achieve lazy loading through loading="lazy" to optimize performance.

Adding images to web pages is one of the basic operations of HTML, and HTML5 provides more concise and semantic tags and attributes to achieve this. The most core way is to use the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560420539.jpeg" class="lazy" alt="How to add an image to a webpage using HTML5?" > tag and match src and alt attributes.

Basic writing method: use the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560396668.jpeg" class="lazy" alt="How to add an image to a webpage using HTML5?" > tag

The easiest and most straightforward way to insert an image into a web page is to use the HTML <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560396668.jpeg" class="lazy" alt="How to add an image to a webpage using HTML5?" > tag. This tag is a self-closing tag, which means no additional end tag is required.

Example:

 <img src="/static/imghw/default1.png"  data-src="example.jpg"  class="lazy" alt="descriptive text">

• src is a must, it tells the browser the location of the image file.
• alt is also recommended to write. This alternative text will be displayed when the image cannot be loaded, and it is also important for barrier-free access.

The path can be a relative path (such as images/photo.jpg ), or an absolute path or network address (such as https://example.com/photo.jpg ).

Add image link: wrap <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560668748.jpeg" class="lazy" alt="How to add an image to a webpage using HTML5?" > with <a>

If you want the image to be clicked and redirected to another page or resource, you can put <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560668748.jpeg" class="lazy" alt="How to add an image to a webpage using HTML5?" > in the <a> tag.

Example:

 <a href="https://example.com">
  <img src="/static/imghw/default1.png"  data-src="logo.png"  class="lazy" alt="Company Logo">
</a>

In this way, users can jump to the specified link by clicking on the image. This practice is often used for website logo or advertising graphics display.

Add titles using <figure> and <figcaption> (New in HTML5)

HTML5 introduces <figure> and <figcaption> tags to display pictures and their explanatory texts more structured, which is particularly suitable for mixed text content.

Example:

 <figure>
  <img src="/static/imghw/default1.png"  data-src="nature.jpg"  class="lazy" alt="Natural Landscape">
  <figcaption>Beautiful mountain scenery</figcaption>
</figure>

• <figure> means a separate content block, usually related to the main content but can exist separately.
• <figcaption> is its child element used to add a title or description to the image.

This method not only makes the code clearer, but also improves semantics and SEO effects.

Image size control and other properties

You can control the size of the image by setting width and height properties:

 <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" alt="personal photo"    style="max-width:90%"  style="max-width:90%">

However, it is recommended to use CSS to control the size, so that the style and structure are separated, making it easier to maintain:

 <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" alt="personal photo"   style="max-width:90%">

In addition, you can also use loading="lazy" to delay loading of images to improve page loading speed:

 <img src="/static/imghw/default1.png"  data-src="big-image.jpg"  class="lazy" alt="large image" loading="lazy">

Basically that's it. Although adding images seems simple, in actual development, whether the path is correct, whether the alternative text is appropriate, and whether the responsive processing is in place will affect the user experience and accessibility.

The above is the detailed content of How to add an image to a webpage using HTML5?. For more information, please follow other related articles on the PHP Chinese website!