HTML Attributes

❮ Prev Next ❯

HTML attributes provide additional information about an HTML element, such as its characteristics, behavior, or appearance. Attributes are used to modify the default behavior of an element, or to add extra information to it. Attributes can be added to almost any HTML tag, and their values are typically enclosed in quotes marks(" ").

The starting tag of an element can have special snippets of information we can attach, called . attributes tag.

Attributes have the key="value" syntax: 

<p class="a-class-name">A paragraph of text</p>

We can have many of them: 

<p class="a-class-name"  id="an-id-name">A paragraph of text</p>

and some attributes are boolean, meaning you only need the key: 

<script defer src="file.js">A paragraph of text</p>

The class and id attributes are two of the most common you will find used.

They have a special meaning, and they are useful both in CSS and JavaScript.

The difference between the two is that an id is unique in the context of a web page; it cannot be duplicated.

Classes, on the other hand, can appear multiple times on multiple elements.

Plus, an id is just one value. class can hold multiple values, separated by a space: 

<p class="a-class-name another-class-name">A paragraph of text</p>

It's common to use the dash - to separate words in a class value, but it's just a convention.

Those are just two of the possible attributes you can have. Some attributes are only used for one tag. They are highly specialized

Other attributes can be used in a more general way. You just saw id and class , but we have other ones too, like style which can be used to insert inline CSS rules on an element.

The href attribute

This attribute is used to specify the URL of the resource to which the hyperlink leads. It can be used with the <a> (anchor) tag, which creates a hyperlink. The href attribute can point to any valid URL, including a web page, an image, a video, or a document. The value of the href attribute is typically enclosed in double quotes.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Example of the HTML <a> tag with the href attribute:</h1>
        <a href="www.codingkoleji.com">Click here to go to the homepage</a>
      </body>
  </html>

The id attribute

This attribute is used to specify a unique identifier for an element. It is often used in CSS and JavaScript to manipulate or style an element.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
      <style>
      #text{
        font-family :sans-serif;
        font-size :20px;
        color :#777777;
      }
      </style>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Example of the div tag with the "id" attribute</h1>
        <div id="text">Here is some text for the div tag with the "id" attribute.</div>
      </body>
  </html>

The style attribute

This attribute is used to define inline CSS styles for an element. It can be used with any HTML tag, and its value is a set of CSS property-value pairs, enclosed in double quotes and separated by semicolons.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Example of the HTML <p> tag with the (style) attribute:</h1>
        <p style="color: red;font-size:16px;">This text is red and text size is 16</p>
      </body>
  </html>

Multiple Attributes

You can add multiple attributes to an HTML element by separating them with a space. For example, the following code adds three attributes to the <img> tag: 

<tagname attribute-1="value"  attribute-2="value">Content here</tagname>

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1> Example of the HTML <img> tag with the (src), (width), (height) and (alt) attributes:</h1>
        <img src="../../images/course-images/html.jpg"  alt="html image" width="200" height="185">
      </body>
  </html>

In this example, the src, alt, and width attributes are all added to the <img /> tag. Each attribute is separated from the others by a space. This is important to remember, as failing to add a space between attributes can result in a syntax error.

It's also worth noting that the order in which attributes are placed doesn't matter in HTML. That is, you can place attributes in any order you like, and the HTML parser will still understand the code.

By understanding the attribute you will have more controll on the element or tag when you come to the style. lets learn something about headings in the next chapter.

❮ Prev Next ❯