HTML 10: Inline and block elements
Adding Some New Elements
You have the basic elements of HTML down. You've gone from a hand-written journal to an online version in just a few steps using the basic HTML elements <h1>, <h2>, <p>, and <img>.
Now we're going to s-t-r-e-t-c-h your brain a little and add a few more common elements. Let's take a look at Tony's journal and see where we can spruce things up a bit.
Check this out: Tony has a little quote stuck at the end of his first post. It's his remixed version of a Lao Tzu quote: A journey of a thousand miles begins with one Segway.
HTML has an element, <q>, for just that kind of thing. Let's take a look.
Meet the <q> Element
Got a short quote in your HTML? The <q> element is just what you need. Here's a little test to show you how it works:
<html>
<head>
<title>Quote Test drive</title>
<head>
<body>
<p>
You never know when you'll need a good quote.
How about <q>To be or not to be</q> or
<q>Wherever you go, there you are</q>.
</p>
</body>
</html>
Test drive this code.
- Start a new file in Notepad and call it "quote.html".
- Copy and paste the code you see above.
- Save the file.
- Test quote.html in two or three different kinds of browsers.
What has the browser done with the quotes?
Warning: some older browsers, including Internet Explorer 6, do not display double quotes around the content in the <q> element. This is unfortunate, because if you add your own double quotes, some browsers will display TWO sets of quotes. The only way to solve this problem is to use CSS to add some visual style to your quotes, such as italics. I'll show you to add italics with CSS in a few weeks.
No. We're trying to make things more structured and meaningful.
There are lots of reasons people use double quotes in text, but when we use <q> that means something specific - it means the text of an actual quote (in Tony's case, a "remixed" quote).
See! Using double quotes doesn't make something an actual quote.
In other words what we've done is to add some additional meaning by marking up the quote. Before we added the <q> element, the browser just knew it has a paragraph of text with a few double quote characters in it. Now, because we are using the <q> element, the browser knows that some of the text is a real quote.
So what? Well, now that the browser knows this is a quote it can display it in the best way possible. Some browsers will display the double quotes around the text, some won't, and in instances where browsers are using non-English languages, other methods
might be used. And don't forget mobile devices, like cell phones, or audio HTML browsers for the visually impaired. It's also useful in other situations, such as a search engine that scours the Web looking for Web pages for quotes. Structure and meaning in your pages are Good Things.
One of the best reasons (as you'll see when we get back to presentation and CSS later on) is that you'll be able to style quotes to look just the way you want. Suppose you want quoted text to be displayed in italics and colored gray? If you've added the <q> element to structure the quoted content in your Web pages, you'll be able to do just that.
Exercise 1
- Open up index.html for Tony's Journal.
- Find his Lao Tzu quote and surround it with the <q> element.
- Give the page a test drive.
