Images are another possibility with the html5 image tag added to a web designers bag of tricks. Images are also an important HTML5 element. You add an image with the HTML5 ‘img’ tag.
Start with another simple example.
First of all the ‘img‘ tag has two attributes.
src=”url address so the browser can find image”.
alt=”A description of the image is also needed”.

HTML5 logo is also added with the  html5 image tag.
HTML – A markup language used for structuring and presenting content on the Web. HTML5 is also the current version.

The HTML5 Image Tag Added

The location of the image file is also known as the address. The browser can find and load an image while the ‘src‘ attribute locates the image. Another bit of knowledge, ‘src‘ is short for ‘source attribute’. Therefore the source attribute is given a ‘url‘ value to pass to the browser. It is also useful to know that the ‘url‘ is short for ‘universal resource locator’. ‘HTML5‘ is a language which is short for ‘Hyper Text Markup Language’.

The HTML5 img element

The ‘img‘ tag also accepts other attributes other than the ‘src’ and ‘alt’ attributes. In addition to ‘src’ and ‘alt’ are the ‘width’ and height’ attributes. Examples of the ‘width’ and ‘height’ attributes are found in the code snippet below.

The code snippet above will first of all display an image named ‘example-image.png’ which is located at ‘www.example-location’ and displayed with a 400 pixels width and a 500 pixels height.

Image File Type

And lastly a brief introduction to the types of image files. The names of files have either a ‘png’, ‘jpg’, ‘svg’, or ‘gif’ appended to them. This is due to the type of file and is worth noting for future reference. This article on image optimization from Google Developers is also worth reading.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *