Introduction to Attributes

In this module, you will discover attributes that enable you to create dynamic and engaging web pages. You will explore how attributes are related to elements and how you can use them to respond to events to improve how your content appears to your users.

When you purchase a new device like a mobile phone, you can modify the phone with options. You can get more memory, choose from a variety of colors, choose the size, and choose from different camera options. These options differentiate the phone you choose from the base model. In each case, the options you choose are attributes of the phone. An attribute in this context is a feature of something that modifies the base item in some way.

Attributes modify HTML elements. Web developers use attributes to change the style of the element, set a property like where an anchor tag should send the user and include metadata for use by a scripting program.

Typically, HTML attributes are included in the open tag of an element. They are included after the element name and before the closing bracket of the opening element. This example shows a paragraph tag with the style attribute that changes the color of the text in the paragraph element to green.

<p style=“color:green;”>This text is green</p>

And here is a diagram to show the parts of the element with this style attribute: 

 

Attributes are ways to extend the power of elements on your web page and create exactly the look and feel you want to give your users. Like all HTML code, attributes have a syntax. Learning the syntax for any element you want to modify will be an important part of your web development experience.

Attributes of Attribute

Suppose you want to change the background color of your mobile device. You might go into your phone’s settings, find the background setting, and then find the color setting for the background. The background is an attribute of your phone. The color setting is an attribute of the background attribute. Devices use these types of embedded settings for many aspects of the overall experience.

Some HTML attributes work in the same way. Many attributes also have their own attributes (also called properties) that you can set.

The “parent” is an attribute of the element.

The “child” attributes are modifications you can set on the parent.

The style attribute is a good example. Previously, you learned about styling a paragraph tag:

<p style=“color:green;”>This text is green</p>

The style attributes are applied to the paragraph element. The style element also has an attribute, which is color. That is set to green. Style has a variety of attributes you can set, and they‘re separated by semicolons. Here is an example of the paragraph element with two style attributes set.

<p style="color:green; font-weight:bold;">This text is green</p>

The style attribute will turn the text green and bold the text “This text is green”. All the properties of an attribute, like style, change the parent element. So color is an attribute of the style attribute that changes the color of the text of the paragraph element.

 

When learning HTML syntax, you‘ll learn which attributes a given element supports. This is the first step. The next step is learning how to modify the elements using the properties of those attributes.

The attributes you will use as a web developer vary greatly on the elements you need to include based on your design. However, there is a set of attributes that are common to many elements which you‘ll use often, such as:

• Style and layout attributes
• Action attributes
• Event attributes

It‘s not only important that you know how to write your code, but also that you can read code from other developers. Being familiar with common attributes will help you, both as a code author and as a reviewer.

Style and layout attributes

Many elements can be styled using an inline style or using stylesheet attributes. Styling elements enable users to have an engaging experience. Here are some common attributes you can use when laying out and styling your pages. 

Style

Sets the style of the element using a variety of properties and values. Which properties can be set to is determined by the element to which the style attribute is applied.

Id

Sets the reference of an id style in a stylesheet. id styles are used by a single element.

Class

Sets the reference of a class style in a stylesheet. Class styles can be used by one or more elements.

Display

Sets how the element should be presented relative to other elements. For example, “display: inline” will force the element and nearby elements to be presented next to each other horizontally

Aria-label

Sets a name or label to HTML elements for assistive technology (for example, screen readers).

Action attributes

Some elements rely on attributes to determine what action to enable for that element. For example, the attribute can specify what to do when a user clicks a link or when the web page needs to locate a resource. Here are some common action attributes.

href

Sets the destination of a linked resource like a hyperlink.

Src

Sets the location of a resource like a media file that should be brought into the web page.

Autofocus

Instructs the browser that the element should get the focus when the page loads.

Draggable

Indicates whether the element is draggable or not.

Event attributes

Some elements rely on attributes to determine how to respond to an event. For example, the attribute can specify what script to run when a user clicks a button. There are many event attributes you can use to create a dynamic website. Here are a few of the most used attributes.

Onclick

Sets the script function to run when the user clicks the element.

Onerror

Sets the script function to run when an error occurs.

Onkeypress

Sets the script function to run with the user pressing a key.

Onscroll

Sets the script function to run when the user scrolls the page.