Skip to main content

HTML Attribute

 

  • HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML element.
  • Each element or tag can have attributes, which defines the behaviour of that element.
  • Attributes should always be applied with start tag.
  • The Attribute should always be applied with its name and value pair.
  • The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.
  • You can add multiple attributes in one HTML element, but need to give space between two attributes.

Click: web designing course in bangalore 


Syntax

  1. <element attribute_name="value">content</element> 

Example

  1.  <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. </head>  
  5. <body>  
  6.     <h1> This is Style attribute</h1>  
  7.    <p style="height: 50px; color: blue">It will add style property in element</p>  
  8.     <p style="color: red">It will change the color of content</p>  
  9. </body>  
  10. </html>  
Output:

Explanation of above example:

  1. <p style="height: 50px; color: blue">It will add style property in element</p> 
 In the above statement, we have used paragraph tags in which we have applied style attribute. This attribute is used for applying CSS property on any HTML element. It provides height to paragraph element of 50px and turns it colour to blue. 
 
  1. <p style="color: red">It will change the color of content</p>  

In the above statement we have again used style attribute in paragraph tag, which turns its colour red.

Note: There are some commonly used attributes are given below, and the complete list and explanation of all attributes are given in HTML attributes List.


 

The title attribute in HTML

Description: The title attribute is used as text tooltip in most of the browsers. It display its text when user move the cursor over a link or any text. You can use it with any text or link to show the description about that link or text. In our example, we are taking this with paragraph tag and heading tag.

Example

With <h1> tag:
  1. <h1 title="This is heading tag">Example of title attribute</h1>  

With <p> tag:

  1. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p> 

Code:

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.  </head>  
  5. <body>  
  6.       
  7.   <h1 title="This is heading tag">Example of title attribute</h1>  
  8.   <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>  
  9.   
  10. </body>  
  11. </html> 
Output:
 

The href attribute in HTML

Description: The href attribute is the main attribute of <a> anchor tag. This attribute gives the link address which is specified in that link. The href attribute provides the hyperlink, and if it is blank, then it will remain in same page.

Example

With link address:

  1. <a href="https://www.javatpoint.com/html-anchor">This is a link</a> 
Without link address:
 
  1. <a href="">This is a link</a>  

The src Attribute

The src attribute is one of the important and required attribute of <img> element. It is source for the image which is required to display on browser. This attribute can contain image in same directory or another directory. The image name or source should be correct else browser will not display the image.

Example

  1. <img src="whitepeacock.jpg" height="400" width="600">  

Note: The above example also have height and width attribute, which define the height and width of image on web page.

Output:

Quotes: single quotes or double quotes?

In this chapter you have seen that, we have used attribute with double quotes, but some people might use single quotes in HTML. So use of single quotes with HTML attribute, is also allowed. The following both statements are absolutely fine.

  1. <a href="https://www.javatpoint.com">A link to HTML.</a>  
  2. <a href='https://www.javatpoint.com'>A link to HTML.</a>  

IN HTML5, you can also omit use of quotes around attribute values.

  1. <a href=https://www.javatpoint.com>A link to HTML.</a> 

Comments

Post a Comment

Popular posts from this blog

What Are the Required Skills in Graphic Designing?

  The job description of a graphic designer is not that straightforward. This type of job requires a high level of creativity and an understanding of various fields, including Art Direction, Exhibition Design, Web Designing, and more. It can also lead to positions in the advertising and marketing industries. Listed below are some of the most sought-after positions in the industry. Let's take a closer look at each of them. What is graphic designing What is graphic design? In simple terms, it's the process of creating a visual composition that conveys the desired message to a target audience. Various forms of graphic design are used in advertising, marketing, and sales. For example, a company's website design may include logos, graphics, posters, and brochures. These elements combine to create an impressive, professional-looking brand identity. But what are the key components of a good graphic design? While studying the art of graphic design, aspiring designers should be awar...
Post a Comment
Read more

where to learn graphic design free?

  The amount of graphic design programs that are available online has increased over the last few years. The age of digital offers unlimited opportunities for those who have the ability to design graphically. If you're looking to create logos, creating games, or creating beautiful web pages, you'll find something that's suitable for all. For this piece, we'll look at some of the most effective and most useful graphic design courses . We'll look at options that are targeted towards a variety of different students from professionals who are advanced and want to build a distinctive brand or even classes for complete novices. Who should take the course in graphic design?   Graphic design classes aren't just for those who wish to be graphic designers. While you should definitely take the following courses to boost your chances of securing an attractive graphic design career However, there are other good motives to take the course too. For example, enrolling in one of...
Post a Comment
Read more

How to market graphic design business

Whether you are a Brand-new designer or a proven veteran, you can Never have many customers. But figuring out the way to Advertise a Graphic design business isn’t always simple. In the end, your specialization is – not advertising. In this particular post, I wish to offer you seven simple, actionable, and practical strategies. 7 Ways to Advertise your graphic design business Find your niche Before you dip too deeply into the Rest of the promotional approaches below, the Very first thing that you would like to do is Market down. Pick what graphic design solutions Are you going to concentrate on. Do you wish to concentrate on design logos? Info-graphics? Brochures? Websites? You may offer a variety of different providers. However, as you strategize for how to Market a graphic design business, it will pay to think of each Market separately. Your audience’s needs will vary significantly based on what they are looking for So that your promotional eff...
Post a Comment
Read more