sriparthu
HTML Attribute

HTML Attribute

sri parthu's photo
sri parthu
·

2 min read

Table of contents

  • HTML attributes provide additional information about the element in the HTML document. Attributes are always defined in the opening tag. There are two types of attributes: 1) specific attributes and 2) global attributes.

Specific element attributes: src, alt, type, title, href, etc.

Global element attributes: class, id, height, width, etc.

HTML class attribute

  • A class attribute is a collection of attributes that share similar elements. With this, it creates a group of elements for styling and behavior, and it is denoted with a dot (.) followed by the class name.
<head>
    <title>Document</title>
    <style>
      .p1 {
        border: 1px solid;
      }
      .p2 {
        color: brown;
        font-family: cursive;
      }
      .p3 {
        background-color: aqua;
      }
      .p4 {
        border: 1px double;
      }
    </style>
  </head>
  <body>
    <!--single class attribute-->
    <p class="p1">This is single class attribute</p>
    <!--Multiple class attribute-->
    <p class="p1 p2">This is multiple class attribute-1</p>
    <p class="p3">This is multiple class attribute-2</p>
    <p class="p3 p4">This is multiple class attribute-3</p>
  </body>

HTML ID attribute

  • The HTML ID attribute must be a unique identifier for a single element. It is used to target the specific page to style and manipulate. It is denoted with a hashtag (#) followed by the ID name.
<head>
  <style>
    #heading1{
      border: 5px solid;
    }
    #heading2{
      color: blue;
    }
  </style>
</head>
<body>
  <h1 id="heading1">This is heading</h1>
  <h3 id="heading2">This is another heading</h3>
</body>

HTML href attribute

  • This href attribute specifies the URL of the page link in the <a> tag.
<a href="URL">Clickme!</a>

HTML tittle attribute

  • The title attribute is used to define some extra information about an element that displays when you hover over the text.
<p title="Hyper Text Markup Language">This is HTML</p>

HTML style attribute

  • The style attribute is used to style an element with properties such as color, font, size, and more.
<p style="color: brown;">This is HTML</p>

HTML width, height, src, alt attribute

  • The width and height attributes are used to specify the width and height of elements such as img, video, input, and more.

  • The src attribute is used to specify the path of the image or URL used in img, audio, video, input, and more.

  • The alt attribute is used to specify the alternative text for the image or another tag. If, for some reason, the image can't be displayed or there is a slow connection, it provides context for the screen reader.

<img
      src="https://cdn.pixabay.com/photo/2014/03/24/17/08/fire-295155_1280.png"
      alt="fire"
      width="50px"
      height="100px"
/>

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥

CSS3JavaScriptHTML5ReactBootstrapFrontend DevelopmentbackendJavaSpringbootSpringMySQL