Attributes in HTML

HTML (Hypertext Markup Language) is the standard language used to create web pages. One of the key components of HTML is attributes, which are used to provide additional information about an HTML element.

Attributes are added to the opening tag of an HTML element and have the following syntax: <tagname attribute="value">. For example, the "src" attribute is used to specify the source of an image in an "img" tag: <img src="image.jpg">.

There are many different attributes that can be used in HTML, and they serve different purposes. Some of the most commonly used attributes include:

The href attribute.

"href": This attribute is used to specify the URL (Uniform Resource Locator) of a link in an "a" tag.

Example:

<a href="https://www.algolesson.com">AlgoLesson</a>

Output:

The src attribute.

"src": This attribute is used to specify the source of an image or other media in an "img", "audio", or "video" tag. Here we have also used height and width attributes to specify the height and width of the media file.

Example:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <img src="WelcomeAlgoLesson.png" height="100" width="300" />
    <video src="AlgoLessonVideo.mp4" width="420" height="240" controls>
      Video File
    </video>
  </body>
</html>

Output:

The alt attribute.

"alt": This attribute is used to provide alternative text for an image, which is displayed if the image cannot be loaded. This is important for accessibility, as it allows users who are visually impaired to understand the content of the image.

Example:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <img src="WelcomeAlgoLesson.png" height="100" width="300" alt="This is AlgoLesson Logo" />
  </body>
</html>

Output:

The title attribute.

"title": This attribute is used to provide additional information about an HTML element, which is displayed as a tooltip when the user hovers over the element.

Example:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p>
      <abbr title="HyperText Markup Language">HTML</abbr> is a markup language
    </p>
  </body>
</html>

Output:

The class and Id attribute.

"class" and "id": These attributes are used to give an HTML element a specific class or id, which can then be used to style the element using CSS (Cascading Style Sheets).

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #header {
        background-color: rgb(18, 142, 184);
        color: rgb(255, 255, 255);
        padding: 30px;
        text-align: center;
      }
      .fruit {
        background-color: rgb(6, 128, 16);
        color: white;
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <h1 id="header">Welcome to AlgoLesson</h1>
    <h2 class="fruit">Apple</h2>
    <h2 class="fruit">Mango</h2>
  </body>
</html>

Output:

There are many other attributes that can be used in HTML, and the specific attributes available for a particular tag will depend on the type of element. For example, the "form" tag has attributes such as "action" and "method" that are used to specify where the form data is sent and how it is sent.

In summary, attributes are an essential part of HTML that provide additional information about an HTML element and can be used for a variety of purposes, including styling, linking, and accessibility.

Attributes in HTML

The href attribute.

The src attribute.

The alt attribute.

The title attribute.

The class and Id attribute.

No comments:

Post a Comment