How ‘Image’ tag helps to Optimize a Site?

What is a Tag?

A tag is a short (usually one word) description of an HTML object or link or we can say, a tag is a generic term for a language element; a descriptor, command inserted in a document that specifies how the document, or a portion of the document, should be formatted. This helps website owner and content publishers to organize their content. This also helps visitors in finding the topics that they might be interested in. Tags are used by all format specifications that store documents as text files.  The set of tags for a document or other unit of information is sometimes referred to as markup, a term that dates to pre-computer days when writers and copy editors marked up document elements with copy editing symbols or shorthand. In other words, when a visitor clicks on a tag they are taken to the archive page where all the posts with that tag are listed. Tags can also be displayed in one of the sidebars using a widget. This includes SGML and HTML.

Alt tag for image
How to write alt tag on image for seo?

Tag uses in HTML:

When referring to HTML, XML, or other markup languages a tag is an element inserted into a document or file that changes the look of content or performs an action. As seen in the HTML tag example, an HTML element has an open tag that contains the name and any attributes and a close tag that contains a forward slash and the name of the tag being closed. Each tag is contained within a less than and greater than angle brackets and everything between the opening and closing tag.

Adding Image Tag to the Documents:

The <img> element, like most elements, is a container. It is not an image in and of itself, but a receptacle for one. Just as the p element holds a paragraph, the img element holds an image. However, it does so in an entirely different way. Most notably, the image is a separate file that loads into the space created by the img element. There are three types of image files used in HTML, indicated by different filename extensions: .jpg, .gif and .png (also know as JPEGs, GIFs, and PINGs).

Guidelines:

Insert Image:

We can insert any image in the web page by using <img> tag. Following is the simple syntax to use this tag.

Example:

<img src=”Image URL” … attributes-list/>

Set Image Location:

Usually, keep all the images in a separate directory. So let’s keep HTML file test.html in the home directory and create a subdirectory images inside the home directory where we will keep the image.

Example:

“/html/image/test.png”

Set Image Width/Height

To set image width and height based on according to requirement using width and height attributes, it specifies width and height of the image in terms of either pixels or percentage of its actual size.

Set Image Border

By default image will have a border around it, it can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.

Set Image Alignment

By default image will align at the left side of the page, but it can use align attribute to set it in the centre or right.

Example:

<img src=”/html/images/test.png” alt=”Test Image” border=”3″ align=”right”/>

Image Size:

Image file formats are standardized means of organizing and storing digital images. Image files are composed of digital data in one of these formats that can be rasterized for use on a computer display or printer. An image file format may store data in uncompressed, compressed, or vector formats. Once rasterized, an image becomes a grid of pixels, each of which has a number of bits to designate its colour equal to the colour depth of the device displaying it.

Types of Image format:

  1. Rasterized (JPEG/JFIF, JPEG, Exif, TIFF, GIF, PNG, BMP, PPM, PGM, PBM, PNM, HEIF, BAT, BPG)
  2. Vector(CGM,SVG)

CSS application:

CSS can be applied to HTML or XHTML using three methods: linked, embedded, and inline. In the linked method, the CSS is stored in a separate file, instead of directly in the HTML page. In the embedded method, CSS is stored as part of the HTML page, in the header section. In the inline method, CSS is stored directly in the style attributes of the HTML tags.

Example:

 <div style=”font-weight:bold”>Bold Font</div>.

The CSS is contained in a style element. Setting the element’s type attribute to text/css tells the browser that the enclosed sheet style is written in CSS and should be used to format the page. If the attribute type is missing or set to an unrecognized value, the CSS will not be applied to the page.

The bit of CSS in this example tells the browser to make all the text found in any paragraph (p) elements bold.

Adding Meta Tags to the Documents:

A meta description tag is a snippet of HTML code in a web page header that summarizes the content that is on the web page. The meta description is usually placed after the title tag and before the meta keywords tag. When optimizing a web page for search engines (SEO), it is considered a best practice to use meta description tags.

Example:

<head>
<meta name=”description” content=”Here is a description”>
</head>

Guidelines:

we can add metadata to the web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have Name, content, scheme, http-equiv.

Name:

It is the name for the property. Examples include keywords, description, author, revised, generator etc.

Content:

It specifies the property’s value.

Scheme:

It specifies a scheme to interpret the property’s value (as declared in the content attribute).

http-equiv:

It is used for HTTP response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

Social Media References:

               

Leave a Reply

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