HTML – Attributes

So far we have mentioned HTML attributes quite a bit. This is the appropriate time to discuss these elements.

HTML attributes can be used to provide additional characteristics or information about HTML elements.

This is what you need to know about HTML attributes.

  • Attributes must be specified inside the elements start tag
  • Attributes usually come in name/value pairs in this format; name=”value”
  • Attribute names are not case sensitive. The World Wide Web Consortium (W3C) recommends lowercase attribute anames and values in their HTML 4 recommendation and that is what we follow in this tutorial series.
  • Wrap all attribute values in double-quotes even though single quotes is supported.

Usage

In the HTML Basics chapter, we saw an example of a link that uses the href attribute of the <a> element tag. Just to refresh your memory here it is again:

<a href="https://brightwhiz.com">This is a link</a>

The above element defines a hyperlink. The href attribute specifies the URL of the page the link jumps to which is specified as a value wrapped in quotes.

We will discuss more about links in our HTML Links chapter.

The other example in the HTML basics used the <img> tag example see below.

<img src="brightwhiz.jpg" alt="brightwhiz.com" width="320" height="270">

The above example has four attributes explained below.

  • src – The source file (path to the image, base64 representation of the image, vector code such as SVG, etc)
  • alt – The text to display if the src above can not retrieve the image
  • width – The width of the image
  • height – The display height of the image

As always, we will discuss more about the <img> tag in the HTML images chapter.

The lang Attribute

Typically, you should always include the lang attribute inside the <html> tag. This tells the web browser and search engines what language the web page uses.

The example here specifies English as the web page language:

<!DOCTYPE html>
<html lang="en"> 	
   <body>
      ...
   </body>	
</html>

HTML supports country codes in the lang attribute where the first two characters define the language of the web page, and the last two characters define the country.

This example specifies English as the language and United States as the country:

<!DOCTYPE html>
<html lang="en-US"> 	
   <body>
      ...
   </body>	
</html>

For a list of ISO country codes check out our HTML Language ISO Code Reference.

Common Attributes

The most common attributes that you will use when you get deeper into working on web projects are these.

Id Attribute: used to uniquely identify any element within an HTML page.

Example:

<a href="https://brightwhiz.com" id="uniqueLink">This is a link with a unique id</a>

Title Attribute: used to supply a text label as a title for the element. In most cases, the title value is displayed as a tooltip when the cursor is hovered over the element or while the element is loading.

Example:

<p title="I'm a tooltip">This is a paragraph.</p>

Class Attribute: Used to associate an element with a style sheet, and classifies the element into a named group.

Example:

<p title="I'm a tooltip" class="specialText">This is a special paragraph.</p>

Style Attribute: Used to specify inline Cascading Style Sheet (CSS) rules within the element. We will dive deeper into style sheets when we get to the HTML Style Sheet chapter.

Example:

<p title="I'm a tooltip" style="color:red;">This is a red paragraph.</p>

Check out the full HTML attributes reference for more details about each of the HTML attributes.