HTML uses special text keywords called elements to structure and style a website. The browser recognizes an element and applies its effect if the following three conditions exist:

• The element is a letter, word, or phrase with special meaning. For example, h1 is an element recognized by the browser to apply a header effect, with bold text and an enlarged font size.

• The element is enclosed with a left-angle bracket () and right-angle bracket (>). An element enclosed in this way is called a tag (such as, for example,

  ).

• An opening tag () is followed by a closing tag (). Note that the closing tag differs from the opening tag by the addition of a forward slash after the first left bracket and before the element (such as, for example, ).

  Some HTML tags are self-closing, and don’t need separate closing tags, only a forward slash in the opening tag.

When all three conditions are met, the text between the opening and closing tags is styled with the tag’s defined effect. If even one of these conditions is not met, the browser just displays plain text.

For a better understanding of these three conditions, see the example code below:

<h1>This is a big heading with all three conditions</h1>
h1 This is text without the < and > sign surrounding the tag /h1
<rockstar>This is text with a tag that has no meaning to the browser</rockstar>
This is regular text

You can see how a browser would display this code here.

The browser applies a header effect to “This is a big heading with all three conditions” because h1 is a header tag and all three conditions for a valid HTML tag exist:

• The browser recognizes the h1 element.

• The h1 element is surrounded with a left () and right angle bracket (>).

• The opening tag (

  ) is followed by text and then a closing tag ().

Notice how the h1 tag itself does not display in the heading. The browser will never display the actual text of an element in a properly formatted HTML tag.

The remaining lines of code display as plain text because they each are missing one of the conditions. On the second line of code, the

tag is missing the left and right brackets, which violates the second condition.

The third line of code violates the first condition because rockstar is not a recognized HTML element. Finally, the fourth line of code displays as plain text because it has no opening tag preceding the text, and no closing tag following the text, which violates the third condition.

Every left angle-bracket must be followed after the element with a right angle-bracket. In addition, every opening HTML tag must be followed with a closing HTML tag. Over 100 HTML elements exist.

HTML is a forgiving language and may properly apply an effect even if you’re missing pieces of code, like a closing tag. However, if you leave in too many errors, your page won’t display correctly.