Understanding HTML Attributes

    HTML-Logo

    HTML attributes are special words used within the opening tag to control the element's behavior. These are always specified in the start tag and usually come in name/value pairs like name="value".

    Example

    <img src="myimage.jpg" alt="A picture of me">

    In this example, <code>src</code> and <code>alt</code> are both HTML attributes of the <img> element. The <code>src</code> attribute specifies the source file for the image, and the <code>alt</code> attribute provides a text description of the image.

    Common HTML Attributes

    1. Class and ID

    <div id="header">...</div>
<p class="highlight">...</p>

    In the above example, <code>id</code> attribute is assigned a unique value of "header" for the <div> tag, while the <code>class</code> attribute has a value of "highlight" for the <p> tag.

    2. Style

    <p style="color:red;">This is a red paragraph.</p>

    The <code>style</code> attribute is used to make the color of the text inside the paragraph red.

    3. Src and Alt

    <img src="flower.jpg" alt="A beautiful flower">

    The <code>src</code> attribute is used to link the image file, and the <code>alt</code> attribute provides an alternative text for the image.

    4. Href and Target

    <a href="https://www.example.com" target="_blank">Visit our website</a>

    In this example, <code>href</code> has the URL of the linked page, and <code>target="_blank"></code> instructs the browser to open the linked page in a new tab or window.

    Boolean Attributes

    <input type="text" disabled>

    The input field in this case is disabled and can't be interacted with.

    Conclusion

    HTML attributes provide additional information about HTML elements. They are always specified in the start tag and can greatly increase the semantic value of the HTML, making the website more accessible, flexible, and efficient.