Using the Remaining HTML4 Tags - Basic HTML - HTML5, 20 Lessons to Successful Web Development (2015)

HTML5, 20 Lessons to Successful Web Development (2015)

PART I Basic HTML

LESSON 7 Using the Remaining HTML4 Tags

Images

To view the accompanying video for this lesson, please visit mhprofessional.com/nixonhtml5/.

At this point in the book you now understand what HTML is and how to use many HTML4 tags. So, in this lesson, to illustrate how you can apply your new knowledge to any and all elements, we’ll look at implementing a few of the tags you haven’t seen so far.

At the same time you need to know which HTML4 elements have been deprecated or obsoleted in HTML5. Although you can still use them (for now), deprecated and obsoleted tags have been superseded by better methods of achieving the same result, so the developers of the HTML standard are giving us a warning that they reserve the right to remove these tags altogether at some point in the future—therefore you should avoid using them in all new documents.

As well as exploring some of the remaining HTML4 elements, we’ll also be looking at how to replicate the functionality of the deprecated HTML4 tags using CSS, or alternate tags.

Conditional HTML for Internet Explorer

The Microsoft Internet Explorer browser makes use of comment tags to create conditional sections of HTML for all versions between 5 and 9. The reason for this is that IE has several different ways of interpreting HTML depending on the version of the browser used, and the workaround Microsoft created to cater for these differences is to allow developers to place several different browser-specific sections of HTML in a single document, processing only those relevant to a particular browser version.

You use IE conditional comments by inserting a pair of square brackets immediately following the opening <!-- comment marker, placing an if statement inside, like this:

Images

In this instance the text in the comment is displayed only by the IE 6 web browser. All other versions of Internet Explorer and all other browsers will completely ignore the text within the comment tags. There are several possible statement types you can use, as follows.

Simple Comparisons

The previous example is a simple comparison, in which the IE constant is tested to see whether it has a value of 6, indicating that the current browser is IE 6. You can also simply test for the browser being any version of IE by leaving out the numeric value, like this:

Images

Higher or Lower Values

If, for example, you wish to display some HTML only to versions of Internet Explorer prior to version 9, you can use this form of conditional HTML:

Images

Here the lt stands for less than, and so the content of the comment tags is only uncommented if the browser is any version of Internet Explorer up to and including version 8. Another way to achieve the same result is with the lte operator, which stands for less than or equal to, like this:

Images

You can also check for a version of IE being greater than a given value, as with the two following conditional comments, both of which only display the contents of the tags if the browser is IE 8 or greater:

Images

Images

The Not Operator

You can also test for the inverse of a comparison using the not operator (which is an exclamation mark), like the following, which displays the contents only if the browser is Internet Explorer, but not version 6. Note the use of brackets to contain the expression that follows the ! symbol.

Images

The Mark of the Web

Internet Explorer also uses comments to stamp what it calls The Mark of the Web onto an HTML document, as a way of setting the security zone to which a document applies during development. For example, the following sets the security zone to the local intranet:

<!-- saved from url=(0016)http://localhost -->

And this comment sets the security zone to the Internet:

<!-- saved from url=(0014)about:internet -->

For further information, please visit tinyurl.com/motweb.

Let′s now take a look at the tags themselves.

<abbr> … </abbr>

This tag states that the content is an abbreviation. It is most helpful to specialized browsers (such as those for visually impaired people) or search engine web crawlers, and is best used in conjunction with a title attribute so that users can see an explanation when they pass the mouse over it, like this:

<abbr title=′Sound Navigation And Ranging′>SONAR</abbr>

You can also use the <dfn> (for definition) tag in a similar way to achieve the same result.

<acronym> … </acronym> (Obsolete)

This element denotes an acronym but it is now obsolete and you should use <abbr> instead—it works in the exactly the same way.

<address> … </address>

This element denotes the contents as containing address data. It is helpful to specialized HTML readers and search engine web crawlers. Simply remember to place the opening and closing tags around any addresses you put in a document to make them more easily machine locatable, like this:

Images

<applet> … </applet> (Obsolete)

This element used to be one way you could load an external app into a document, but it is now obsolete and you should use <object> instead.

<area>

This element creates an area within an image map, which can then be styled with CSS, or have a hyperlink attached. To use it, you must first load in an image to use as a map, like this:

<img src=′face.png′ width=′250′ height=′320′ usemap=′#facemap′>

With the image loaded, you use the <map> tag to create an image map, and then place one or more <area> tags inside it to define the area(s) you want, like this:

Images

The shape attribute can have values of rect, circle, or poly, and the coords attribute must then contain the values specifying the shape. Optionally, you can supply a title attribute for a tooltip, an href to create a hyperlink, and so on. Figure 7-1 shows the face.png image loaded. The image map areas and tooltips will only be visible when the mouse passes over them.

Images

FIGURE 7-1 Several examples from this lesson

<base>

Use this tag to specify the base destination for all URLs in a document and, optionally, a target window or tab. For example, if you wish all relative links in a document to refer to the base URL http://mywebsite.com/project/ even if the document is located elsewhere on the Internet, you can make this happen as follows:

<base href=′http://mywebsite.com/project/′>

Now, any hyperlinks that are relative will be applied to that base. For example, the following will now link to http://mywebsite.com/project/news.htm:

<a href=′news.htm′>News</a>

This will work even if you serve the current document from a local file system, or from anywhere else, making this a great way to handle documents that have to be relocated away from their original location for some reason.

<basefont> (Obsolete)

With this tag you used to be able to set the default font, color, and size, but it is now obsolete and, instead, you are recommended to use CSS, like this example, which sets 12-point text in a blue Arial font:

Images

And you can then use the mystyle class like this:

<span class=′mystyle′>Some text</span>

To assign a CSS rule to all elements in a document’s body (emulating the <basefont> tag), you can apply a rule to the body as follows, but be careful as you may find that you don’t actually want everything to display the same way:

Images

<bdo> … </bdo>

With this tag you can change the direction in which text flows. It takes two values for the dir attribute: ltr (the default) for left to right—for displaying most western languages, and rtl for right to left—for displaying languages such as Arabic. You use it like this:

<bdo dir=′rtl′>Mary had a little lamb</bdo>

Underneath the face image in Figure 7-1, you can see the result of applying this HTML is to display bmal elttil a dah yraM.

<big> … </big> (Obsolete) and <small> … </small>

The <big> element enlarges the size of text but is obsolete in HTML5, so you should use CSS to achieve the same effect. For example, the following CSS rule (which should be in the <style> section of a document) creates a class called big that doubles text size:

.big { font-size:200%; }

You can then use the class like this:

Normal text. <span class=′big′>Big text.</span> Normal again.

Opposite to <big> there is the <small> tag, which is not obsolete in HTML5 because it has been assigned a semantic meaning, but can probably be better achieved with CSS when you just want smaller text rather than to imply something has less emphasis, such as the following to create a new class called small:

.small { font-size:50%; }

You can then use the class like this:

Normal text. <span class=′small′>Small text.</span> Normal again.

<blockquote> … </blockquote>

With this element you can specify a large section of text to be a quotation from another source, so that it will be styled differently, like this:

Images

To define a shorter quotation you can use the <q> tag as follows, and quotation marks will be placed around it by the browser, as shown in Figure 7-2:

Dr. Seuss said, <q>Don′t cry because it′s over, smile because it happened.</q>

Images

FIGURE 7-2 Using <blockquote> and <q> elements

<center> … </center> (Obsolete)

This tag was used to align text to the center of the browser, but it is now obsolete in favor of using CSS, such as this rule that creates a class called center:

Images

This works because it forces elements to which it is applied to display as block elements (rather than inline), before setting the text alignment to centered. Once the class has been created, just apply it to your HTML, like this:

This is some left-aligned text<br>

<span class=′center′>This is centered text</span>

<cite> … </cite>

You can provide a citation for a section of text using this tag, as follows:

<cite>Yesterday</cite> by the Beatles. Recorded in 1965.

Other than italicizing (or otherwise slightly modifying its display), this tag has no effect. Its main purpose, though, is to provide information to specialist HTML readers and search engine web crawlers indicating the title of a work.

<code> … </code>

When you wish to display some text as if it is programming code, you can use this tag as follows:

Images

However, this tag doesn’t cause line feeds to be displayed, and neither does it show the spacing. Instead the preceding example will display all on one line. To overcome this, you should restrict this tag for use on single lines, and probably use the <pre> tag instead (as shown in Figure 7-3), which displays text as it finds it—in other words, preformatted.

Images

FIGURE 7-3 The difference between <code> and <pre> elements

The <samp> tag is identical to the <code> tag and can be used in the same way, although they do have different semantic meanings in HTML5. There is also a <tt> tag, which is meant to emulate the output of a teletype machine, and the <kbd> tag, which you can use to make output display as if it has been entered at the keyboard. All have the same formatting drawback that is corrected using the <pre> tag.

Also similar to these is the <dir> tag, which is now obsolete but was intended to make its contents look like a directory listing. Again, however, it did not issue line feeds and would actually wrap several lines if you didn’t use a <br> tag after each—so it wasn’t very useful anyway. If you encounter this tag when maintaining a web page, you should probably replace it with one of the preceding non-obsolete tags.

<col> and <colgroup>

This tag specifies properties for each column within a <colgroup> section of a table. For example, to change the background colors for the columns of a table, you could use HTML such as this (as shown in Figure 7-4):

Images

Images

FIGURE 7-4 A table with colored columns

<del> … </del>

Use this tag to indicate that a section of text should display as if it has been deleted. This tag is often used in conjunction with the <ins> tag to show a modification or correction that has been made (a deletion followed by an insertion), as shown in the second line up from the bottom of Figure 7-1:

I was <del>pleased</del> <ins>delighted</ins> to meet her!

This tag should also be used in preference to the equivalent <strike> tag, which has been obsoleted in HTML5. You can also use the <s> tag for the same effect, although <s> and <del> have differing semantic meanings in HTML5.

<fieldset> … </fieldset>

When you need to group a collection of form fields together, you can do so with this tag, which draws a box around the grouped (contained) elements. In conjunction with the <legend> tag, it creates a title that breaks into the box border. Use it like this and the result will look like Figure 7-5:

Images

Images

FIGURE 7-5 Using <fieldset> and <legend> elements

<font> … </font> (Obsolete)

This obsolete tag used to let you change the font type, size, and color, all things that are better done using a CSS class, like this:

Images

And you can then use the offer class like this:

This product is on <span class=′offer′>special offer</span>!

<frameset> (Obsolete)

In the past you used to use this tag in conjunction with the <frame> and <noframes> tags to create sets of frames in a web page that contained other documents, but they have now all been removed from HTML5 in favor of using the <iframe> tag and CSS.

<hr>

With the <hr> tag, you can display a horizontal rule with which to separate sections of a document. By default the rule will be the width of the page, but you can change this by supplying different values to its width attribute, like this (which creates rules of 100 percent of the parent object, 75 percent, and 100 pixels):

Images

In HTML5, however, the <hr> tag is used thematically instead of as an actual rule, so the width attribute is obsolete, even though most browsers will still display a horizontal rule. So let’s call this element half-deprecated, and maybe choose to use other tags and CSS instead—unless you intend to use it in its semantic context, in which case it’s fine.

<iframe> … </iframe>

Using this tag, you can load another document into the current one, displaying it within a frame with dimensions that you supply, like this:

<iframe src=′http://somesite.com′ width=′300′ height=′150′></iframe>

For browsers that don’t support inline frames, you can place text between the opening and closing tags that only they will display.

<isindex> … </isindex> (Obsolete)

This tag used to provide a single-line text-input that would be sent to the server for returning a list of pages matching the query. However, it was almost never used and is now obsolete because you can do the same thing using <input> fields as detailed in Lesson 6.

<menu> … </menu> (Reserved)

This tag used to specify a clickable menu, but it was deprecated in HTML4 and it is recommended that you use CSS instead, or simply place links in an ordered or unordered list. In HTML5, however, <menu> is back to represent a list of commands, but it is not yet supported by any browsers at the time of writing.

<optgroup> … </optgroup>

When you wish to create groups of options within a <select> element, you use the <optgroup> tag, which requires a label attribute to be supplied that gives the group a title. You can then use the <option> tag as you normally would to list the options for that group. The left-hand drop-down menu in Figure 7-6 is the result of the following HTML and does not use <optgroup>:

Images

Images

FIGURE 7-6 Using <option> tags in a <select> element

The right-hand drop-down menu in Figure 7-6 was created with the following HTML, which employs the <optgroup> tag twice:

Images

<sub> … </sub> and <sup> … </sup>

With the <sub> tag, you can display text in a smaller subscript font, while the <sup> tag displays it at the same small size but in a superscript font, like this (as shown in Figure 7-7):

Images

Images

FIGURE 7-7 Using <sup> and <sub> tags for super- and subscripting

Summary

Congratulations. You have now completed the first part of this book consisting of an introduction to HTML4, and should now either have a basic understanding of what you can do with it, or if you already knew HTML, you have refreshed all its tags in your mind.

In the following lesson we’ll start to get into the nitty-gritty of HTML5 and learn exactly what the fuss is all about.

Self-Test Questions

Test how much you have learned in this lesson with these questions. If you don’t know an answer, go back over the relevant section until your knowledge is complete. You can find the answers in the appendix.

1. Which HTML tags let you use an image map on an image?

2. How can you denote text as a citation?

3. How can you change the direction of text flow from left-to-right to right-to-left?

4. What is The Mark of the Web?

5. Which tag displays text as if it has been deleted?

6. Which tag displays text as if it has been inserted?

7. How can you display text in a superscript font?

8. What HTML tag is a good way to display short quotations?

9. Which HTML tag is best for displaying long quotations?

10. Which HTML tag displays preformatted text?