HTML Elements That Do Not Mean What You Think They Mean

A look at some commonly misunderstood HTML elements

Format
mla apa chicago
Your Citation
Girard, Jeremy. "HTML Elements That Do Not Mean What You Think They Mean." ThoughtCo, Jan. 24, 2017, thoughtco.com/html-elements-3469988. Girard, Jeremy. (2017, January 24). HTML Elements That Do Not Mean What You Think They Mean. Retrieved from https://www.thoughtco.com/html-elements-3469988 Girard, Jeremy. "HTML Elements That Do Not Mean What You Think They Mean." ThoughtCo. https://www.thoughtco.com/html-elements-3469988 (accessed October 23, 2017).
HTML question mark
HTML question mark.

Hypertext Markup Language, or HTML, is comprised of a number of individual elements. For many of these elements, what they are used for is obvious, even if you do not know the HTML language. For instance, the HTML paragraph element, or <p>, is used for content that is meant to presented as paragraphs. This should make sense to someone, even if they are not fluent in HTML. Similarly, even those unfamiliar with HTML would likely be able to figure out what elements like lists, headings, and images are used for.

The names of these elements make it very clear as to what type of content they would be used to present.

There are other HTML elements, however, whose purpose is not so straightforward or obvious. In fact, some HTML elements do not mean what you likely think they mean at all. Let’s take a look at some of those not-so-obvious HTML elements.

Address

You would think that the HTML <address> tag is used to represent a physical mailing address, like the postal address of the business for whom the website is for. This is not the case. The address element “defines the contact information for the author/owner of a document or an article.” A postal address can be used inside these tags as long as it applies to the author of the document itself, but you would not use it on its own simply to markup a physical location on a company’s “Contact Us” page.

Aside

A newer element introduced in HTML5, “the aside content should be related to the surrounding content.”

The aside is not the sidebar of a page, although this is how many web professionals use this element. If that sidebar contains content that is tangentially related to the main content of the page, for instance the information about the author and related links that correspond to an article that is the main focus of a page, then an aside may be appropriate.

If that sidebar uses content that is not related to the main content, like subpage navigation, then an aside would not be an appropriate HTML element in that instance.

Caption

The <caption> tag must be used directly after the <table> tag. A caption is used with that table and you can only have one caption per table.

The caption is not used to add text content beneath an image. To do that, you would use the <figure> element with the image that you have selected and then add the <figcaption> element alongside the <img>.

Cite

The <cite> tag is commonly used with a <blockquote> to define who that quote is attributed to. This is incorrect and confusing, in part because there is a “cite” attribute that can be used with the blockquote element, like this:

<blockquote cite="http://www-pumpkin-king.com">

The cite element, however, is meant to define the title of a work (movie, book, song, etc.). It is not meant to be used for the artist of that work or on a person’s name.

<p><cite>Three Little Birds</cite> by Bob Marley</p>

Link

Hyperlinks are what make the Web so powerful, but the <link> tag is not how these hyperlinks are added to a webpage. Links meant to be used in the content of a page which will then take the visitor to other pages of that site or other sites entirely are done with the <a> tag.

The <link> tag is used in the <head> to define “a link between a document and an external resource.” This would be used to link an HTML page to a CSS file.

Map

A common piece of content used on many websites today are maps, but they are not added by using the <map> element. This HTML element is used to create what is known as an “image map”. This creates clickable areas for an image. While it could conceivably be used with an image that shows an actual map to make areas of that image linkable, you would not use the <map> tags around the image itself to tell the browser that it is a map of a location.

Edited by Jeremy Girard on 1/24/17