HTML: Tag Attributes

 

Note: At some point in this article, you will be using a text editor like Notepad (PC) or TextEdit (Mac) to practice a small exercise. Keep that in mind and on hand.

The English language uses adjectives and adverbs to describe subjects and verbs, respectively. Attributes behave similarly to programming languages.

HTML attributes are words that provide additional information on how the element behaves or how the element is configured. There are two types of attributes: Global Attributes and Element-Specific Attributes.

Even though their names kind of give up each attribute type’s purpose, let’s configure a button element to illustrate how attributes contribute to the element denotation. Do not worry. You do not have to write anything during this example. Just keep reading 👀.

First, let’s include the start and end tags to denote a button.

<button></button>
Figure 1: Display of button tag example without tag attributes

Note: Buttons can be denoted using other tags, but I used <button></button> for demonstration purposes.

Second, we will add some text inside the button for instructions.

<button>Click me!</button>
Figure 2:
Display of button tag with text between tags.

I don’t know about you but at this point, I thought about styling the button. Let’s:

  • Modify shape from rectangle to circle
  • Add a background color
  • Set text color and size
  • Set width and height
<button
  style=“
    background-color: #000;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    width: 100px; height: 100px;”
>
    Click me!
</button>
Figure 3: Display of button tag with text between tags and some styling.

Now, when I click the button, it looks like this:

Did you notice the blue outline? That means that the button is focused. Because the button can be focused when clicked, we can assume that the button is enabled. So, let’s disable the button!

<button
  disabled
  style=“
    background-color: #000;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    width: 100px;
    height: 100px;”
>
    Click me!
</button>

This exercise is an example of a simple button configuration. The configuration includes style and functionality.

Element-Specific Attributes

As the name suggests, Element-Specific Attributes are attribute specific for the element denoted.

Referring to the button configured on the prior section, can you identify which configuration was button-specific?

It’s the functionality.

What do I mean by functionality? The button has the disabled attribute set to true. This means that the user cannot interact with the button, as observed earlier.

Why the disabled attribute is element-specific? Because the disabled attribute applies to elements that the user can interact with such as an input (<input></input>), text area (<textarea> </textarea>), menu (<menu></menu>). Alternatively, the disabled attribute does not apply to an element with a heading tag, let’s say h3 (<h3></h3>).

Global Attributes

Attributes known as Global Attributes are attributes that can be applied to all HTML tags.

Let’s refer to the button configured previously. Style is the button’s global attribute. It has its own set of configuration properties such as background color, border radius, color, font size, width, and height. These properties are CSS styling declarations that are responsible for making the button change its appearance.

Other examples of global attributes are class, id, and hidden. All elements written in HTML can have a class, id, or can be hidden. This MDN Web Docs article lists the most commonly used global attribute.

Side note: You will read me cite MDN Web Docs A LOT. It is because it is a very good source for web development reference, especially front-end web development. Check it out!

Even thou we are not discussing CSS in this article, it is good to mention that classes and ids are commonly used in CSS for selectors.

Another side note: In case you were wondering what a CSS Selector is, MDN Web Docs state that “CSS Selectors define the elements to which a set of CSS rules apply“.

Practice time!

It’s time for you to open, or maximize, your text editor.

As explained earlier, the code that will be used as a starting reference for this exercise is the resulting code from Part 1 of the As Easy As Series.

Copy the code from below. This code was first introduced in my article HTML for Beginners.

<html>
    <head>
        <title>Today is the day</title>
    </head>
    <body>
        <h3>Let's write machine!<h3>
        <button>Let's Go!</button>
    </body>
</html>

And here is the document display of the HTML document with tags but without attributes,

Screenshot of HTML document with tags but without attributes.
This document is the resulting exercise of Part I of the As Easy As Serie.

Let’s use HTML tag attributes to hide the button and align the header text to the right side of the document.

……. and violá

Screenshot of HTML document with tags with attributes.

Try to come up with a solution before peeking into my answer.

Here is my answer:

<html>
    <head>
        <title>Today is the day</title>
    </head>
    <body>
        <h3 style="text-align: right; width: 100%;">
          Let's write machine!
        </h3>
        <button hidden="true">Let's Go!</button>
    </body>
</html>

You are…

… for trying. You have a step ahead than much of the people that use a computer. Most people do not have any idea of how to do what you just did.

Coding is hard and it is difficult to get concepts from the get-go, but if you practice… practice… practice… it WILL get easier. Do not give up!

Use the same code, and keep reading resources such as MDN Web Docs to practice. I wrote an article Resources for Newbie Coder (link here) with the resources I use every day while coding.

Always remember practice and patience will make you a better programmer.

By the Way

I wrote this article while listening to the Warpaint discography on Spotify. Warpaint is definitely one of my favorite bands of all times. They play psychedelic pop-rock. The first time I saw them live, I was so mesmerized by their sound, and stage presence that I was convinced that they were witches who cast a spell on me during the performance. Their drummer, Stella, has inspired me to learn to play drums. Check them out below!

This is Warpaint Playlist made by Spotify

See you later! 🙆‍♀️

Leave a Reply

Your email address will not be published. Required fields are marked *