What are html attributes?


HTML attributes are remarkable words used inside the opening tag to manage the element's behavior and provide additional information about HTML elements.

The attributes are a modifier of an HTML element type

All HTML elements may have attributes

Every time attributes are specified in the start tag

Generally attributes are come in name/value pairs like: name="value"

The lang attribute

lang attribute  inside  the <html> tag used to declare the language of the Web page. This attribute assist search engines and browsers to understand language. The example below specifies   English as the language.

Example:-

 

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

 

Also country codes can be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page (en = English), and the last two characters define the country (US = United States):

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

 

The title Attribute

The title attributes states additional information about an element. The information display as a tooltip text when the mouse moves over the element.

 

If you visit Basic Construction of an Html Page post you can understand it better.

Example:-

<html>


<head>
<title> First web page </title>
</head>

<body>


Hello!

<p title="This paragraph is about Honest Person">

 

It is an intellectual idea to define an honest man. We shall only say that an honest man earns his living by working honest. He's an embodiment of purity and truthfulness. An honest man doesn't consider doing evil to others nor does he enjoy false pursuits.

 

</p>


</body>
</html>

Below in the output screenshot we can see, when I take the mouse cursor above the any word of paragraph a text (This paragraph is about Honest Person) is appearing. When I move the cursor from paragraph the text (This paragraph is about Honest Person) is disappearing.

 

The alt Attribute

 

Alt text or alternative text also recognized as "alt attributes", “alt descriptions" are used within an HTML code to define the appearance and function of an image on a page. For better understanding see example below:-

<img src="car.jpg" alt="The car Pic will show you soon">

 

By inserting the code above properly in your html file your picture of car will display in webpage. Suppose for any reason picture is not showing in your web page (in my case the picture is car). In that case if you use alt attribute then can provide information to your webpage visitor about the picture by text (in my case the text is “The car Pic will show you soon”).

The style Attribute

The style attribute is used to include styles to an element, like color, font, size etc.

Example:-

<p style="color:blue;">This is a blue paragraph.</p>

 

 

 

 

                                

The href Attribute

<a> is html element or anchor element. href is a html attribute. Both <a> element and href attribute creates a hyperlinks to web pages, files, email addresses, locations in the same page or anything else a URL can address.

Example:-  

<a href="https://example.com">Click here to visit my website</a>

The src Attribute

In html src is an attribute for the <img> tag which is used to display an image by linking the path inside src attribute.

Inside the double quotes of  src attribute you can put the path of the image file, instead of “#”.

 

Example:-

<img src="#">

 

<img src="pic.jpg">     

 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_dnPXrqHgFyNnRxxBS4V5O5tsrfIKcysexw4WtLE_Gk7cyELKtPt8xpWxc6vY5tKvUdcoYlf8rm-6r2zkRcw-63RiZ2gLvVVshvcZuicfqKezpHQvoG6Wz_Jix1woso9LtuP6XolmLrJb/s1600/for+web+design.jpg">

 

 

The width and height Attributes

 

For customizing image or images width and height attributes also should contain in <img>  tag.  Width and height attributes specifies the width and height of the image in pixels.

Example:-

<img src="car.jpg" width="500" height="600">

 

 

Post a Comment

5 Comments

  1. Hello, this is Rakesh Kumar and I just wanna say that this is such a great blog! I am looking for these kinds of blogs for last many days. Keep it up. Thanks for sharing it with us...
    Web Development Course | Web Design Course

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)