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

xHTML/HTML5 tags often surround the elements they are to effect (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 xHTML tags, it is easier than it seems.

Tag Layout

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

<tagName attribute="value for the attribute">Text or another element</tagName>

  1. The opening bracket tells the browser that an HTML tag is opening.
  2. The tagName comes directly after the opening angle bracket.
  3. The all-important space after the tagName, the space tells the browser that the tag name is over and the rest of the text in the tag is other data about the tag.
  4. The attribute specifies one of the characteristics of the tag. In earlier versions of HTML, there were a number of appearance formatting attributes which are all deprecated (rendered obsolete) with XHTML Strict and XHTML5; visual characteristics are assigned to the style sheet. The most common attributes you will use are id, class, and/or style.
Opening
Bracket
tagName SPACE Attribute Attribute Value Closing
Bracket
< p   style ="color:red" >

The code above is a breakdown of the tag I 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 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.

Tag Pairs

As we discussed on the HTML skeleton page, it is useful to think of HTML tags as containers. With few exceptions* (<br>,<hr>,<img> and <frame> come to mind), all tags have a closing version to end the effects of the tag. It consists of the opening bracket, a forward slash (/), the tag name and a closing bracket. The closing tag for the font tag dissected above looks like this: </p>. The closing tag has no attributes.

*In XHTML, all tags must be closed. If a tag has no closing pair (break, horizontal rule, image, frame and so on...), it must close itself. 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.

Tag Case

Are xHTML tags case sensitive? Yes... . If you have used the HTML 4 spec before, it allows the use of upper, lower. or mixed case tag and attribute names. xHTML is very similar to HTML but designed to work with XML (Extensible Markup Language), xHTML requires using lower case for tags and attributes.

Attribute Value Quotes

Do all attribute values have to be in quotes? Yes... The previously used HTML 4 spec does not require all values to be in quotes. Just as with tag case, 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.

Also, all attributes are required to have a value. An example is the noshade attribute for the horizontal rule tag. In HTML, a proper horizontal rule tag could look like: <hr noshade>. The HTML version looks like: <hr noshade="noshade" />.

Jump into the future, go see the HTML5 tag anatomy!

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