Part 4: Display Data - Tables and Lists
HTML has a large number of tags/elements which can be used to describe the content within them.
We’ve already seen the <p> and <span> elements back in part 2. These a contextless elements – they do not describe their content.
An example of a descriptive tag would be the <code> tag. This informs the browser (and search engine) that the contents of this element are a code example, and the browser will render it as such (usually as a fixed width font like Courier).
Quotations are popular everywhere, it’s a way of saying “it’s not just us who think this!”.
So, you will probably want to have a quotation somewhere in your site at some point.
There are two methods for this. First the <blockquote>:
The quick brown fox jumped over the lazy dog.
attribute informs users as to the source of the quote.
Blockquotes can contain multiple paragraphs (<p> elements). Because blockquotes were (ab)used by early developers to indent text, browsers do not include quotation marks at the start or end of the element. Indentation should now be handled by CSS styling, but the quote marks are still missing.
The second type of quote (example from http://www.w3.org
John said, <q lang="en-us">I saw Lucy at lunch, she told me
<q lang="en-us">Mary wants you
to get some ice cream on your way home.</q> I think I will get
some at Ben and Jerry's, on Gloucester Road.</q>
In this case, we have a nested quotation. The browser places the correct quote marks in place of the elements when drawing the page, so the output would look like:
Subscripts and Superscript
John said, "I saw Lucy at lunch, she told me 'Mary wants you
to get some ice cream on your way home.' I think I will get some
at Ben and Jerry's, on Gloucester Road."
29<sup>th</sub> of January
Abbreviations and Acronyms
<acronym title=’Radio Detection and Ranging’>Radar</acronym>
As you can see, the title for both tags is the full description of the abbreviation/acronym. I’m afraid that the argument between what constitutes an abbreviation or an acronym is for the linguists to answer.
And the rest
<em> - emphasis
<strong> - stronger emphasis
<dfn> - the defining instance of something
<code> - a fragment of code
<samp> - example output from a program
<var> - definition of a variable
<kbd> - indicates text for user input
<cite> - used in conjunction with the <q> tags:
The book by <cite>J.R.R. Tolkien</cite> begins with <q lang=’en-us’>There was a hole…</q>
There are a couple more elements for controlling how text is displayed, but they don’t carry any meaning with them.
The pre-formatted text is a simple way of just having the output exactly as you wrote it in the editor:
<pre>Multiple whitespaces will be output exactly as the user put it in</pre>
<p>Whereas in this element multiple whitespace will be condensed back into a single space</p>
The above code will be display as:
Multiple whitespaces will be output exactly as the user put it in
Whereas in this element multiple whitespace will be condensed back into a single space
I think that about covers it for the 101’s – hope you’ve found all of this helpful.
Once you have gotten used to web design in HTML, you should start looking at how CSS can be used to create some powerful designs.