Will Bontrager Blogs Website Techniques

The optgroup tag is available to use when a dropdown list has more than one category of items. The category name is printed above the items of that category.

This example illustrates a use of the optgroup tag for a dropdown of types of birds.

The optgroup tag is used to visually separate the items of each category. Note that the categories themselves are not selectable, only the actual options.

Here is the source code for the above example.

<select name="birds" id="birds">

<option>Select a Bird</option>

<optgroup label="North American Birds">
   <option value="greathornedowl">Great Horned Owl</option>
   <option value="cardinal">Cardinal</option>
   <option value="killdeer">Killdeer</option>
   <option value="sandpiper">Sandpiper</option>
</optgroup>

<optgroup label="Tropical Birds">
   <option value="macaw">Macaw</option>
   <option value="toucan">Toucan</option>
   <option value="parrot">Parrot</option>
   <option value="cockatoo">Cockatoo</option>
</optgroup>

</select>

For ease of identification, the opening and closing optgroup tags are colored blue in the above code. The label attribute, which prints the category name above the category list, is colored red.

The optgroup tag needs the label attribute so the browser knows what to print for the category name. Without a label attribute, the browser might print a blank line or it might do something different; I was unable to find an authoritive statement about that. (All of my browsers print a blank line.)

When you have two or more categories of options for a dropdown list, and you wish to separate them out for the user, the optgroup tag can be used.

(This content first appeared in Possibilities newsletter.)

The dl HTML tag seems to hardly be used anymore. But it's still good. It still works as well as it always has.

It can be used when you have terms and definitions to publish.

The letters "DL" stand for "Description List". Between the opening and closing dl tags are dt ("term") and dd ("description") tags.

Browsers have default formats for the dl HTML tag, which CSS can modify. Screen readers know what to expect when they encounter dl HTML tags.

Here is an example, rendered with your email reader's default format. (I added the background color separately.)

The dl HTML tag contains one or more dt and dd tag sets.

<dl>
<dt>title</dt>
<dd>description</dd>
<dt>another title</dt>
<dd>another description</dd>
</dl>

The above code is a guide for constructing a definition list. Below is the code for the example provided near the beginning of this article.

<dl>
<dt>Will Bontrager</dt>
<dd>A software developer who also writes non-fiction articles and fiction books. His books and writer tools are at <a href="https://willbontrager.com/">his author website.</a></dd>
<dt>Vern Harrison</dt>
<dd>Vern Harrison is a pen name of author Will Bontrager. <a href="https://vernharrison.com/">Vern Harrison books</a> are all dark Old West novels.</dd>
</dl>

Code as many dt and dd tag sets as you need for your list of terms and definitions.

If you put the dt { font-weight:bold; } CSS definition into your style sheet, the terms will become bold. That and other CSS can be applied to any of the dl, dt, and dd tags.

The description list tags are designed to be used when terms and definitions are to be published.

(This content first appeared in Possibilities newsletter.)

This article is a quick review of common and handy ways to use the 'A' tag. Some may be new to you.

To describe everything related to an 'A' tag would require a huge article. One has already been written, the anchor element article by the Mozilla people.

(If you landed here when you really were looking for how to link without using the 'A' tag, the information you want may be at the Linking Without an 'A' Tag article.)

While it can link to various types of destinations, the 'A' tag is mostly used for linking to other web pages or to other locations on the same web page.

For linking to other web pages, you need to know their URL. For other locations on the same web page, you'll need to know the id value of the HTML element being linked to.

The href is a required attribute. It tells the 'A' tag where to link to.

Here is how to link an 'A' tag to a URL.

<a href="http://example.com/the-URL-of-a-web-page.html">Another web page</a>

The text (or image) between the <a...> tag and the ending </a> tag is called anchor text (or anchor image). In the above illustration, the anchor text is Another web page.

To link to a location on the same page, the href value begins with # and ends with the id value of the HTML element being linked to.

Here is an illustration. First, an element with an id value and then the 'A' tag link.

<div id="location-to-link-to">[stuff here]</a>

<a href="#location-to-link-to">Scroll to 'stuff'</a>

Assuming the above code is on the same page, when the Scroll to 'stuff' link is tapped then the browser scrolls until the top of the div with id="location-to-link-to" is at the top of the browser's screen. If the browser cannot scroll to that location, it will scroll as close as it can.

Below is code for linking places or things that are not web pages. You can probably guess what the code does. Nevertheless, I'll mention them below the code box.

<a href="tel:212-555-1987">Call me!</a>
<a href="mailto:name@example.com">Email me!</a>
<a href="sms:222-555-7819">Text me!</a>
<a href="javascript:alert('hello')">Run this JavaScript</a>

Yes, you are right:

• The first one dials your phone when the browser is set up to do so. Otherwise, it asks for information related to your phone.

• The second one launches your email software, when it can, with the address pre-filled in. If it cannot launch your email software, it will ask for information.

• The third one either sends a text message or asks for information related to sending a text.

• The fourth one runs the JavaScript code that follows javascript:

All fun stuff.

The HTML 'A' tag is, in essence, a linking element. The above describes some of the most common ways it is used.

(This content first appeared in Possibilities newsletter.)

On web pages, there are various space widths that can be specified between words and characters or images.

The normal or default space is the spacing you see between the words in this paragraph. The spacing is generally referred to as medium spacing. There are also hair spacing, thin spacing, and thick spacing.

Here is a list of various spacing that is available. Each is specified by a named character.

⁽¹⁾When a medium space is specified with   and the text is justified, the medium space adjusts its width to match the adjusted default spacing between words for that line. Here is an example.

Publish as space with a named character when you want a specific amount of space or when two words must stay together on one line.

I generally use &thinsp between radio buttons and their label text. Also checkboxes and text. Radio buttons and checkboxes generally have margins, so I remove those first.

Here is an example of that, followed by the source code:

<style type="text/css">
input[type="checkbox"], input[type="radio"] { margin:0; }
</style>

<input type="checkbox">&thinsp;For a label

As another example of use,   can be used between images to insert a twitch of space between them — so they don't bang up against each other yet don't have the normal amount of space.

Here is an example and the source code:

 

<div>
<img src="https://willbontrager.com/coverimages/Truffles-22-recipes/20201122-cover-200w.jpg" style="max-width:125px;" 
alt="book #1 cover">&hairsp;<img src="https://willbontrager.com/coverimages/First-candy-book/BookCoverARccc(200w).jpg" 
style="max-width:125px;" alt="book #2 cover">
</div>

(The books repesented by the example images can be found at WillBontrager.com.)

When additional space is needed, the named characters can be doubled or tripled or more. As an example, A      B      C      D      E      F uses        for each space between the letters.

A      B      C      D      E      F

When spacing is important, one of the named characters for publishing space may be exactly right for the situation.

(This content first appeared in Possibilities newsletter.)