HTML Attributes with Examples

Attributes are the extra information about the characteristics of the HTML element.  Attributes are case sensitive and should be written in lowercase only. Let us understand the HTML attributes in detail.

What  Are HTML Attributes?

  • Attributes change the default functions of HTML elements.
  • Attributes define the behavior of the HTML elements.
  • Attributes are described in the start tag of the HTML element.
  • Attributes always specified in name=” value”  match.
  • Attributes have value double-quoted for every name of an HTML element.

 Syntax of HTML Attributes 

<a href="https://codedec.com/">Welcome to codec</a>
  • <a is the HTML element.
  • href is  the Attribute name of the HTML element .
  • https://codedec.com/  is the  value of the HTML element.
  • Welcome to codec is the content of the HTML element.
  • </a> is the element .

 

Common HTML Attributes Examples

Eg.1  CLASS Attribute:   It creates one or more class names for elements, It is mostly used in stylesheets.

<p><input type="text" class="highlight"></p>
  <div class="box highlight">welcome to codedec</div>
  <p class="highlight">This is the first code.</p>

  Output :

 

Eg.2 Style Attribute: It is used to style the color, font, and background of the  Element.

<p style="color:rgb(0, 105, 124);">This is a blue pill.</p>

  Output : 

Eg.3 Id Attribute:  It is used to search for the unique id of the HTML element.

<nav id="faq">
   <a href="https://codedec.com/">proof of answer</a>
</nav>

 

  Output :  

Eg.4 Src Attribute:    It shows the path of the image of the HTML element.

<img src="codedec.png" width="50" height="60">

 

  Output :   

Eg.5 Alt Attribute:   It specifies the alternative for the source image if doesn’t show an image display.

<img src="srccccc.png" alt="codedeclogo">

  Output :    

Eg.6 Width and Height Attribute:  It specifies the diameter, length of the images in pixels.

<img src="dimension.jpg" width=" 470" height="271">

 

 Output :