HTML Attributes

Prev
Next 
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.

Welcome to our free tutorial site: TutorialBrain.com!

Example

    
<a href="https://www.TutorialBrain.com">Welcome to our free tutorial site: TutorialBrain.com!</a>
Run the Code
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">
Run the Code

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" >
Run the Code

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>
Run the Code

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>
Run the Code

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>
Run the Code

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">
Run the Code

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>
Run the Code

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">
Run the Code

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>
Run the Code

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.
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!