Learn everything you need to know about Attributes in HTML
Attributes in HTML are as important as oxygen is for human beings. Without attributes, HTML can’t function properly. So, learn everything you need to know about Attributes in HTML on this page!
Attributes in HTML: Ever wondered how websites make text bold, images pop, and buttons do their thing? It’s time to unveil the magic of HTML attributes – the tools that make the web look awesome! HTML attributes are super crucial for web designers. They decide how things should look, where they should go, and what happens when you interact with them. In this article, we’ll talk about attributes in HTML, Tag attributes, HTML elements, and much more!
If you’re looking to make a successful career in Full-Stack Development, then PW Skills’ Full Stack Development Course is highly beneficial in your career! With our course, you’ll be well on your way to success as a full-stack developer and will be able to secure a high-paying job in a company! So, don’t wait! Use the coupon code “READER” and avail an exclusive discount on all courses from PW Skills.
List of Attributes in HTML
HTML elements come with attributes, which are extra values used to set up the elements or modify their behaviour to meet users’ criteria. Here is a list of HTML attributes:
| List of Attributes in HTML | ||
| Attribute | Belongs to | Description |
| accept | <input> | Indicates the kinds of files the server can receive (applicable solely to type=”file”). |
| accept-charset | <form> | Defines the character encodings to be employed for submitting the form. |
| accesskey | Global Attributes | Specifies a shortcut key to activate/focus an element |
| action | <form> | Specifies where to send the form-data when a form is submitted |
| align | Not supported in HTML 5. | Specifies the alignment according to surrounding elements. Use CSS instead |
| alt | <area>, <img>, <input> | Specifies an alternate text when the original element fails to display |
| Asy nc | <script> | Specifies that the script is executed asynchronously (only for external scripts) |
| autocomplete | <form>, <input> | Specifies whether the <form> or the <input> element should have autocomplete enabled |
| autofocus | <button>, <input>, <select>, <textarea> | Specifies that the element should automatically get focus when the page loads |
| autoplay | <audio>, <video> | Specifies that the audio/video will start playing as soon as it is ready |
| bgcolor | Not supported in HTML 5. | Specifies the background colour of an element. Use CSS instead |
| border | Not supported in HTML 5. | Specifies the width of the border of an element. Use CSS instead |
| charset | <meta>, <script> | Specifies the character encoding |
| checked | <input> | Indicates that an <input> element should be already chosen when the page starts loading (for type=”checkbox” or type=”radio”). |
| cite | <blockquote>, <del>, <ins>, <q> | Specifies a URL which explains the quote/deleted/inserted text |
| class | Global Attributes | Specifies one or more classnames for an element (refers to a class in a style sheet) |
| colour | Not supported in HTML 5. | Specifies the text colour of an element. Use CSS instead |
| cols | <textarea> | Specifies the visible width of a text area |
| colspan | <td>, <th> | Specifies the number of columns a table cell should span |
| content | <meta> | Gives the value associated with the http-equiv or name attribute |
| contenteditable | Global Attributes | Specifies whether the content of an element is editable or not |
| controls | <audio>, <video> | Indicates that audio/video controls should appear, like a play/pause button, and so on. |
HTML> Tag Attributes
Here is a variety of common HTML tags, exploring their uses and possible applications while providing information about the related attributes.
- <a> (Anchor):
- href: Specifies the hyperlink destination.
- target: Determines where to open the linked document (e.g., in a new tab or window).
- <img> (Image):
- src: Specifies the path to the image source.
- alt: Provides alternative text for the image.
- <p> (Paragraph):
- align: Used to set the alignment of the paragraph (deprecated in HTML5).
- <div> (Division):
- id: Assigns a unique identifier to the division.
- class: Assigns one or more class names to the division for styling.
- <input> (Input):
- type: Defines the type of input (e.g., text, checkbox, radio).
- name: Specifies the name of the input element.
- <ul> (Unordered List) and <ol> (Ordered List):
- type: Defines the type of list marker (for ordered lists).
- start: Specifies the starting value for an ordered list.
- <table> (Table):
- border: Sets the border width around the table.
- width: Defines the width of the table.
- <form> (Form):
- action: Specifies the URL to which the form data will be submitted.
- method: Defines the HTTP method for sending form data (GET or POST).
- <iframe> (Inline Frame):
- src: Specifies the URL of the content to be displayed within the frame.
- width and height: Define the dimensions of the frame.
These attributes contribute to the structure, appearance, and functionality of HTML elements, allowing developers to create diverse and interactive web content.
Also Read: Web Application Architecture: The Complete Guide 2024
HTML Elements
The chart underneath gives a thorough list of HTML elements, providing a fast guide for developers to check and grasp their various uses and features.
Main root
| Main root | |
| Element | Description |
| <html> | It stands for the main part (top-level element) of an HTML document, so it’s also called the root element. Every other element should be children of this element. |
Document Metadata
Metadata holds details about the page, encompassing information about styles, scripts, and data to assist software (like search engines and browsers) in utilising and displaying the page. Metadata related to styles and scripts can be specified within the page itself or linked to an external file containing the necessary information.
| Document Metadata | |
| Element | Description |
| <base> | Specifies the foundational URL to be used for all relative URLs in a document. Only one element of this kind is allowed in a document. |
| <head> | Includes machine-readable details (metadata) regarding the document, such as its title, scripts, and style sheets. |
| <link> | Describes connections between the present document and an outside source. This part is frequently employed to connect with CSS but is also utilised to set up site icons (including “favicon” style icons and icons for the home screen and applications on mobile devices) and various other purposes. |
| <meta> | Represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> and <title>. |
| <style> | Holds style details for a document or a section of a document. It consists of CSS, which is put on the content of the document that includes this element. |
| <title> | Defines the document’s title that is shown in a browser’s title bar or a page’s tab. It only contains text; tags within the element are ignored. |
Sectioning root
| Sectioning root | |
| Element | Description |
| <body> | represents the content of an HTML document. There can be only one such element in a document. |
Content sectioning
Content sectioning elements allow you to organise the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.
| Content sectioning | |
| Element | Description |
| <address> | Indicates that the enclosed HTML provides contact information for a person or people, or for an organisation. |
| <article> | Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include a forum post, a magazine or newspaper article, a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. |
| <aside> | Represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes. |
| <footer> | Represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data, or links to related documents. |
| <header> | Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements. |
| <h1>, <h2>, <h3>, <h4>, <h5>, <h6> | Represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. |
| <hgroup> | Represents a heading grouped with any secondary content, such as subheadings, an alternative title, or a tagline. |
| <main> | Represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. |
| <nav> | Represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes. |
| <section> | Represents a generic standalone section of a document, which doesn’t have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions. |
| <search> | Represents a part that contains a set of form controls or other content related to performing a search or filtering operation. |
What is Attribute in Html with Example?
In HTML, attributes provide additional information about an element, influencing its behaviour or appearance. Here are a few attribute examples::
- alt Attribute:
- Example: The alt attribute in the <img> tag provides alternative text for an image, aiding accessibility and describing the image content when it cannot be displayed.
- href Attribute:
- Example: In the <a> tag, the href attribute determines the destination URL for a hyperlink, guiding users to another page or resource.
- target Attribute:
- Example: Found in the <a> tag, the target attribute specifies how a linked document should be opened, such as in a new tab or window.
- type Attribute:
- Example: Within the <input> tag, the type attribute defines the type of input field, whether it’s for text, checkboxes, or radio buttons.
- src Attribute:
- Example: The src attribute in the <script> or <img> tags denotes the source URL for a script or an image, respectively.
- width and height Attributes:
- Example: In the <img> tag, width and height attributes determine the dimensions of an image, specifying its width and height in pixels.
- action Attribute:
- Example: In the <form> tag, the action attribute specifies the URL where the form data should be submitted when the user clicks the submit button.
- id and class Attributes:
- Example: In the <div> tag, the id and class attributes provide ways to uniquely identify or group elements for styling and scripting purposes.
Understanding these attributes and their roles is fundamental to effective HTML usage, allowing developers to create well-structured and interactive web content.
Also Read: What is AngularJS? A Complete Guide for Beginners to Master in 2024
What Is an Attribute in HTML?
In HTML, an attribute is essential metadata accompanying an element, defining its characteristics or behaviour. Enclosed within the element’s opening tag, attributes consist of name-value pairs, influencing elements like links, images, and input fields. For instance, the href attribute in the anchor (<a>) tag specifies the hyperlink destination.
Attributes play a pivotal role in customising web content, facilitating interactivity, and enhancing accessibility. Their inclusion within HTML elements empowers developers to tailor the appearance and functionality of elements, contributing to the dynamic and versatile nature of web development.
What Is an Attribute in HTML?
In HTML, the for attribute is used in conjunction with the <label> element to associate the label with a specific form element. The for attribute’s value should match the id attribute of the form element it is labelling. This association benefits accessibility and user experience by allowing users to click on the label to focus on or activate the associated form element.
Here’s a simple example:
In this case, the for attribute in the <label> element refers to the id attribute of the <input> element, creating a connection between the label and the form input field.
What Is the Attribute Key in HTML?
In HTML, the term “attribute key” refers to the name of an attribute associated with an HTML element. Attributes provide additional information or instructions about the element and are composed of a name-value pair.
The attribute key is the name part of this pair, specifying the type of information or behaviour to be applied to the element. Examples of attribute keys include “src,” “alt,” and “href,” each influencing the behaviour or appearance of elements such as images, links, and more. Understanding attribute keys is crucial for effective HTML markup and the customization of web content.
Also Read: 8 Best Android Frameworks for App Development in 2024
What Is the HTML Data Attribute?
The HTML data attribute is a powerful and flexible feature introduced in HTML5, providing developers with a standardised way to embed custom data within HTML elements. It is designed to store additional information or metadata about an element without affecting its visual presentation or behaviour.
Named with the “data-” prefix, data attributes allow developers to create their own attributes and assign values to them. For example, <div data-user-id=”123″ data-username=”JohnDoe”> assigns custom data to a <div> element, storing user-related information.
These attributes are particularly useful in scenarios where developers need to associate non-standard information with an element, such as storing configuration settings, unique identifiers, or any data relevant to client-side scripting. JavaScript can easily access and manipulate these values through the DOM (Document Object Model), enabling dynamic updates and interactions without cluttering the HTML structure.
The data attribute promotes cleaner code and separation of concerns by keeping data within the HTML, aiding in better organisation and maintenance of web projects. Additionally, it enhances the potential for creating more responsive and interactive web applications by providing a standardised method for communication between HTML and JavaScript components.
Understanding and utilising HTML attributes is fundamental for effective web development. These attributes provide essential metadata and functionality to HTML elements, influencing their behaviour and appearance. By mastering attribute usage, developers can enhance accessibility, optimise SEO, and create dynamic and interactive user experiences.
Whether it’s specifying image sources, defining links, or incorporating custom data, HTML attributes empower creators to craft well-structured and responsive websites. Embracing the versatility of HTML attributes ensures a seamless integration of content and design, ultimately contributing to a more engaging and user-friendly online presence.
For Latest Tech Related Information, Join Our Official Free Telegram Group : PW Skills Telegram Group
Attribute HTML FAQs
What is the "attribute" in HTML5?
In HTML5, an attribute provides additional information about an HTML element and is typically included in the opening tag. Attributes play a crucial role in defining the behaviour, appearance, or properties of elements within a web page.
How is an attribute structured in HTML5?
An HTML5 attribute is composed of a name-value pair enclosed within the opening tag of an element. For example, in 
, src and alt are attributes, each serving a specific purpose like specifying the image source and providing alternative text.
Can an HTML5 element have multiple attributes?
Yes, HTML5 elements can have multiple attributes, and each attribute provides specific information or instructions. However, it's essential to follow proper syntax and ensure that attribute names and values adhere to HTML standards to maintain compatibility and functionality across different web browsers.
Why are attributes important in HTML5?
Attributes in HTML5 enhance the functionality and presentation of web content. They allow developers to customise elements, provide additional information, and define interactive features. Attributes contribute to creating dynamic and user-friendly web experiences by specifying various aspects such as styling, behaviour, and accessibility.
Are all HTML5 attributes applicable to every element?
No, not all attributes are universally applicable to every HTML5 element. Each element has a specific set of attributes relevant to its purpose. For instance, the a> (anchor) element may have attributes like href for specifying the hyperlink, while the element can have attributes such as type and value to define its input type and default value.
