Javascript AJAX jQuery HTML PHP Example MORE

HTML attribute with example

In HTML attributes are used to add extra information to an HTML element. Attributes are always specified in the opening tag. It is enclosed with a double quote.

There are various attributes in HTML:

  1. href attribute
  2. src attribute
  3. width and height attribute
  4. alt attribute
  5. style attribute
  6. lang attribute
  7. title attribute

The href attribute

To add a link in HTML we used <a> tag. Inside <a> tag href is used to specify the address.

Example

<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://www.studentstutorial.com">Visit Students Tutorial</a>

</body>
</html>

Run it yourself

The src Attribute

HTML images are specified with the <img> tag.

The src attribute is used to specifed the source of the filename.

<!DOCTYPE html>
<html>
<body>
 
<h2>The src Attribute</h2>
<p>The src attribute is used to specifed the source of the filename.</p>
 
<img src="sun-rise.jpg">
 
</body>
</html>

Run it yourself

The width and height Attributes

To specifies the width and height of the image width and height attribute is used.

<!DOCTYPE html>
<html>
<body>
 
<h2>The src Attribute</h2>
<p>The src attribute is used to specifed the source of the filename.</p>
 
<img src="sun-rise.jpg" width="500" height="400">
 
</body>
</html>

Run it yourself

The alt Attribute

The alt attribute is used to show alternative text if any problem for showing the image. Some time if the image file not found or due to pour page load the image not show. In that case the alt attribute show the value to user.

<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>The src attribute is used to specifed the source of the filename.</p>
<img src="sun-rise.jpg" alt=”Display Picture” width="500" height="400">
</body>
</html>

Run it yourself

The style Attribute

<!DOCTYPE html>
<html>
<body>
 
<h2>The style Attribute</h2>
 
<p style="color:red;font-size:20px;">This is a paragraph with color red.</p>
 
</body>
</html>


Run it yourself

The lang Attribute

To declared language of the page the lang attribute is used. It is placed in <html> tag.

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

Run it yourself

The title attribute

The title attribute is used to define a button, image, paragraph in a html page.

<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<button title="I'm a Button">
Hover Mouse
</button>

</body>
</html>

Run it yourself