Introduction
This is a very, very, very long line that should produce a horizontal scroll bar no sweat. If it doesn't, I have a serious problem.
Another, shorter line.
This is a very long line outside of any foldunder divs. Again, it should produce a horizontal scroll bar no sweat. If it doesn't, I have a serious problem.
This document touches on some of the lesser used HTML elements. Most can be done quite effectively with old school elements like <p>, <div>, <span>, and <pre>.
Most were introduced in version 5 of HTML (HTML5), for the purpose of being more semantic.
Definition
For the purposes of this document, semantic means pertaining to the element name's context or usage rather than the element's appearance.
New semantic element name |
Old semantic method |
|
<menu> | <div class="menu"> for vertical, <span class="menu"> for horizontal. |
|
<nav> | <div class="nav"> for vertical, <span class="nav"> for horizontal. |
|
<code> | <span class="code"> | |
<abbr> | <span class="abbr"> | |
<cite> | <span class="cite"> |
<video>
A lot of people, myself included, think that the <video>
element is the greatest improvement in HTML5, and believe me, HTML5 has a lot of improvements. The <video> element enables any old halfway standard audio file to be streamed. Capable browsers now have this streaming capability on seeing a valid <video> element.
This represents a huge leap forward. Before HTML5, playing a video involved one of three things:
- Download then play on a dedicated player, or
- Use that awful proprietary closed source Flash Video, or
- Navigate the strange, difficult and proprietary world of Realaudio.
That was then, this is now. The following code plus result shows how incredibly easy it is to put a streaming video on your web page. And believe me, it streams. That video is well over 20MB, yet it starts in an instant.
<video controls> <source src="video/band.mp4" type="video/mp4"> video>
The <video>
element can take multiple source elements, so if one doesn't work, the next one can try. The multiple sources can even be of the same file, but with different file codecs, etc.
The <video>
element has the preload
property, which, if specified, can be set to none
, metadata
or auto
.
none
means don't play the clip until the whole thing is downloaded. The only purpose I see for this is to inconvenience the user, unless a significant number of users are expected to be on such slow lines connections that the video would keep starting and stopping. Remember dialup?
metadata
is what I use. It loads the metadata and then stops until the video is requested to play. The metadata, including video length, makes the streaming download easier and faster, making the rest of the streaming easier on the connection, browser and computer.
auto
means start loading the video when loading the page. I'm not a fan. It's a waste of the Internet's bandwidth, and on slow connections it slows the web experience for the sake of a video the visitor might not even want to see.
The <video>
element has other attributes. The following list shows some of them:
- controls: Specifies whether or not to put controls on the video's window. I can't think of a reason not to.
- controlslist: This specifies which controls to put on the video's window.
- height: Specifies the window's height in CSS pixels, not percentages or
em
. - loop: Specifies that the video plays over and over again.
- muted: Specifies that the video window starts up muted, so the visitor has the option of turning the sound on or leaving it off. This is a bad idea on short clips because the visitor won't have time to turn it off.
- src: Instead of using this attribute, use the
<source>
child element instead.
This section has barely scratched the surface of the <video>
element. Do more research as necessary.
<audio>
The <audio>
provides a nice way to stream an audio file. It has pretty much the same attributes as the <video>
element described previously in this document. It's customary to have it contained in a <figure> element, with a <figcaption> element to describe the audio being played. The following shows HTML code and results of a <audio>
sample.
<figure> <figcaption>Sample audio clip:</figcaption> <audio src="audio/pinecrest.wav" controls></audio> </figure>
<figure>
and <figcaption>
The <figure>
element provides a standard way to contain a figure and its caption. I seldom use it because my figures come immediately after "the following figure ...:", but you may find it very handy. It typically contains two child elements, an image of some kind and a <figcaption>
element containing the figure's caption.
<address>
This element provides a standard and consistent way to format addresses. It can also be used for contact info such as email address, contact website, and phone number. It can be styled as desired with CSS. Each line must be terminated with <br/>
, or the whole address runs together. The following is an example:
888 Happiness Highway
Bliss, CA, 90000
(555) 555-5555
The more addresses or contact info you have in your documents, the more important this element becomes.
<bdi>
and <bdo>
These elements are used for languages read from right to left. If you have need of this, familiarize yourself with these elements.
<menu>
A semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li< elements).
<meter>
This element is a great way to graphically represent a quantity with a maximum, minimum, and current value.
<label>Fuel level (21):</label> <meter id="fuel" min="0" max="100" low="25" high="80" optimum="90" value="21"> </meter><br/> <label>Fuel level (50):</label> <meter id="fuel" min="0" max="100" low="25" high="80" optimum="90" value="50"> </meter><br/> <label>Fuel level (85):</label> <meter id="fuel" min="0" max="100" low="25" high="80" optimum="90" value="85"> </meter><br/>
You can use Javascript to increase or decrease the <meter>
element reading in real time.
<code>
Very, VERY nice. It's used to signify inline code. Where's this been all my life?
For the past ten years I've been using <span class="code">
for this purpose. <code>
is just as semantic, just as Styles Based Authoring compliant, and less typing, which is wonderful for such a frequent tag.
<nav>
This represents a section of a page showing a set of navigational links on page or off; providing navigation links either within the current document or to other documents. Common examples of navigation sections include link lists to other pages, tables of contents, and indexes. This element helps people using a reader, and it provides an opportunity to give all navigation sets a consistent appearance.
By putting <nav>
</nav>
tags around a set of navigation links, you give the visually handicapped person using an HTML reader the clue that this whole section is links. Secondarily, you can set the appearance of the <nav>
element to make your navigational links distinct from other content yet uniform among themselves.
Do Not put CSS Styling On <nav>
!!!
First, always remember that the <nav>
element is used for screen readers, not for sighted people looking at the web page with their eyes. If you change colors, fonts, or font sizes in <nav>
elements, this gives no help to those using screen readers, but it can hurt the reading experience of the sighted, because new contrasts must be made for unvisited, visited, hovered and active links. It's like a glue trap, you get your finger stuck so you push the glue trap away with your other hand, and now the hand is stuck so you push it away with your feet and now your feet are stuck, so you push it away with your head, and pretty soon your whole body is stuck. Inevitably everything causes other problems. Ironing out all those problems is a long, difficult process.
Nothing in the HTML specification prevents you from CSS styling the <nav>
element, but doing so places you squarely on the highway to heartache. CSS styling <nav>
elements does nobody any good, and makes your life complicated and annoying. If all this isn't bad enough, all these CSS changes can screw up existing pages depending on the same CSS file. Don't use CSS styles on your <nav> elements!
Example: Nav Section
WARNING:
Some examples of <nav>
sections use buttons as links. This is a bad idea.Wrapping a button in <a>
<a>
triggers an error on the W3C validator. Other ways to do it are non-semantic, misleading, and can lead to confusion for those with screen readers. And remember, people in general expect buttons to take an action, not to follow a link.
<kbd>
I think, but am not sure, that this element is used in command line interface interactions to signify what the user typed in, as opposed to what the program output. Until now I've been using <span class="userinput">
. I might make the switch in the future.
Whether or not <kbd>
renders in a typewriter font is left to the browser, so I'd suggest strongarming it to a typewriter font with CSS.
<dd>
, <dl>
,
and <dt>
<dl>
Represents a description list. The element encloses a list of groups of terms (specified using the <dt>
element) and descriptions (provided by <dd>
elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
<dt>
Specifies a term in a description or definition list, and as such must be used inside a <dl> element. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.
<dd>
Provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).
Putting Them Together
<dd>
, <dl>
,
and <dt>
can be put together to form a glossary list, as shown in the following example:
<dl> <dt>C:</dt> <dd>A very low level compiler.</dd> <dt>Python:</dt> <dd>A indentation dependent interpreter.</dd> <dt>Ruby:</dt> <dd>A indentation <em>in</em>dependent interpreter.</dd> <dt>Javascript:</dt> <dd>The primary language of website construction.</dd> <dd>Parent of NodeJS, Vue and several other modern technologies.</dd> <dt>Cobol</dt><dt>DBASE</dt><dt>LISP</dt> <dd>Old time languages.</dd> </dl>
- C:
- A very low level compiler.
- Python:
- A indentation dependent interpreter.
- Ruby:
- A indentation independent interpreter.
- Javascript:
- The primary language of website construction.
- Parent of NodeJS, Vue and several other modern technologies.
- Cobol
- DBASE
- LISP
- Old time languages.
<blockquote>
This is used to enclosed a long quotation. A URL for the source of the quotation may be given using the cite
attribute. I'm not sure what good this does, because the URL doesn't show up in the visible browser.
I prefer to use the <cite>
element so that the actual URL gets displayed, as shown in the following example:
SOLUTIONS CAN'T BE MASS PRODUCED! They can't be bought and sold. A piece of diagnostic software, or test equipment, or automated service manual is not a solution. It's a tool used to find the solution. It's vital Management understand this distinction, yet often they don't. Why not?
http://
www.troubleshooters.com/ tpromag/9702.htm #just_the_solution
<cite>
Used to mark up the title of a cited creative work. Also used to cite the URL or other citation information for a >blockquote<
.
<ruby>
, <rp>
and <rp>
Heaven knows why these elements are named the way they are, but they're pretty cool. They're used to put explanatory text above other text. See the following example code and result:
<p>The guy who <ruby>invented the theory of relativity<rp>(</rp> <rt>Albert Einstein</rt><rp>) </rp></ruby> was a genius.</p>
The guy who invented the theory of relativity was a genius.
An explanation of the preceding is needed. The <ruby>
tag starts the whole thing. Inside the <rt>
tags is the text that goes on top. But what the heck is the <rp>
element? It stands for "ruby parenthesis", with one <rp>
</rp>
pair containing an opening parenthesis before the <rt>
element, and another <rp>
</rp>
pair containing an closing parenthesis after the <rt>
element. The purpose of these parentheses is so that a browser that doesn't recognize <ruby>
shows the "text on top" in parentheses after the normal text. These days most mainstream browsers recognize the <ruby>
element, so <rp>
will probably get less important as time goes on.
In the previous example notice that "Albert" and "Einstein" appeared on opposite ends of the text they were applied to. This can probably be modified with CSS.
The main usage of the <ruby>
element is usually used for showing the pronunciation of something written in a foreign language or foreign character set.
<samp>
As a practical matter, <samp>
pretty much duplicates <code>
. Both can be used to represent inline source code such as variables, or inline output of a program. Theoretically, <samp>
should be used for program output and <code>
should be used for things like variables in a program. They are both rendered monospace in most browsers. So personally, I can't think of a reason to use <samp>
.
<q>
Used to contain a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element. For instance, Steve Litt says CSS is great!
.
I personally don't use <q>
because if you copy and paste from text with a <q>
element, the copy does not have quotation marks. Also, please be aware that the quotation marks are slanted smart quotes, not ASCII 34/HTML "
. But I can see how it might be handy for some HTML authors.
<search>
Represents a part that contains a set of form controls or other content related to performing a search or filtering operation.
<s>
Strikethrough: Text crossed out by a line through it's center. The <s> element is used for things that are no longer relevant or no longer accurate. However, it is not appropriate for document edits. For document edits, use the <del>
and <ins>
elements.
<s>
is not semantic, but rather describes appearance. I'd suggest using a class for every situation, even if there's only one situation in your document. So instead of using just <s>
, you should use something like <span class="obsolete">
instead.
<sub>
Subscript. Lowered baseline and smaller text. If there are more than one kind of subscript in your document, for instance, element numbers for a set(N1, N2, N3) as opposed to the quantity of each element in a molecule's chemical formula (H2O, CO2, C2H5OH), you can create different classes for <sub>
<sup>
Superscript. Raised baseline and smaller text. If there are more than one kind of superscript in your document, for instance, math exponents, copyright and trademark symbols, ordinal numbers like 1st and 2nd, and other superscript uses, you can create different classes for <sup>.
<small>
:
This sentence precedes the sidenote. Do you like it very much? I do too, but that's just me.
I almost put this element in my Not A Fan section, but because it has one legitimate use I'm putting it here.
I'm trying to find the correct way to implement side notes, but it's very hard. VERY hard. What a hassle!
The preceding example is implemented using two <div>
elements, one of class presidenote
, which contains the text to the left, and the other of class sidenote
, which contains the smaller text to the right. The CSS definitions of these two element classes follow:
div.presidenote, div.sidenote{ display: inline-block; margin: 0.5ex; margin-left: auto; margin-right: auto; vertical-align: top; max-width:70%; margin-right: -6px; vertical-align: top; margin-top: -2ex; }
div.sidenote{ width: 10em; border-left: 4px solid; padding-left: 5px; margin-left: 10px; vertical-align: top; margin-top: -0.2ex; }
Although this once made the font temporarily smaller, which in my opinion is a very bad use of it, the modern use of <small>
is to implement a sidenote.
Note:
The preceding sidenote construction is responsive because the sidenote folds under the text it applies to if the screen width becomes too narrow to hold them side by side.
<dfn>
Used to indicate a term being defined. within the context of a definition phrase or sentence. The ancestor <p> element, the <dt>/<dd> pairing, or the nearest section ancestor of the dfn
element, is considered to be the definition of the term. The following is an example:
- HTML: The markup language used to create most websites.
- CSS: Stands for Cascading Style Sheets, it's the language that acts to convert semantic styles into appearances.
- The word semantic means referring to the underlying context or meaning, and not to appearance.
The preceding example is an ordinary <ul>
type list with the strings "HTML", "CSS" and "semantic" inside a <dfn>
</dfn>
pair.
<abbr>
Represents an abbreviation or acronym. I'm not quite sure why these things need a special style, but if you have the need, go for it.
Not a Fan
This section mentions elements I don't use and consider of negligible value. Some of these elements are so silly don't even know they ever got in the standard!
<big>
: Deprecated for a good reason: It's confusing and stateful. You should specify font size explicitly, for every style, with CSS.<frame>
and<frameset>
: The darling look of 1998, these atrocities should have never happened, but at least now they're deprecated.<i>
: Originally standing for "italic", this element describes an appearance, not a context. You should use<em>
. Or if the purpose of italics aren't emphasis, make a new<span>
class, with the class name revealing the usage and context.<b>
: Originally standing for "bold", this element describes an appearance, not a context. You should use<strong>
. Or if the purpose of bold isn't extreme emphasis, make a new<span>
class, with the class name revealing the usage and context.<mark>
: To quote from the Mozilla Developer Network page on<mark>
"Represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context."Say what? Seriously, the preceding "definition" tells me nothing about when to use it, so I won't. To achieve Styles Based Authoring, I recommend a special, aptly named class of
<span>
instead.<section>
: See this section's special section for <section> later in this document.<article>
: This is supposed to be used on a section of the document that's independent of the rest and can be used elsewhere or standalone. Your mileage may differ, but I think<article>
is more trouble than it's worth.<aside>
: Supposed to represent something indirectly related to the web page's content. Perhaps a short explanation or note. What's the point? I'd prefer to use<div class="note">
/<div>
or<div class="warning">
or something like that.<hgroup>
: Supposed to group a heading with a paragraph, I suppose to create a poor man's subtitle to the heading's title. Um, no! And if the complexity weren't enough, the Mozilla Developer's Network page on<hgroup>
recommends not using it because it doesn't work properly with assistive technologies.<header>
: To quote the Mozilla Developer Network, "The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements." Too much for me. That same MDN page also says this element has accessibility concerns.
<section>
To almost quote the Mozilla Developer Network (MDN) docs on <section>
: The <section>
HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions." What does that all even mean?
How do I dislike this? Let me count the ways. First, where do you put the heading, and what style do you use for it, and is it inside or outside of the <section>
container? Unclear.
Also not mentioned is how deep in the H1 through H6 hierarchy you need to use sections. Examples on the MDN web pages and elsewhere show sections at descending levels. So sections within sections within sections. That spells a lot of added complexity, both in the document's DOM hierarchy, and for the human reading the HTML.
And what does it really gain for you? Not a whole lot. The blind person with a reader can deduce sections just like a sighted person: By the H1-H6 hierarchy. Correct use of <section>
elements can ease conversion of HTML to ePub eBooks or Beamer presentations, but incorrect usage from mistakes is easy and would mess up the eBook or presentation. I guess theoretically we're now supposed to use <section>
, but I won't be doing it without massive reasons to use it. The H1-H6 hierarchy is good enough for me.