HTML attributes provide additional information about HTML elements. They are used to modify or enhance the behavior of an element, such as setting a specific size for an image or providing a link target for a hyperlink.
Attributes are always included in the opening tag of an element and usually come in name/value pairs like name="value". The attribute name specifies what kind of information is being provided, and the value gives the actual data.
An example using 'class=' and 'style=' is shown below:
<div class="container">
<h3 style="text-align:center;"></h3>
</div>Understanding and using HTML attributes is essential for controlling how elements appear and behave on a webpage. Before we dive into more advanced HTML topics, let’s explore some of the most commonly used HTML attributes.
id: Specifies a unique id for an element
class: Assigns one or more class names for an element (used for CSS and JavaScript)
style: Adds inline CSS to an element
title: Provides additional information about an element (typically shown as a tooltip)
lang: Defines the language of the element’s content
data-* : Stores custom data private to the page or application
type: Defines the input type for an <input> element (e.g., text, password, email)
placeholder: Provides a hint to the user of what can be entered in the input field
value: Specifies the default value for an input field
name: Specifies the name of the input element, which is used when the form is submitted
action: Determines where the form data should be sent upon submission
method: Defines the HTTP method (GET or POST) for sending form data
href: Specifies the URL of the page the link goes to
target: Determines where to open the linked document (e.g., <_blank> opens it in a new tab)
rel: Defines the relationship between the current document and the linked document (e.g., <nofollow>, <noopener>)
src: Specifies the path to the image file
alt: Provides alternative text for an image if it cannot be displayed
width: Defines the width of the image (in pixels or percentage)
height: Defines the height of the image (in pixels or percentage)
colspan: Specifies the number of columns a cell should span
rowspan: Specifies the number of rows a cell should span
headers: Associates the header cells with the corresponding data cells in the table
onclick: Triggers a JavaScript function when the element is clicked
onmouseover: Executes JavaScript when the mouse pointer is over the element
onchange: Fires when the value of an input element changes
Ready to start building your web pages? Explore more tutorials on HTML, CSS, and JavaScript on HowCodingWorks and take your web development skills to the next level.
Quick Links
Social Media
