Skip to main content

HTML Attributes

HTML attributes consist of names and values that provide additional information to HTML elements.

Attributes are written in the start tag and multiple attributes can be applied to a single HTML element.

Basic Structure of Attributes

HTML attributes are included within the start tag and written in the format name="value".

HTML Attribute Structure
<elementName attributeName="attributeValue"> ... </elementName>

Example Usage of Attributes

img tag with src and alt attributes
<img src="imagepath.jpg" alt="Image description" />

The "src" attribute is a required attribute for the <img> tag, specifying the path to the image.

An img tag without the src attribute will not display an image.

Examples of Key Attributes

Common HTML Tag Attributes: class, id

Just as every person is distinguished by names and social security numbers, elements on a webpage are distinguished using the class and id attributes to apply styles.
- class: Used to apply the same style to multiple elements. Multiple elements can share the same class name.
  Example of class Attribute
```
<div class="highlight">Applies the highlight class</div>
```
- id: Used to distinguish a specific element or select a specific element in JavaScript. The id value must be unique and not duplicated in other HTML elements.
  Example of id Attribute
```
<div id="main-content">HTML element with main-content ID</div>
```

img Tag: src and alt Attributes

Used to specify the source path (src) and alternative text (alt) of an image in an img element.
img tag with src and alt attributes
```
<img src="https://picsum.photos/id/237/300" alt="Dog" />
```

a Tag: href Attribute

Used to specify the destination URL of a link in an a element.
a tag with href attribute
```
<a href="https://www.example.com">Visit Website</a>
```

Follow the emphasized parts in the code to input them correctly.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.