4.8. Introduction to HTML: basic structure, tags and attributes: Image tags (img)

Introduction to HTML: Basic structure, tags and attributes: Image tags (img)

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages. The basic structure of an HTML document consists of tags, which are used to define elements, and attributes, which are used to specify the characteristics of those elements.

HTML tags are the foundation of any web page. They are used to create and organize page content, including text, images, links, lists, tables, and more. Each tag is represented by a set of characters surrounded by angle brackets (< and >). For example, the <h1> is used to define a level 1 title, the <p> is used to define a paragraph and the <img> is used to insert an image.

The image tag <img> is one of the most important tags in HTML. It allows you to insert images into your web page, making it more attractive and informative. The <img> is an empty tag, which means it does not have a closing tag. Instead, it uses attributes to specify the image to display and other characteristics of the image.

How to use the <img> image tag

To insert an image on your web page, you need to use the <img> with the 'src' attribute. The 'src' attribute specifies the URL of the image you want to display. For example:

<img src="imagem.jpg">

In this example, the image 'imagem.jpg' will be displayed on the web page. The image must be in the same directory as the HTML file, or you must specify the full path to the image.

Image tag attributes <img>

In addition to the 'src' attribute, the <img> also supports several other attributes. The most common are 'alt', 'width' and 'height'.

The 'alt' attribute is used to specify alternative text for the image, which will be displayed if the image cannot be loaded. This is an important attribute for accessibility as it allows screen reader users to understand the content of the image. For example:

<img src="imagem.jpg" alt="Image description">

In this example, if the image cannot be loaded, the text 'Image description' will be displayed instead.

The 'width' and 'height' attributes are used to specify the width and height of the image, respectively. They are specified in pixels. For example:

<img src="imagem.jpg" alt="Image description" width="500" height="300">

In this example, the image will be displayed with a width of 500 pixels and a height of 300 pixels.

In short, the image tag <img> It is an essential part of any web page. It allows you to insert images into your page, making it more attractive and informative. When using the <img> tag, it is important to remember to use the 'alt' attribute to improve accessibility and the 'width' and 'height' attributes to control the image size.

Next page of the Free Ebook:

13Introduction to HTML: basic structure, tags and attributes: Lists in HTML

3 minutes