Semantics

The Purpose of HTML Tags (Semantics)

The first thing you need to know about HTML tags is that they are not meant to change the look of the content they surround. By default browsers often do change the way text looks based on the HTML tags (for example <b> often bolds text, and <i> often italicizes text), but this is not the real purpose of the HTML. The purpose of the HTML is to describe and give meaning to the words it surrounds. This is called semantics. So text surrounded by <b> tags have a different meaning than text surrounded by <strong> tags, even though they are often both visually bolded.

It will confuse you if you start looking at these tags as a means to visually change the style of text. Instead you should think about these tags as giving text additional meaning that is hard to interpret with just the written word. It is also important not to rely on these default styles applied to HTML tags because they can be completely different across browser (Like from Firefox to Internet Explorer), and programs like screen readers (which audibly read the content of a website to the visitor) won't have any visual styles.

I like to say that computers are stupid. They understand what we program them to understand. Semantic markup allows us to tell the computer exactly what we want it to understand. There is no way that a computer could pick up on keywords used in a paragraph, so we can add <b> tags around the key words to help it understand. The computer can't tell what an abbreviation stands for, but we can use the <abbr> tag to help it understand.

Now semantic markup is not only meant to help the computer, the visitor also benefits from these tags. For instance a blind visitor using a screen reader can often hear the tags that surround certain text so they know what the meaning of the text is. For instance the reader would know what text is the heading, and what text is a link.

Semantic markup can also be very beneficial to the those with vision. Links can be colored different from other text, headings can be larger, emphasized text can be italicized. But remember that the default styles applied to certain tags are not why we have tags, though the designer of a website can subscribe meaning to styles by using CSS to change the defaults. For instance, the designer might decide that keywords <b> will be bolded, and text of strong importance <strong> will be bolded and red. Each tag has a different semantic meaning that with the use of CSS later can be further defined in the visual style.