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.
Second, we will add some text inside the button for instructions.
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>
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.
Before getting into attributes and in case you missed it, this is the second of a series of articles that will be dedicated to explaining HTML basics. The articles cover from the general definition to creating a web page with styles included. There is a Spanish version of this article here. Also, the other articles from this HTML series are HTML for Beginners (Spanish version) y HTML: Tag Nesting (Spanish version).
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.
As the name suggests, Element-Specific Attributes are attributes specific for the element denoted.
Referring to the button configured in 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>).
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 references, especially front-end web development. Check it out!
Even though 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“.
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,
Let’s use HTML tag attributes to hide the button and align the header text to the right side of the document.
……. and violá
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>
… for trying. You have a step ahead of many 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!
Always remember practice and patience will make you a better programmer.
Thanks for reading.
The following CTRL-Y articles are related somewhat to this post. You may want to check them out!:
- HTML for Beginners
- HTML: Tag Nesting
- Resources for Newbie Web Coders
- NodeJS Layered Architecture
- Programming Language: The General Parts
- What is the Rendering Engine?
- Learn to Code: Lowering the Programming Pedestal
By the Way – A playlist for you
I wrote this article while listening to the Warpaint discography on Spotify. Warpaint is definitely one of my favorite bands of all time. 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!
See you later! 🙆♀️