HTML5 Tags

HTML tags define elements in your document (headings, paragraphs, lists), link to other files to be used by the page (cascading style sheets, images), or add form elements to collect user data. This general statement covers ≈90% of HTML tags; it is easier than it seems.

Tag Layout

HTML tags always start and end with angle brackets or the "less than <" and "greater than >" symbols. The layout looks like this:

The code above is a breakdown of the opening HTML tag used to make this paragraph have red text. A paragraph with no color styling will have the usual or default text color, often black.

The Tag Name comes right after the opening angle bracket with no space between the two. Most tag names are easy to remember; however, a good reference book or web site is invaluable for help with the less used ones. In this case, the "p" stands for paragraph.

The SPACE that comes after the tag name is vital. It tells the browser that the tag name has ended and attributes are coming next.

Attributes are characteristics of the tag. In the example above, the style attribute (with its value) specifies to the color of the paragraph text. It is very common to have more than one attribute in a tag.

The Attribute Value gives a numerical or contextual value to the attribute if the attribute needs one. In this case, color:red tells the paragraph to have red text.

Attribute/Value pairs need to be separated from each other by a space.

Tag Pairs

The majority of HTML tags come in pairs, the closing half ends the effects of the tag on the content they surround. The closing half of a tag consists of the opening bracket, a forward slash (/), the tag name it is closing and a closing bracket. The closing tag for the paragraph tag dissected above looks like this: </p>. The closing tag has no attributes.

Commonly referred to as "standalone" elements, void elements have no closing pair. Void elements are: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr . *In XHTML, all tags must be closed. Void elements close themselves; this is accomplished by adding a space and a forward slash ( /) before the closing angle bracket (>). Thus, the HTML <br> tag becomes the XHTML <br /> tag, <hr> becomes <hr />, and so forth. HTML5 does not require void elements to be closed.

Tag Case

HTML5 tags are not case sensitive. Uppercase, lowercase, and "camelCase" are all allowed for the tag name and attribute names. However…

xHTML tags are case sensitive. xHTML requires using lower case for tags and attributes since it was designed to "play well" with XML.

Attribute Value Quotes

Do attribute values have to be in quotes? For HTML5, sometimes. If the value contains spaces or "control" characters (=, +, &, ?, and so on…) then it must be enclosed within quotes. Otherwise, quotes are not needed.

The previously used HTML 4 spec does not require all values to be in quotes, xHTML requires all values to be enclosed in quotes.

Technically, "double primes" or "inch marks" are used to enclose the attribute values, “curly quotes” that are used in print don't work.

HTML5 attributes are not required to have a value and they may have an empty value (some-attribute=""). In xHTML, all attributes are required to have a value. An example is the noshade attribute for the horizontal rule tag. In HTML 3 or 5, a proper horizontal rule tag could look like: <hr noshade>. The xHTML version looks like: <hr noshade="noshade" />.