July 27, 2016

Tag Attributes: lang and title

Tag attributes

Tag Attributes

We recently learned about TAGS AND ELEMENTS in a previous lesson. Now we’ll work with tag attributes; specifically focusing on the lang attribute. An attribute provides additional information about an html element. They are always placed in the opening tag, and usually, come in name and value pairs. For example, width=”200″ is a tag attribute that might be added to an img (image element). width being the name and 200 being the value. Note: the value 200 means 200 pixels. You do not have to enter 200px. I entered it this way to show you that it will work, but I do recommend adding the px to your value.

The lang attribute

Let’s begin this lesson with the lang attribute as it is very important for screen readers and search engines when indexing the content on your web page. The lang attribute defines the language of the document and is usually declared inside of the html tag. See the image below to see how to enter it.

index.html Example 1: The lang attribute

lang attribute html

In Example 1, we have added a space and lang=”en-US” to the opening html tag. Note: The en is lowercase and US is uppercase. lang is the name followed by an equals symbol ( = ), and “en-US” is the value. The value in our lang attribute specifies that our document is written in English as it is spoken in the United States. For more lang attributes you can do a search for html lang attribute list. Throughout this tutorial series, we will be using this lang attribute value because the content that we’re working with is English as it is spoken in the U.S.. When adding this attribute, know that the first two letters specify the language and the second two letters specify the dialect. Another thing to notice is how Notepad++ recognizes this as an html tag attribute. It highlights the name in red text and the value in purple. This may be slightly different depending on which text editor you are using. Also, in most text editors you can change these “syntax highlighting” settings to whatever colors you want them to be.

Let’s use one more example with a tag attribute. This time, we’ll add one to the p element because you should be familiar with it from the PREVIOUS LESSON. See the example below.

index.html Example 2: Tag attribute

tag attribute html

Displayed Page Example 2

tag attributes display

In our final example, we add a title attribute to the p element. The value that you enter for this attribute will be displayed in a pop-up dialogue box when you hover your mouse over the paragraph. This is more commonly known as a “tooltip“. Just like the previous example, the tag attribute is added to the opening p tag; the name is title, and the value is “I’m a tooltip. You can see me when you hover over this paragraph.”.

Some end of lesson information: HTML5 does not require you to put the attribute value in double quotes or use lowercase letters in the name. It is recommended that you DO use lowercase letters for the attribute name and ALWAYS surround the value in double quotes. Also, if the value you enter has quotes in it already, you should surround it in single quotes. For example, title=’This is a “tooltip”‘ or vice versa title=”This is a ‘tooltip'”. That finishes up this lesson on tag attributes. I’ll see you next time.

index.html Source Code


<!doctype html>
<html lang="en-US">
<head>
<title>Tag Attributes</title>
</head>
<body>

<p title="I'm a tooltip. You can see me when you hover over this paragraph.">
This is a paragraph element.</p>

</body>
</html>

Clear Coded Programming

Please Leave a comment