Now we know how to separate out regions on our page from other regions on our page using block-level Tags, and we know that block-level tags are all contained in the
<body> tag which is one of the page tags.
Motivation and Syntax
Once we have our regions (paragraphs, headers, lists, and
<div>s) delineated, we would like to do a similar process to the content inside of a region. We would like to say that some text is a link, that some of it is emphasized in some way.
Unlike block-level tags which expand to fill the entire width of their containing block, inline tags take up only as much width as does their contained contents.
The syntax is mostly like we had before (on the General Syntax page), but the important thing to note with inline tags is that inline tags cannot be ancestors of block-level tags. That is, you cannot have a block-level tag inside of an inline tag.
With inline tags comes the next bit of HTML syntax: attributes. Attributes allow us to give more information about HTML tags. Let’s say we want to put a link on our page to Google. Unfortunately there isn’t a
<linktogoogle> tag. We do, however, have a generic link tag,
a, that enables us to link to another page. A necessary part of that
a tag is its
href attribute which indicates to which page the user should be taken when s/he clicks on the link.
In the abstract, let’s say we have a
<tag> tag that has attributes
attribute2. That would look like:
<tag attribute1="value A" attribute2="value B">Data</tag>
Data as being of type
tag with the additional type information that
value A and
The common mistake with this syntax is to incorrectly close the double-quotes surrounding the value. If you forget to close your quotes, your page will break badly, and spotting quote errors is a skill only developed with practice and a skill many wish they’d never developed. (Always close your quotes.)
Because spacing is again arbitrary, the following blocks of HTML are equivalent:
<tag attribute1="value A" attribute2="value B">Data</tag>
<tag attribute1="value A" attribute2="value B"> Data </tag>
<tag attribute1="value A" attribute2="value B" > Data </tag>
You should not however put a space between the name of the tag and the
We mentioned above that there is a generic link tag called the
a tag. The
a stands for
anchor. The name comes from the
a tag’s (seemingly disjoint) ability to set scroll-points in the document. It is best to think of
a as being a synonym for
The necessary attribute of the
a tag is
href, which stands for
hypertext reference. Again, it indicates to which page the user should be taken when s/he clicks on the link.
<p><a class="internal-link" href="../../workshops/">Click here to go to the UW Catalyst Workshops Home Page</a></p>
This is an example of an absolute path (one that contains
://). You should take a minute to review the material on the Internet File Management page of the Web Publishing at the UW curriculum. Covered in some detail on that page is what you should put as the value for an
href attribute depending on if you want to link to a file on your site versus some other site.
<p><a href="./images/html.jpg">Click here to view the HTML image</a></p>
…is an example of a relative path. It links to the file
html.jpg in the
images folder (which is itself contained in the same folder as this document, as indicated by the
This code produces: Click here to view the HTML image
Another important attribute of the
a tag is the
target attribute, which allows you to specify which window in which the link will be opened. The two common targets are
_self, which means “the same window as the link”, and
_blank, which means “a new window”.
Unless you specify otherwise, most web browsers will assume a
_self (that is, the browsers assume you want your links to open in the same window).
So if you wanted to provide a link to Google that opens in a new window, you could have:
<p><a href="http://google.com/" target="_blank">Google</a></p>
…which would produce:
Two slightly more boring inline tags are
<strong>. These tags set apart some content in the line as being apart from the rest of the content in the line in some way.
<em> is typically understood to delineate text that is different or noticeable in some way.
<strong> is typically understood to delineate text that is important in some way.
<em> content is typically rendered as being italicized while
<strong> content is typically rendered as being bold. This is just the CSS default, though, and we can change it if we want using CSS.
The following code:
<p>The <em>very scary <strong>anniversary</strong></em> had Mr. Leary all <strong>wary</strong>.</p>
Is rendered like:
The very scary anniversary had Mr. Leary all wary.
A Note on Styling
Back to nesting, how might you produce the following in HTML?
If you were not so well versed in proper nesting, you might try this incorrect code:
<p>The <a href="./">workshop <strong>home page</a> is cool</strong> and keen?></p>
The problem is, of course, that we have improper nesting. The
<strong> tag is opened inside of the
<a> tag, but it is not closed in the
<a> tag. That is, the descendant (
strong) is not opened and closed within the ancestor (
To achieve this same effect, we would have to enter:
<p>The <a href="./">workshop <strong>home page</strong></a><strong> is cool</strong> and keen?</p>
Here we have two
<strong>s, one for the
<strong> text inside the link and one for outside the link.
When we combine this idea with the rule that block-level tags cannot be descendants of inline tags, we can see easily that if we want to make 15 paragraphs
<em>phasized in a row, we would have to have 15
<em> tags. We could not have
<em><p>Text</p><p>Text</p></em>, but we could have
You can remember this rule easily by noting that inline elements are just that — in the line. It would not make sense for something “in the line” to span multiple regions.
We have these inline tags (and a lot more, actually), but we can’t just arbitrarily make up our own tags. It turns out that there is a generic inline tag similar to
<div> that we talked about on the Block-Level Tags page. This generic tag is called
<span> tag, like the
<div> tag, doesn’t make your content look any different — it just sets text on the line apart from other text on the line. Unlike
<span> tag has no default style associated with it. It is the job of CSS to make the
<span> tag look different.
When we combine the
<span> tag with the
class attribute (something that will be covered in CSS), we can, in effect, make up our own tags.