03: Attributes

You now know what a tag is, and should be able to write some simple HTML for displaying text. Our next move is to learn about attributes, which are settings you can give different HTML tags to configure their behavior.

Warm-up

Knowing the names of characters you use helps you read and write code. Here's the characters you've seen in HTML so far, and what I call them.

• < -- less-than
• > -- greater-than
• = -- equal
• / -- slash, or forward-slash. Not to be confused with the \ backslash.
• " -- double-quote
• & -- ampersand
• ; -- semi-colon

Write out the following line of code so that all of the above characters are replaced with their names:

<a href="/">1 &lt; 2 == true</a>

Properties

If you take a single line of HTML you can see it has certain "properties" when it's displayed in the browser:

1. It might have a particular font.
2. There might be a box around it.
3. It could have color, underline, and other text decorations.
4. It might have a certain size.
5. It might be more or less visible.
6. It might reference another HTML document, image, or other file.

Each of these properties gets a default setting from the browser, but you can change most of them by setting new properties on the HTML tag. Let's look at the simplest anchor tag used for linking:

<a href="https://learnjsthehardway.com">Learn JS The Hard Way</a>

In this case the <a> tag has the property named href and you've set that property equal to "https://learnjsthehardway.com". This tells the browser that when someone clicks on the text "Learn JS The Hard Way" the browser should transition to the site https://learnjsthehardway.com/ as the link.

Properties in HTML all work like the href:

1. You find the name of the property.
2. You write it after the tag name inside the < > bounding characters.
3. You then write an = (equal) sign to "set" it to a value.
4. You finally write the value for this property inside quotes.

You can skip the " (double-quote) characters, but that's unreliable since something you write may need them, so always include them.

All Attributes

The concept of an attribute is easy to explain, but you need to do more than just read about it to understand it. For this lesson you're going to review the list of all attributes according to Mozilla, and then attempt to use the most common tags and attributes you will encounter. This will give you an overview of everything, but help you understand the most important attributes.

Read the list of attributes according to Mozilla and play with them as much as you can. Remember from the First Steps module that you have your server setup to serve files so you can create a simple tags.html file and place these inside it to see what they do. You should start with the basic HTML document from Lesson 01 of this module, and go from there.

Common Attributes

Here's common attributes found in various tags, and a short example. You can click on each name to view the documentation from MDN. Write your own examples for each one.

• alt -- <img alt="Zed's Logo" src="/zed.png">
• disabled -- <button disabled>Can't Click Me</button>
• download -- <a href="thing.pdf" download>download PDF</a>
• hidden -- <span hidden>I'm hidden.</span>
• href -- <a href="/">Go Home</a>
• id -- <div id="large-block">Large CSS Thing</div>
• class -- <div class="small-font">Small CSS Thing</div>
• rel -- <link rel="stylesheet" href="/style.css">
• src -- <img src="/test.png">
• style -- <div style="font-size: 2em">Big Font</div>
• data -- <h1 data-test-id="header1">Testable Header</h1>
• type -- <input type="submit">Submit Form</input>

Form Specific Attributes

Forms are so large that I'll cover them and their attributes in a separate later exercise of this module. You should take a look at these and attempt to figure them out, but keep in mind that HTML forms are the most complicated tags because they accept user input.

• accept -- <input type="file" accept=".doc">
• action -- <form action="/myform">...</form>
• autocomplete -- <input autocomplete="off" type="password">
• checked -- <input type="checkbox" checked>
• for -- <label for="username">Your Name</label>
• form -- <input form="some-form-id">
• tabindex -- <div tabindex="0">Can tab me now</div>
• type -- <input type="text">

JavaScript Event Attributes

JavaScript connects to the HTML tags you write via a group of attributes starting with on, such as onerror, onclick, onmousedown, and many others. The entire list should be documented by the wonderful Mozilla MDN project's events page. You don't need to learn these at this point, but it would be good to browse through the list and see if there's anything interesting. When you get to JavaScript you'll use probably...five of these events, six if you get really fancy.

Banished Attributes

These attributes were banished in HTML5, so if you try to use them most browsers will ignore them:

• align
• bgcolor
• border
• color

These were available for a long time, but today their job is handled better by CSS.

Studying Attributes

The list of attributes is vast and changes, but not too frequently. Trying to cover every single one in this exercise would be pointless for three very important reasons:

1. They are already well documented by the companies that created them. Mozilla documents everything they work on, and they're much more authoritative than I could ever be.
2. Reading about a giant compendium of tags and attributes isn't as effective as using them to create something.
3. You actually only need about 10% of the attributes and only occasionally need a few odd ones. Learning everything is simply pointless because you may never use them.

Cooldown

1. Make your own list of attributes that seem interesting to you, and write your own notes about the attributes I listed here. These are the ones that come up often in real web development, so learning those helps. Writing your own notes will help you remember them, and then later in the course we'll start using them which will teach you the concepts better.
2. Using only what you've learned so far, see if you can figure out how <a> links work before you start the next exercise.
3. Also try to figure out how to make a <form> for a comment system on a website. A simple form for a subject, and text input is all you need. You've seen most of the <form> tag so far, assuming you've read the documentation for the attributes.