HTML Attributes

Photo by DATAIDEA

HTML attributes are used to add more information to an HTML Element.

Important Things to Remember

  • HTML attributes are found in HTML tags
  • HTML attributes only appear at start tags. It will never be on end tags
  • HTML elements can have multiple attributes
  • HTML attributes are composed of name/value pairs.
  • There are some attibutes taht can be used on all HTML Elements though they may not have effects on some elements. They are called Global attributes

An attibute is composed of:

  • an attribute name
  • an equal sign (=)
  • a value sorrounded by quotation marks "value"

It looks like this: name="value"

You can also use single quotation marks depending on the situation, especially when the value contains double quotes

We will only use double quotation marks throughout the entire examples.

Attribute lang Example:

<!DOCTYPE html>
<html lang="en-US">
<!-- html document/file content goes here -->
</html>

We use the lang attribute to define the language of an HTML file

The language defined above is American English

Attribute href Example:

Links are dfined using the anchor <a> element.

On the example above we used the href attribute to tell the browser where to go.

When clicked the user will be redirected to Google(www.dataidea.org)

Attribute title Example:

The title attribute provides a tooltip for HTML Elements.

Unfortunately, it doesn’t work on mobile devices.

Attribute style Example:

On the example given above we have created a paragraph using the <p> element.

We also used the style attribute to change its font-size and color.

Attributes id and class Example:

<div id="name">
    <!-- some content goes here -->
</div>

<div class="name">
<!-- some content goes here -->
</div>

The id and class attributes give references to elements inside an HTML document

Multiple elements can have the same class values/names.

The id’s value should be unique for each element.

These help us select elements in style sheets and scripts.

To be among the first to hear about future updates of the course materials, simply enter your email below, follow us on (formally Twitter), or subscribe to our YouTube channel.

Back to top