Attributes in HTML

The HTML tags contains one or more attributes. These attributes provides additional information about how the tag should be appear or behave. The HTML attributes are always specified in the start tag. The attributes usually comes in name/value pairs like: name="value" and value should be enclosed in double/single quote. Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

Some of The HTML Attributes are :

id Attribute : The id attribute specifies a unique id for an HTML tag or element. The value of id must be unique within the HTML document. The id attribute is mostly used for point out styles to a CSS style sheet or javascript to manipulate the DOM elements. The id attribute is part of the Global Attributes, and can be used on any HTML element.
<!DOCTYPE html>
<html>
 <head>
  <script>
   function MyFunc() {
   document.getElementById("demo").innerHTML = "Hello world!! with JavaScript!";
   }
  </script>
 <head> 
 <body>
   <p id="demo">Hello world!!</p>
   <button type="button" onclick="MyFunc()">Change Text</button>
 </body>
</html>

class Attribute : The class attribute specifies one or more class names for an HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. In CSS scripts, we can select specific elements with its class name by writing with a period (.) character, followed by the name of the class. The class is a global attribute. For example :
<!DOCTYPE html>
<html>
 <head>
   <style>
      .demo { 
           background-color: yellow;
           color: green;
      }
   </style>
   <head> 
   <body>
      <h class="demo">This is Test Web Page for Class Declaration.</h>
   </body>
</html>

style Attribute : The style attribute specifies an inline style for an element. The style attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet. The <style> element is used to define style information for a single HTML page. The <style> tag contains CSS properties for an HTML document. Usually <style> tag appear in the <head> element of the document. However it'll also acceptable to used in the <body> element of the document. The style attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet. Example :
<!DOCTYPE html>
<html>
 <head>
   <style>
       body {background-color: yellow;}
       p {color: green;}
   </style>
 <head> 
 <body>
     <p>Hello world!!</p>
 </body>
</html>

title Attribute : The title attribute specifies extra information about an element. The information is most often shown as a tool tip text when the mouse moves over the element. The title attribute is part of the Global Attributes, and can be used on any HTML element. Example of title attribute :
<!DOCTYPE html>
<html>
   <body>
      <p title="Free CS and IT Tutorials">Welcome to mycsnotes.com</p>
   </body>
</html>

href Attribute : HTML links are defined with the <a> tag. The link address is specified in the href attribute:
<!DOCTYPE html>
<html>
   <body>
      <a href="http://www.mycsnotes.com">Click here for Home Page</a>
   </body>
</html>

src Attribute : The src attribute specifies the location or URL of the external resource. The src attribute can be used with various elements like <audio>, <embed>, <iframe>, <img>, <input>, <script> etc. For example :
<!DOCTYPE html>
<html>
   <body>
     <img src="image.jpg">
   </body>
</html>

alt Attribute : The alt attribute specifies an alternative text to be used, when an image cannot be displayed. The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.
<!DOCTYPE html>
<html>
   <body>
     <img src="image.jpg" alt="Here is an image">
   </body>
</html>

width Attributes : The width attribute specifies the width of the element, in pixels.
<!DOCTYPE html>
<html>
   <body>
     <img src="image.jpg" width="200">
   </body>
</html>

height Attributes : The height attribute specifies the height of the element, in pixels.
<!DOCTYPE html>
<html>
   <body>
     <img src="image.jpg" height="200" width="200">
   </body>
</html>

name Attribute : The name attribute specifies a name for the element. It is mainly used with the form, frame, fieldset, input field etc. For example :
<!DOCTYPE html>
<html>
   <body>
     <fieldset name="personalia">
       Name: <input type="text"><br>
       Email: <input type="text"><br>
     </fieldset>
   </body>
</html>

Align : Align is used to specifies the alignment according to surrounding elements. But this is not supported in HTML 5. The attributes values of align are :

left      : Left-align text
right    : Right-align text
center  : Center-align text
justify  : Stretches the lines so that each line has equal width (like in newspapers and magazines)
<!DOCTYPE html>
<html>
   <body>
      <p align="right">This is a text paragraph.</p>
  </body>
</html>

color : The color attribute specifies the color of the text inside a <font> element. But this is not supported in HTML5.
<!DOCTYPE html>
<html>
   <body>
      <p color="red">This is a text paragraph.</p>
  </body>
</html>

bgcolor : The bgcolor attribute specifies the background color of a document. But this is not supported in HTML5.
<!DOCTYPE html>
<html>
   <body bgcolor="red">
      <p>This is a text paragraph.</p>
  </body>
</html>

font : The <font> tag specifies the font face, font size, and color of text. But this is not supported in HTML5. The attributes of font tag are :

Color : It specifies the color of text. The value of attribute is the colorname.
Face : It specifies the font of text. The value is the name of font family.
Size : It specifies the size of text. The value of attribute is the font-size.
<!DOCTYPE html>
<html>
   <body>
      <font size="3" color="red">This is some text!</font>
      <font size="2" color="blue">This is some text!</font>
      <font face="Times New Romans" color="green">This is some text!</font>
  </body>
</html>

You can find the full List of HTML Attributes here :

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
https://www.w3schools.com/tags/ref_attributes.asp




Next Topic :