Inline Tags

Help Center HTML Inline Tags

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 attribute1 and attribute2. That would look like:

<tag attribute1="value A" attribute2="value B">Data</tag>

This defines Data as being of type tag with the additional type information that attribute1 is value A and attribute2 is value B.

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 link.

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.

This code:

<p><a class="internal-link" href="../../workshops/">Click here to go to the UW Catalyst Workshops Home Page</a></p>

…produces:

Click here to go to the UW Catalyst Workshops Home Page

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 a’s href attribute depending on if you want to link to a file on your site versus some other site.

This code:

<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 target of _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:

Emphasizing Text

Two slightly more boring inline tags are <em> and <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?

The workshop home page is cool and keen?

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 (a).

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 <p><em>text</em></p><p><em>text</em></p>.

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.

The <span> Tag

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>.

The <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 <em> and <strong>, the <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.

Share this page Share