Skip to main content

Html Basic Attributes HTML Element with Attributes

HTML (Hypertext Markup Language) attributes enhance the functionality and appearance of elements on a webpage. Attributes provide additional information about HTML elements and are always included in the opening tag. In this comprehensive guide, we'll delve into various HTML attributes, exploring their purposes and providing examples to illustrate how they can be effectively used.

Basic Structure of HTML Element with Attributes

HTML elements are typically structured with a tag name and attributes contained within the opening tag. Here's a basic example:

   
<tagname attribute="value">Content</tagname> 
 


Output


   

Let's explore some common HTML attributes and their applications.

1. Global Attributes

Global attributes can be used with nearly all HTML elements and provide common functionalities.

  •  Class Attribute

  The class attribute is used to define one or more class names for an element. It is often used for styling purposes with CSS.



<p class="important-text">This is an important paragraph.</p>


Output

 

  • id Attribute

  The id attribute uniquely identifies an element on a page. It should be unique within the HTML document.


<div id="header">This is the header section.</div>


Output




2. Hyperlink Attributes

Attributes related to creating hyperlinks and navigating through web pages.


  • href Attribute

    The href attribute specifies the URL of the linked resource.


<a href="https://www.example.com">Coding Z Example.com</a>


Output

   
 

  • target Attribute

  The target attribute determines where the linked document will open. "_blank" opens the link in a new tab or window.


<a href="https://www.example.com" target="_blank">Open in New Tab</a>


Output

 



3. Image Attributes

Attributes used with the <img> tag to control and enhance images.

  • src Attribute

  The src attribute specifies the source (URL) of the image.



<<img src="image.jpg" alt="Description">


Output

   
 

  •  alt Attribute

  The alt attribute provides alternative text for browsers that cannot display the image.


<img src="cat.jpg" alt="Adorable cat picture">

4. *Form Attributes*

Attributes associated with HTML forms, allowing user input and data submission.

  • action Attribute

  The action attribute defines the URL to which the form data is submitted.

 
      <form action="/submit" method="post">

        <!-- Form elements go here -->

      </form>


  • method Attribute

The method attribute specifies the HTTP method used when sending form data.

 
       <form action="/submit" method="get">

            <!-- Form elements go here -->

       </form>


5. Input Attributes

Attributes used with <input> elements within forms.

  •  type Attribute

  The type attribute specifies the type of input field (text, password, checkbox, radio, etc.).


<input type="text" placeholder="Enter text">


Output



  •  placeholder Attribute

 

 The placeholder attribute provides a short hint that describes the expected value of the input field.


<input type="search" placeholder="Search...">


Output




  6. Script Attributes

Attributes associated with the <script> tag for embedding or referencing JavaScript code.

  •  src Attribute

  The src attribute specifies the URL of an external JavaScript file.


<script src="script.js"></script>



  •  async Attribute

  The async attribute is used to indicate that the script should be executed asynchronously.


<script src="async-script.js" async></script>

 7. Table Attributes

Attributes used with the <table> element for structuring tabular data.

  •  border Attribute

  The border attribute sets the thickness of the border around a table.

 
      <table border="1">

        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>

    </table>


Output



  •  colspan and rowspan Attributes

 

These attributes define the number of columns or rows a table cell should span.


<td colspan="2">This cell spans two columns</td>


Output



    8. Media Attributes

    Attributes related to embedding audio and video content.

    •  controls Attribute

      The controls attribute adds play, pause, and volume controls to an audio or video element.



    <audio controls>

    <source src="audio.mp3" type="audio/mp3">

    Your browser does not support the audio element.

    </audio>


      Output



        •  autoplay Attribute

         The autoplay attribute automatically starts playing the audio or video when the page loads.


         
         <video autoplay>

         <source src="video.mp4" type="video/mp4">

         Your browser does not support the video tag.

         </video>


        Output



            9. Meta Attributes

            Attributes used with <meta> tags to provide metadata about the HTML document.

            •  charset Attribute

             

            The charset attribute defines the character encoding for the HTML document.

             
               <meta charset="UTF-8">


            • name and content Attributes

              These attributes provide information for search engines and browsers.


              <meta name="description" content="Webpage description">