Attributes
HTML attributes are instructions that are placed inside the opening tag of an HTML element. These attributes modify the default setting of an element by adding additional features to it.
Attributes consist of a name and a value. The name describes the type of attribute, while the value, which can be enclosed in double or single quotation marks, determines the rate of changes that can be applied to the element.
Syntax
The syntax for adding attributes to an HTML element is as follows:
<tagname attribute="value"></tagname>
Note: Attribute names are not case-sensitive, but it is good practice to write HTML markup in lowercase.
Examples
Image Attributes
Using an <img>
tag, which is commonly used to display images, reveals several attributes, such as ‘src,
width, and
height`. These attributes exert significant influence over the manner in which the image appears on the web page. For example, when the dimensions of an element are specified, its size will be maintained when rendered by a browser.
<img src="source_of_image.png" width="500" height="600" />
disabled
Attribute
The disabled
attribute is applied to form elements like buttons and inputs to make them nonfunctional:
<button disabled>Submit</button>
This is the output of the above code snippet:
Attributes
- class
- An HTML attribute used to select one or more elements for the application of styling or logic.
- dir
- Sets the direction of the text of an HTML element.
- id
- Used to specify a unique id for an HTML element, which cannot be shared across multiple elements within the same HTML document.
- src
- Specifies the location of a digital source.
- style
- Specifies how an element will be rendered in a web browser.
- title
- Contains and can display the specified information about the element it belongs to.
All contributors
- hughlilly
- Anonymous contributor
- christian.dinh
- Anonymous contributor
- danieldo19
- elliezub
- Anonymous contributor
Contribute to Docs
- Learn more about how to get involved.
- Edit this z?typeform-source=www.codecademy.com" target="_blank" class="gamut-1r92bn9-AnchorBase e14vpv2g0">Submit feedback to let us know how we can improve Docs.
Learn HTML on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner Friendly7 hours