Introduction to attributes

Creating a hyperlink elementAn element used to include a hyperlink. or image elementAn element used to include an image. is not too helpful if we do not specify which hyperlink or image to use. Elements alone are not sufficient to provide all the details required. For example, although it may not be difficult for you to detect that this page is written in English, listing that information explicitly helps both search engines and screen readers. How might we provide such information?

An attribute can be added to an element to provide extra information about that element. There are various types of attributes, some of which can be added to any type of elementA part of the content of a web page. (global attributes) and some of which can only be added to specific types of elements. The language attribute, denoted lang, is a global attribute. To specify that the entire document is written in English, we add the attribute to the html elementAn element for the entire document., since it contains all of the other elements.

Glimpse of the future

The idea of having an impact on a contained element by specifying information about a containing element will be considered in much more detail in our upcoming discussion of inheritance.

The type of attribute indicates the type of information; for example, the language attribute supplies information about language. To indicate which language is being used, a value is given. We will use the value en for the language attribute, since it represents the language English.

<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

You can see the syntax (the rules for expression) for adding an attribute to the start tagA marker showing the beginning of an element. of an element:

  • name of attribute, followed by
  • an equals sign, followed by
  • the value inside quotation marks

Attributes are never added to end tagsA marker showing the end of an element.. There can be multiple attributes for a given element, written in the same manner. Although not required in HTML5, it is good practice to put a value inside quotation marks. Information represented inside quotation marks is called a string.

We will learn more attributes, some global and some not, as we progress through later modules. We will see not only that elements can have multiple attributes, but that in some cases certain attributes have an effect only when specific other attributes are present. We will also see attributes that do not require valuesSpecific information for an attribute..