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

why we need Internship after Graphic Designing Course

Are you completing your graduation? Are you applying to an internship? Are you aware of the reasons why it is important to have an internship? We will discuss all of these issues here. Internships are the very first step after we have completed our graphic design course. It’s one of the most efficient times for a fresher to get involved in creative tasks. Additionally you’ll gain an understanding of the ways your talents can be utilized to help an company. If you’re studying the course in graphic design An internship is a must for you. Why Do You Need an Internship in Graphic Designing? If you’re enrolled in graphic designing in Bangalore or any other city the first step is internship to a successful career. Learn more about why and the importance of internships for students.
Post a Comment
Read more

photoshop tutorial for beginner

  What is Photoshop? photoshop is a photo editing and raster graphic design software which allows users to create, edit, and manipulate various graphics as well as digital art. It also allows to create and edit raster images with multiple layers and import the images in various file formats. Photoshop is developed by Adobe Systems for both Windows and MacOS. This is a photoshop basics for designers in the latest version of adobe photoshop CC . We are going to cover Introduction to Photoshop and a lot of features which are commonly used by each and every designers to create some composites or any design or to make any illustrations or even just doing some simple retouching on Photoshop latest version. So we are going to cover some most common features like workspace, layers, smart objects, blend modes, selections techniques, filters and much more Photoshop basics and necessary features that every designers use to work on photoshop. Adobe Photoshop V...
Post a Comment
Read more

what is graphic design?

  In this post, we discuss what is graphic designing? when you google you will receive a lot of information but graphic designing is the art of communication design must be combining text and pictures. moreover, first, you understand one thing clearly graphic design is not drawing or painting or graphic designing is not create poster, logo, advertisement, magazines, and posters. graphic design is not a make fancy thing you should present information developed through creativity. let us understand what is graphic and design? Graphic: graphic is the visual representation is associated with art, creativity and expression include such as illustrations, painting, imagery, lettering, etc, graphic is made up of visual elements like color, shape, texture, space, and typography. design: In simple terms design is thinking and problem-solving when you design graphic you must follow guidelines that are a principle of design. principle of design: contrast, hierarchy, alignment, ba...
Post a Comment
Read more