Making things stand out.
Content is good. Inevitably we will want to make various parts of it stand out as they are more important. In this section we'll look at various ways we can adjust the look of bits of the content.
In the examples below I have included only the body tag and not the entire HTML page structure (just to keep things simple). When you are experimenting yourself, remember to include the entire HTML page structure.
I will also demonstrate their usage within paragraphs and headings (as those are the only tags we have introduced so far). They may be used just about anywhere within the content of a HTML document however.
If we would like to make text bold then we use the b tag.
<b>text</b>
Orbitting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue-green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.
There is another tag <strong> which is intended to give the text importance. Most browsers will render strong text as bold but it is safer to use the b tag.
If we would like to make text italic then we use the i tag.
<i>text</i>
Only six people in the entire Galaxy understood the principle on which the Galaxy was governed, and they knew that once Zaphod Beeblebrox had announced his intention to run as President it was more or less a fait accompli: he was ideal presidency fodder.
There is another tag <em> which is intended to give the text emphasis. Most browsers will render em text as italic but it is safer to use the i tag.
If underlining is more your style then you may use the u tag.
<u>text</u>
On the day of the Great On-Turning two soberly dressed programmers with briefcases arrived and were shown discreetly into the office. They were aware that this day they would represent their entire race in it's greatest moment.
If we would like to format text in superscript then we use the sup tag.
<sup>text</sup>
In marched a squad of about a dozen men dressed in the remnants of their Golgafrincham 3rd Regiment dress uniforms. About half of them still carried Kill-O-Zap guns.
If we would like to format text in subscript then we use the sub tag.
<sub>text</sub>
There is an art, it says, or rather, a knack to flying. The knack lies in learning how to throw yourself at the ground and miss. Pick a nice day, [The HitchHikers Guide to the Galaxy] suggests, and try it.
Sometimes we may want to separate text out and a good way to do that is to create a line between them. This can be achieved with a horizontal rule which is created with a hr tag.
<hr>
This tag is not a container so it doesn't need a closing tag to go with it.
The first non-absolute number is the number of people for whom the table is reserved.
The second non-absolute number is the given time of arrival, which is now known to be one of those most bizarre of concepts.
In older versions of HTML tags which weren't containers required a slash at the end of the tag ( eg. <hr /> ). This requirement was removed in HTML5.
Now we can introduce a concept called nesting. Nesting is when one container sits entirely within another container. In the example below, the first sentence is nested properly. The second one is not.
If you do it the wrong way, pretty much all the browsers will be able to work it out ok but it is not considered correct and elegant HTML.
The exception to this is if the two containers don't fully overlap.
Once more gathering up the jaw, his brain lost control of his left hand which then wandered around in an aimless fashion..
(Note: The examples on this page use excerpts from The HitchHikers Guide to the Galaxy by Douglas Adams. If you haven't read it I strongly recommend you do. It is a great read.)
Now let's make our content a little more interesting.
As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.