August 28, 2023 by admin

HTML/CSS Reference for DMET 155/355

Description Lists

Description lists are quite often forgotten. This is maybe because they are much more specific than ordered and unordered lists and therefore less useful, generally, but where there is a list of terms and descriptions (such as a glossary), a description list is your go-to-element.

dl gets the ball rolling, similar to the ul and ol elements, establishing the list. Rather than containing li elements, though, description lists have dt elements, which are the terms, followed by dd elements, which are the descriptions associated to the dt elements.

There doesn’t have to be one dt followed by one dd, there can be any number of either. For example, if there are a number of words that have the same meaning, there might be a number of dt’s followed by one dd. If you have one word that means various different things, there might be one dt followed by several dd’s.

<h1>Some random glossary thing</h1>
<dl>
    <dt>HTML</dt>
    <dd>Abbreviation for HyperText Markup Language - a language used to make web pages.</dd>

    <dt>Dog</dt>
    <dd>Any carnivorous animal belonging to the family Canidae.</dd>
    <dd>The domesticated sub-species of the family Canidae, Canis lupus familiaris.</dd>

    <dt>juice</dt>
    <dt>beer</dt>
    <dt>Milk</dt>
    <dd>A white liquid produced by cows and used for human consumption.</dd>
</dl>

See the Pen Glossary by Nicholas D’Angelo (@ndangelo) on CodePen.

<figure>
    <img src="obelisk.jpg">
    <figcaption>Tixall Obelisk</figcaption>
</figure>

Note that the img element doesn’t need an alt attribute IF the figcaption (that’s “figure caption”, in case you need it spelling out) does that job.

See the Pen figure and caption by Nicholas D’Angelo (@ndangelo) on CodePen.

1. Included the following in a wrapper.
2. Include an “aside” to this definition list. You can add it when you have completed the definitions. The aside will be easy to add.
3. Include 10 terms and definitions.
4. Use a unique style in CSS. The codepen example is simple CSS. Have fun with this! add rounded corners, drop shadows etc…
5. Add Images to each definition. Take a look at the “figure” tag example.

Text: Addresses, Definitions, Bi-directional, and Editorial

OK, so we should all be know by now that there are lots of tags for text. We’ve done paragraphs, we’ve done headings, we’ve even done abbreviations, quotations, and code. And there are several other, more obscure tags that can be used. Obscure because you won’t find them plastered around the Web, not because they are unhelpful. If you find you have text that fits these elements’ descriptions, you will have a nicer, richer, more meaningful HTML page if you use them.

Addresses

address should be used specifically for the contact details relating either to the entire web page (and so only used once) or to an article element (see Sectioning). It’s isn’t, as it might at first appear, for marking up any old address willy-nilly.

<h3>Author contact details</h3>
<address>
<ul>
    <li>0123-456-7890</li>
    <li>author_dude@noplaceinteresting.com</li>
    <li>http://www.noplaceinteresting.com/contactme/</li>
</ul>
</address>

Definition terms

dfn is a definition term and is used to highlight the first use of a term. Like abbr, the title attribute can be used to describe the term.

<p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>

Bi-directional text

bdo can be used to reverse the direction of the text, and can be used to display languages that read right to left. The value of the required attribute dir can be ltr (left to right) or rtl (right to left).

<bdo dir="rtl">god lmth</bdo>

Editorial

ins and del are used to display editorial insertions and deletions respectively. Strictly speaking, they aren’t limited to text and can be used over whole swathes of content but, typically, they are used in moderation just like “Track Changes” feature in word processors tend to be.

They can have the attributes datetime to indicate when the edit was made and cite, to point to a description as to why the edit has been made.

<p>I have decided to <del datetime="2013-01-26">decrease</del> <ins cite="http://www.icecreamforall.com/changeofpolicy/">increase</ins> the amount of free ice cream that the State will provide for its citizens.</p>

As with traditional word processor-based editing, the ins element is typically shown underlined and the del element is usually displayed with a strikethrough.