HTML Attributes

HTML attributes are used to provide additional information about HTML elements, modify their behavior, or apply styles to them. Attributes are added within the opening tag of an HTML element and usually consist of a name-value pair, separated by an equal sign (=). The value is enclosed in quotation marks.

Here are some common HTML attributes with explanations and examples:

  1. id: The `id` attribute assigns a unique identifier to an HTML element. This identifier can be used for styling the element with CSS or targeting it with JavaScript.
<p id="intro">This paragraph has a unique identifier.</p>
  1. class: The `class` attribute assigns one or more class names to an HTML element. Multiple class names are separated by spaces. Class names are used for styling elements with CSS or targeting them with JavaScript.
<p class="highlight important">This paragraph has two class names.</p>
  1. src: The `src` attribute specifies the URL of an external resource, such as an image or a script file. It is commonly used with the `<img>` and `<script>` elements.
<img src="image.jpg" alt="An example image">
  1. href: The `href` attribute specifies the URL of a linked resource, such as a webpage or a file. It is used with the `<a>` element to create hyperlinks.
<a href="">Visit</a>
  1. alt: The `alt` attribute provides alternative text for an image if it cannot be displayed. This text is used by screen readers for accessibility purposes and also helps with search engine optimization
<img src="image.jpg" alt="A description of the image">
  1. title: The `title` attribute adds a tooltip to an element, displaying additional information when the user hovers over the element with their mouse
<p title="This is a tooltip">Hover over this text to see the tooltip.</p>
  1. style: The `style` attribute is used to apply inline CSS styles to an HTML element. While it's possible to apply styles directly with this attribute, it's generally recommended to use external or internal CSS for styling purposes.
<p style="color: red; font-size: 16px;">This text has inline styles applied.</p>
  1. lang: The `lang` attribute specifies the language of the content within an HTML element. It helps with accessibility, search engine optimization, and rendering special characters.
<p lang="en">This paragraph is in English.</p>

These are just a few examples of HTML attributes that can be used to enhance or modify HTML elements. Keep in mind that some attributes are specific to certain elements, while others can be used with multiple elements. By using attributes effectively, you can create more accessible, functional, and visually appealing web pages.

Was this page helpful?