What is an Attribute in HTML's elements?

In the previous post, we learned about HTML elements and how they help us arrange content on web pages. In this post, we will discuss Attributes.

Attributes help us to add some capabilities and more adjectives to elements.

As you can see in the previous post, elements alone can't accept many styles, actions, and statuses. Therefore, we use attributes to complete what we want elements to do on our web pages.

How does the use of attributes?

The first thing about attributes is that all attributes are used on the opening tags. HTML doesn't have any attributes for closing tags.

Attributes can take many forms. For example, some are just one word (enable, active, readonly), but others can be a set of "name=value;" (type = "text", id="fname") or more than a series of sets (style="color: red; background: white").

You can see a chunk of HTML codes that I used attributes on the opening tags:

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>

    <h1 style="font-size:2em">This is a Heading</h1>
    <p class="norml">This is a paragraph.</p>

    <hr>

    <form action="#">
        <input type="text" placeholder="enter your 
        name" required>
        <button type="submit">Submit</button>
    </form>


</body>

</html>

As you can see in the top code, I used the <h1> tag for the "style" attribute and changed the font size to 2em. In the <p> tag, I used the "class" attribute. I used "type," "placeholder," and "required" attributes in the <input> tags and used "type" for the submit button tag.

We'll discuss the work of each one of these attributes in the following posts.

To understand these codes better, you can rewrite the below HTML code on your machine. To run this code, you can read the two later articles. The following posts will discuss running HTML and CSS files on your machines.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
    <title>Attibute in HTML</title>
</head>

<body>
    <h1 style="color:red">This is a exercise about
      Attribute</h1>
    <h1>This is a code without Attribute</h1>

    <p>We use HTML attributes to add more capabilities
     and advantages to our codes. For example,
     this is a paragraph without any more attributes.
    </p>

    <p style="color:blue;
              background-color: lightblue;
              font-size: 2em;padding:10%;">
              But this is a paragraph with added 
              attributes in the opening tags. 
              As you see, many things have
              changed here. </p>

</body>

</html>

You can watch related videos about this post on my YouTube channel. I put my YouTube channel link at the bottom of this post and in the sidebar. You can also download the codes for this lesson from my GitHub.

Thank you for reading this article. Please comment on your opinion and read the next post.

🔸 YouTube Channel: https://www.youtube.com/@AliZokaeai

🔸 GitHub:https://github.com/AliZokaeai

🔸 Telegram: https://t.me/ali_zokaeai

🔸 Linkedin: https://www.linkedin.com/in/ali-zokaeai/

🔸 WhatsApp: https://wa.me/989362473855