HTML Attributes

Syntax:
attribute_name="value"

What is HTML attributes?

Attributes provide extra information about the tags. It always comes in pair i.e. (atribute_name=”value”). We always separate the attribute name and value by “=”.

Let us master all the important attributes-

html Attributes

1. href Attribute

We use <a> tag to define hyperlink, between pages images and more. It is a most used element in the href attribute which specifies the direction of the links.

Example

    
<a href="https://www.TutorialBrain.com">Welcome to our free tutorial site: TutorialBrain.com!</a>

src Attribute example

2. src Attribute

We define a source in the form of src attribute. We use src attribute along with a <img> tag to show the images on a website.
The tag used to define images in HTML.

Example

<img src="img/purpleflower.jpg">

3. alt Attribute

The alt attribute provides the alternative text in case, the user is not able to view an image in the website.

If the website has an image, then the 2 most important reasons for images not been shown are –

  • The name of the image or the format of the image mentioned in the website is wrong.
  • The path of the image is wrong.

Example

    
<img src="tulips.jpg" width="200" height="320" alt="Tulips abc" >

4. id Attribute

Id attribute is a way to group some elements and apply a particular style to it. id Name must be unique within the HTML document.

Example

    
<style>

#idexample{
border:2px solid hotpink;}

</style>

5. class Attribute

The class attribute is a way to group some elements and apply a particular style to it. It is similar to id but the main difference is that id must be unique in an HTML document while classes can have duplicate names.

Example

    
<style>

.classexample{
background-color:pink;}

</style>

6. style Attribute

The style attribute sets the style of the HTML document.

Example

    
<p style="background:black; color:aqua; border:2px solid hotpink; height:50px;">Giving style properties within HTML tags</p>

7. lang Attribute

The lang Attributes specifies the language used in a particular document.

Example –
lang=en – It sets the language as English.

Example

    
<html lang ="en">

8. dir Attribute

The dir attributes help the browser to flow text in a particular direction like left and right direction.

dir Attribute example

Example

    
<h3 dir="rtl">Example for dir attribute</h3>
<p dir="rtl">Here text floating in the right direction</p>

9. width and height Attribute

Using width and height attribute you can set a size.

Example

<img src="img/purpleflower.jpg" width="200px" height="100px">

10. title Attribute

Title attribute displays the title of the content when you mouse over the content.

Mouse over me to see the title

Example

<p title="This is displayed due to title attribute">Hover over me</p>

Interview Question & Answer

Attributes provide extra information about the tags. It always comes in pair i.e. (attribute_name=”value”). We always separate the attribute name and value by “=”.
For Example,

<a href="linkname">
<img src="filename.jpg"> 

Here, src and href are attributes.

No, we can use hyperlinks on text and images both. The HTML anchor tag defines a hyperlink(href) that links one page to another page.
Syntax:

<a href ="linkname">Text 

To create hyperlinks or links that connect to another web page, we use the “href” attribute.

<a href="webpagelink">Webpage Name
No. The tag can accept only a single href attribute, and it can point to only a single web page.

Tutorials for all brains!