Attributes of HTML

HTML attributes offer further details about HTML elements.

HTML Attributes

  • Every element in HTML can have attributes.
  • Additional information about elements is provided by attributes.
  • Always specify attributes in the start tag.
  • The standard format for attributes is name=”value”.

The href Attribute

A hyperlink is defined using the
<a> tag. The URL of the page to
which the link points is specified by the href attribute:


Example:

<!DOCTYPE html>

<html>

<body>

   <h2>The href Attribute</h2>

   <p>The a tag is used to define HTML links. The href attribute contains the link address:</p>

   <a href=“https://www.technicalmrstar.com”>Visit Mr Star Technical</a>

</body>

</html>



The src Attribute

An image can be included in an HTML page using the
<img> tag. The path to the image
that will be shown is specified by the src attribute:


Example:

<!DOCTYPE html>

<html>

<body>

   <h2>The src Attribute</h2>

   <p>The img tag defines HTML images, and the src attribute specifies the filename of the image source:</p>

   <img src=“demo_image.jpg” width=“500” height=“600”>

</body>

</html>

 PNG Download (download)


The URL can be specified in the src property in one of two ways:

1. An absolute URL directs users to an external image that is stored on a
different website. src=” https://www.technicalmrstar.com/
images/demo_image.jpg” is an example.

Note: Copyright may apply to external
photos. You might be breaking copyright laws if you use it without
authorization. Additionally, you have no control over external photos; they
could be changed or withdrawn at any time.

2. Relative URL – Directs the user to an image hosted on the website. Here,
the domain name is absent from the URL. The URL will be relative to the
current page if it starts out without a slash. For instance,
src=”demo_image.jpg”. The URL will be relative to the domain if it starts
with a slash. Src=”/images/demo_image.jpg” is an example.

Use relative URLs almost always for optimum results. If you switch domains,
they won’t stop working.

The width and height Attributes

The width and height attributes, which describe the width and height of the
image (in pixels), should also be included in the
<img> tag:


Example:

<!DOCTYPE html>

<html>

<body>

   <h2>Width and Height Attributes</h2>

   <p>The img tag’s width and height properties specify the size in pixels of the image:</p>

   <img src=“demo_image.jpg” width=“500” height=“600”>

</body>

</html>

 

The alt Attribute

If an image cannot be displayed for some reason, the mandatory alt property
for the <img> tag gives an
alternative text for the picture. If the user utilises a screen reader or
has a slow connection, an error in the src attribute, or both, could be to
blame.


Example:

<!DOCTYPE html>

<html>

<body>

   <h2>The alt Attribute</h2>

   <p> Users who are unable to see a picture should still be able to understand what it includes by using the alt attribute. </p>

   <img src=“demo_image.jpg” alt=“demo image” width=“500” height=“600”>

</body>

</html>


Check out what happens if we attempt to display a fake image.


Example:

<!DOCTYPE html>

<html>

<body>

   <img src=“img_typo.jpg” alt=“Technical Mr Star”>

   <p> The value of the alt attribute will be shown in its place if we attempt to display a missing image.</p>

</body>

</html>

The attribute of style

Using the style attribute, you may give an element additional style like
color, font, size, and others.


Example:

<!DOCTYPE html>

<html>

<body>

   <h2>The style Attribute</h2>

   <p> A style can be added to an element, like a color, using the style attribute:</p>

   <p style=“color:red;”> This sentence has a red font.</p>

</body>

</html>

The lang Attribute

To specify the language of the Web page, the lang attribute must always be
included inside the <html> tag.
Search engines and browsers are intended to benefit from this.

The example that follows uses English as the language:


Example:

<!DOCTYPE html>

<html lang=“en”>

<body></body>

</html>

The language code in the lang attribute may optionally be supplemented with
a country code. Thus, the HTML page’s initial two characters specify the
language, while its final two characters specify the nation.

The English language and the United States are specified in the example
below:

 Example:

<!DOCTYPE html>

<html lang=“en-US”>

<body></body>

</html>

The title Attribute

The title attribute specifies some extra details about an element.

A tooltip will appear when your cursor is over the element, displaying the
value of the title attribute:


Example:

<!DOCTYPE html>

<html>

<body>

  <h2 title=” A header here. “>The title Attribute</h2>

  <p title=“As a tooltip, I”> To see the title attribute as a tooltip, hover your mouse cursor over this sentence.</p>

</body>


</html>

Background Frame Download (download)

Rate this post

Categorized in: