[an error occurred while processing this directive]
Go to Bottom Nav - September 18, 2021 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

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:

Opening Bracket Tag Name SPACE Attribute Attribute Value Closing Bracket Content Opening Bracket Forward Slash Tag Name Closing Bracket
< p   style ="color:red" > Your content < / p >
Opening Tag Closing Tag

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" />.

I make it easy on myself and keep things simple: everything in lower case and all attribute values in quotes. Not having to remember some exceptions is good for my memory since there so many that do need remembering.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu