HTML tags and attributes

Practice

The idea of this practice is that you open a file, as seen in the tutorial "How to begin", and start writing some code. By doing this you'll get used to open and close tags and to test the results of your work in the browser. The practice will consist of the creation a paragraph with an abbreviated term inside. In addition, we'll set some attributes for the elements involved.

Our first step is to create the paragraph with its content. Paragraphs are inserted with the p element, following the sequence: opening tag, content and closing tag.

<p>Today I woke up decided to learn HTML on my own.</p>

Today I woke up decided to learn HTML on my own.

Once you added the paragraph, save your file and open it in a browser to see how it looks like once rendered. At this point you may note that your document doesn't look much like the example above. This is because the format of this website gets inherited by the example boxes. Furhter in these tutorials we're going to learn some more about that. By now, just ignore these small changes and focus on the content.

The next step in this practice is to markup the abbreviated term "HTML". We do this with the help of abbr, wrapping the abbreviated term with its opening and closing tags. For now, we're only stating that the term is an abbreviation.

<p>Today I woke up decided to learn <abbr>HTML</abbr> on my own.</p>

Today I woke up decided to learn HTML on my own.

This is saying that "HTML" is an abbreviated term, but it isn't providing its expanded version. For abbr, the global attribute title has a particular purpose, which is to provide the expanded version of the abbreviated term inside the element.

To add the title attribute to our abbr element we need to insert a space after the element's name in the opening tag, and use the attribute's formula: attribute name, equal sign ("=") and attribute value enclosed by quotes. Remember that the value in this case is the explanation of the abbreviated term ("Hypertext Markup Language").

<p>Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own.</p>

Today I woke up decided to learn HTML on my own.

title is an attribute you can "taste": when you put the mouse pointer over the element, you can see the explanation of the term appearing as a tooltip. But some attributes go unnoticed in most users experience. This is the case of our next incorporation: lang.

Chances are that you don't get to see the difference between the previous example and the one below. However, many user agents use this information at some level. For example, voice browsers, commonly used by visually impaired people, use this attribute to adjust the pronunciation of the voice synthesizer to the specified language.

The procedure for adding the lang attribute to the paragraph (p element) is the same that we used for title, only that this time we're providing a language tag as value of the attribute.

<p lang="en-US">Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own.</p>

Today I woke up decided to learn HTML on my own.

That's it for now with elements and attributes. We're skipping the practice of events as it's very unlikely that you need it at this level. There's plenty of time to go back and see something more about them when you're ready to add some client-side scripts.

Next tutorial ›

Prev123