Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Blogs about html

The DL Element.

11.14.2017

At a conference earlier this year, I was asked what my favorite HTML element was. In fact, I do have one: the Definition List, along with its children Definition Term and Definition Description. The definition list is great because it provides an inherent semantic relationship between two elements - the term and the one or more descriptions. I feel like these elements are under-used; especially considering that they've been around since HTML 4.01.

I was going to invent a clever example to demonstrate the definition list, but I don't think I can do any better than the one provided by the Mozilla Developer Network:

Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).

Here is the source code for that:

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long). </dd>
</dl>

This shows one term (Firefox) along with two definitions of that term. Because it's a list, you can add as many groups of terms and definitions as needed for your content.

HTML Reprieves.

8.14.2013

There are a few HTML tags and attributes which were deprecated in HTML4, but got a second life in HTML5. Among them:

Another 3 Books for Web Developers.

4.6.2013

After reflecting on my recent post Three Must-Read Books for Web Developers, I thought I'd also share three of the books I read when I first started building web pages back in 1999:

  1. Unknown giant HTML4 reference manual: Embarrassingly, I can't remember the precise title or author of this one. It was a 700+ page reference manual for HTML4 and XML. It may or may not have included a bit on JavaScript, but I don't think there was any CSS in it.
  2. Web Pages That Suck: Learn Good Design by Looking at Bad Design [with CDROM] by Vincent Flanders, Michael Willis: This was a design focused book which looked at a bunch of hideous and painful websites of the time. Pick up a copy if you want to see how far web site have come.
  3. JavaScript Goodies (2nd Edition) - Joe Burns, Andree Growney: This was a pretty good introduction to JavaScript for its time. I read the first edition, and then picked up the second edition when it was published in 2001.

HTML5 Default Types.

1.16.2013

You've typed <script type="text/javascript" src="foo.js"></script> about a million times. But when have you ever needed to use a type other than text/javascript for a script tag?

HTML5 understands. It assumes a default type="text/javascript" for <script> tags. It also assumes type="text/css" for <link rel="stylesheet"> and <style> tags.

For more cool HTML5 features, check out The three levels of HTML5 usage by Mathias Bynens.

Title Vs. Alt.

8.3.2011

Here is a summary of the intentions and key differences between the alt and title attributes for <img /> tags.

Alt:

The alt attribute is intended to be used instead of the image, rather than in addition to the image. It should describe all of the objects in the image. (Though technically incorrect, alt attributes are sometimes known as alt tags.)

The alt attribute is the text that should appear if the image doesn't load, or if visitor can't see image. The alt text may also appear in the image's place while the image is loading.

Include alt attributes for all images. For decorative images such as bullets or spacers, use an empty alt attribute (alt=""). (Of course, decorative images really ought to be part of the styling, not the content.) Don't use alt attributes for keyword stuffing.

IE6 will show the alt attribute when a visitor hovers over an image. Google uses an image's alt attribute when indexing images.

Title:

An image's title attribute should be used for additional, non-essential information.

In most browsers (IE7 and above, Firefox, Safari, et cetera), the title attribute will appear when the visitor hovers over the image.

Note that the title attribute can be used on many tags, not just images. For example, one good use of the title attribute is to add descriptive text about the destination on anchors / links.

More blogs about html: