HTML Attributes

HTML Attributes defines the characteristics of any HTML element. HTML Attributes are used to provide additional information about the HTML element. The HTML Attributes are added to the opening tag of an HTML element like its size, color, behavior etc.

Attributes provide additional information about the element.
Attributes are always specified in the start tag.
Attributes usually come in name and value pairs i.e. name = "value".

<!DOCTYPE html>
    <html>
      <head>
        <title>My Webpage</title>
      </head>
      <body>
        <h1>Welcome to my webpage!</h1>
        <img src="image.jpg" alt="A beautiful sunset">
        <a href="https://www.lapmos.com">Click here</a>
        <input type="text" name="username" placeholder="Enter your username">
      </body>
    </html>

In this above example, we have used various HTML attributes.

'src': The src attribute is used in 'img' tag to specify the source of the image to be displayed on the webpages.
'alt': The alt attribute is used in 'img' tag to provide the additional information that provide the alternative text of the image for described. In case the image can not displayed on the webpage, then the alternative text displayed on the webpages.
'href': The href attribute is used in 'a' tag to specify the URL of the webpage to be linked that text. In the above example, the URL is 'https://www.lapmos.com".
'type': The type attribute is used in the 'input' tag to specify the type of the input field. i.e. email, password, text, color etc.
'name': The name attribute is used to provide in the 'input' tag to given the name of the input field to identify the value of the given from the input field.
'placeholder': The placeholder attribute is used to in the 'input' tag to provide the hint to the user about what kind of input expected in the field.

'class': This attribute is used to specify the one or more class names for the HTML Elements, which is help to CSS styling or JavaScript interaction.


    <div class="container">
      <p class="text">This is some text.</p>
    </div>

'id': The id attribute is used to specify the unique identifier for the HTML element, which also used for CSS styling and JavaScript Interactions.


    <div id="main-content">
      <p>This is the main content of the page.</p>
    </div>

'style': The style attribute used to apply the inline CSS on the HTML element.

<p style="color: blue; font-size: 18px;">This text is blue and 18 pixels in size.</p>

'title': The title attribute used to provide the additional information about the HTML element when the user hover over the HTML element with the mouse.

<img src="image.jpg" alt="A beautiful sunset" title="Photo by John Smith">

'target': This attribute used in a tag to specify the URL open in new tag.

<a href="https://www.lapmos.com" target="_blank">Visit lapmos.com</a>

'disabled': This attribute is used to disable the input element or button.

<button type="submit" disabled>Submit</button>

'readonly': This attribute is used to make an input for read not write.

<input type="text" name="username" value="John Doe" readonly>

'required': This attribute is used to make an input element required, meaning that the user can not submit the form till fill the input field.

<input type="email" name="email" required>

'maxlength': This attributes set the maximum length of the input.

<input type="text" name="name" maxlength="30">

'min' and 'max': These attributes are used to specify to set the minimum and maximum values that are allowed in an input element of type "number".

<input type="number" name="age" min="18" max="99">

HTML Attributes Table

Attributes	Description
‘accesskey’	Specifies a keyboard shortcut to activate or focus an element.
‘class’	Defines one or more CSS classes to apply to and element, which can be used to style the element.
‘contenteditable’	Indicates whether an element can be edited by the user.
‘data-*’	Allows custom data to be added to an element, which can be used by scripts and style.
‘dir’	Specifies the direction of the text within an element, such as left-to-right or right-to left.
‘draggable’	Indicates whether an element can be dragged and dropped by the user.
‘hidden’	Hides an element from the user, without removing it from the document.
‘id’	Defines a unique identifier for an element, which can be used to manipulate the element with scripts and styles.
‘lang’	Specifies the language of the text within an element, using the ISO 639-1 language code.
‘style’	Defines inline CSS styles to apply to an element.
‘tabindex’	Specifies the order in which an element should be focused when the user navigate using the keyboard.
‘title’	Provides additional information about an element, which is typically displayed as a tooltip.
‘translate’	Indicates whether the text within an element should be translated by the browser.
‘alt’	Specifies alternative text to display if an image cannot be loaded or if the user is using a screen reader.
‘src’	Specifies the URL of the media file to be displayed, such as an image, video, or audio file.
‘href’	Specifies the URL of the linked document or resource.
‘target’	Specifies the target window or frame for the linked document or resource, such as “_blank” to open in a new window.
‘rel’	Specifies the relationship between the current document and the linked document, such as ‘stylesheet’ for a CSS file.
‘type’	Specifies the MIME type of the media file, such as ‘text/css’ for CSS file.
‘value’	Specifies the value of an input field, such as the text entered in a text box or the selected option in a drop-down list.
‘name’	Specifies the name of an input field, which is used to identify the field when the form is submitted.
‘placeholder’	Provides a hint or example text for an input field, which is displayed until the user enters text.
‘required’	Indicates that an input field must be filled out before the form can be submitted.
‘readonly’	Indicates that an input field is read-only and cannot be edited by the user.
‘disabled’	Disables an input field or button, preventing the user from interacting with it.
‘multiple’	Indicates that a drop-down list or file input field can accept multiple values.
‘selected’	Specifies that an option in a drop-down list is selected by default.
‘checked’	Specifies that a checkbox or radio button is checked by default.
‘min’	Specifies the minimum value of an input field, such as number or date.
‘max’	Specifies the maximum value of an input field, such as a number or date.
‘step’	Specifies the increment or decrement value for an input field of type ‘number’
‘autofocus’	Specifies that an input field or button should be focused automatically when the window load.

🖤 0

Buy me coffee ☕

HTML Attributes

HTML Attributes Table

Comments