Inline Elements
Inline elements are used to provide additional structure or meaning for small strings of text, such as sections of a paragraph or table cell. In order for an HTML to be well-formed, all inline elements have to be nested properly within block-level elements.
There are many different inline elements in HTML that serve a variety of purposes. To start with, though, we'll look at an element that doesn't actually do anything. Bear with me. There is method in my madness.
Span Elements
The <span> tag exists solely to allow you to attach additional information to a string of text. The information you attach to it depends solely on the value of its attributes. Usually people just attach a style attribute to this element.
<span style="font-family:arial,sans-serif;color:#f00">Foo<span>
style isn't the only attribute you can add to this element: id, title, xml:lang, pretty much any standard attribute works.
Hyperlinks
The most important bit about a page is its ability to link to other pages. We accomplish this with anchors. The element we use for this is <a>.
Of course, simply putting some text in a pair of <a> tags isn't enough. The anchor has to be directed to another page, and for this we need the href attribute ('href' is short for hyperlink reference. A typical link to the home page might look like this:
<a href="index.html">Return to the home page</a>
But what if you want to link to another site, or provide a link to an email address? Again, you use the <a> tag and the href attribute, but you have to put in the complete URL. Links to external websites should contain the prefix http://, while email addresses start with mailto:. Here are a few examples.
<a href="http://www.google.com">Google</a>
<a href="mailto:example@example.com">Mail me!</a>
<a href="telnet://nanvaent.org:23">Connect to NANVAENT.</a>
Internal Links
Hyperlinks don't have to lead to other documents or sites. They can also link to other parts of documents too. Say you had a block of text like this:
<p id="foo">This paragraph isn't particularly important.</p>
Because the paragraph has an id attribute, we can link to it. We just point the href attribute to #value_of_id_attribute. Here's the code for that.
<a href="#foo">A very boring paragraph.</a>