On this page:

• Text
• Image element
• Anchor element
• Span element
• Inline decorative elements, and line break
  • Text decoration
  • Size changes
  • The line break
• Inline phrase elements
  • References
  • Emphasis

Text

The main inline element is text, which can be marked up by decorative or phrase elements (see below). Text can also be used as a link to another location in the same document (an anchor) or to another web page (a link) by being enclosed in an anchor (a) element.

Image element

Inline or floating images are placed inside any block element that can take inline elements. Typically they are placed in paragraphs.

Inline image

Here's an example of an inline image (the envelope), which integrates into a line of text. Here's the same image with a border around it.

<p>Here's an example of an inline image (the 
<img class="image-inline" src="graphics/tellenvelope.gif" alt="">
envelope), which integrates into a line of text. Here's the same image 
<img class="image-bordered image-inline" src="graphics/tellenvelope.gif" alt=""> 
with a border around it.</p>

We add the "image-inline" value to the class attribute of the img element to make the inline image align correctly with the surrounding text. Note that the alt attribute is required, even if empy. A value assigned to alt appears as fly-over text when the mouse rests over the image. We use relative addressing (see Files) to refer to the location of the image assigned to the src attribute.

Floating image

Images can also be floated to the left or right of the text with which they are associated. They are anchored vertically by the location that you add them to the text.

Here they are again with borders.

<p>
<img class="image-left" src="photos/kidskating.gif" alt="">
Images can also be floated to the left or right of the text
<img class="image-right" src="photos/kidskating.gif" alt="">
with which they are associated. They are anchored vertically 
by the location that you add them to the text.
</p>
<div class="block-divider"></div>
<p>
<img class="image-bordered-left" src="photos/kidskating.gif" alt="">
Here they are again with borders.
<img class="image-bordered-right" src="photos/kidskating.gif" alt="">
</p>

Centred image

Images can also be centred, though text does not flow around them.

Here is a centered image with a border.

<div class="text-block text-align-center">
 <img src="photos/DufferinRink_tm.jpg" alt="">
</div>

<div class="text-block text-align-center">
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
</div>

For titled and narrated images see Imageboxes on the Custom block level elements page.

Anchor element

The anchor element provides the hypertext capability of web pages. When a user clicks on text or an image enclosed by an anchor element, the browser navigates to the target specified in the anchor element (the value assigned to the href attribute). This target could be on the same page (called an "anchor"), on a new page in the same browser window, or on a new page in a new browser window (the latter two called "links"). Finally, anchor elements can be specified to open the user's email software (email link) and begin a new email with a specified target email address, subject line, and a short message. Anchors, links, and email links can be specified on either text or images.

Link

For links, we have adopted the convention that all links to Friends of Dufferin Grove website pages will open in the same window, whereas links to webpages from other websites will open in a new window. To have a link open in a new window add the target="_blank" attribute to the anchor element (note carefully the leading underscore in "_blank"). For links to internal web pages, use relative addressing (See Files). For links to external websites, use full URL addressing, including the leading "http://".

Links can also be specified with non web pages as targets, such as PDF documents (see Files) and (large) pictures. No special attribution is required to accomplish this; the browser interprets the target from the file type of the target of the link. When the target is a non-html page (such as a PDF file or a large image) we open the PDF or image in a new window, both to indicate that the link is a digression, and to give the user an opportunity to cancel loading of the target document if it is taking too long to load, without losing the source reference page.

<a href="somerelatedpage.html">Click for a related page, same department</a>

<a href="../somedepartment/someinternalpage.html">Click for another page, another department</a>

<a target="_blank" href="http://www.someotherwebsite.ca">Click for another website</a>

<a href="pdf/mypdfdocument.pdf">Click for my PDF document</a>

<a href="photos/mypicture.jpg">Click for my large picture</a>

Anchor

When the target of a link is the same page, two forms of the anchor element are used in conjunction - one for the text clicked by the user (the source or link) and the other at the target location to identify for the browser the target location of the navigation (the target or anchor). The source anchor element is in the standard link form, with the exception that the value assigned to the href attribute is the name of the target anchor element, prefixed by a hash mark (#) to indicate to the browser that the target of the navigation is an on-page anchor (eg. <a href="#anchorname">Go to target</a>). The target anchor is written in the form <a name="anchorname"></a>. This target anchor is an empty element, with no text between the opening and closing tag. It's sole purpose is to identify a target location within the HTML to the browser.

The value assigned to the name attribute of the target anchor element must be unique for anchors on that page.

<a href="#sectionlowerdown">Go to section lower down the page</a>
...
<!-- some HTML code -->
...
<a name="sectionlowerdown"></a>
<p>Some content.</p>

We commonly use the on-page links within the "On this page:" contents sections, to allow the user to navigate directly to a section of interest (see Layout patterns).

Email link

An email link is in the same general form as a standard link, with the exception that the value assigned to the href attribute is in a special form, notably by being prefixed with "mailto:". Three pieces of information can be added to the "mailto:" prefix - the email address of the recipient, text for the subject line, and text for the body of the email. See the pattern for details. Here as some samples that you can click on:

email to webmaster
email to webmaster with subject
email to webmaster with message
email to webmaster with subject and message

<p>

<a href="mailto:webmaster@dufferinpark.ca">
  email to webmaster</a><br>

<a href="mailto:webmaster@dufferinpark.ca?subject=Test email">
  email to webmaster with subject</a><br>

<a href="mailto:webmaster@dufferinpark.ca?body=Hello there">
  email to webmaster with message</a><br>

<a href="mailto:webmaster@dufferinpark.ca?subject=Test email&body=Hello there">
  email to webmaster with subject and message</a>

</p>

Note that in the last example the browser is alerted to the first extra argument with a question mark (?), and the second with an ampersand (&). For security reasons, browsers only allow relatively short strings to be assigned to the href attribute for mailing, therefore the message placed in the body of the email by the browser (if there is one) can only be a short one. The user can add any amount of text or other content as with a normal email once the new email message is presented to him or her.

Span element

Span is the generic inline container (analagous to the div on the block level element side). We use the span to define emphasis within text. We have defined several effects:

"heading-inline" is intended as an inline heading at the beginning of a paragraph; "emphasis-hot" and "highlight" provide special emphasis; and "emphasis-none" cancels emphasis within a stream of inline emphasis.

<p><span class="heading-inline">"heading-inline"</span>
is intended as an inline heading at the beginning of a paragraph;
<span class="emphasis-hot">"emphasis-hot"</span> and 
<span class="highlight">"highlight"</span> provide special emphasis; 
<b>and <span class="emphasis-none">"emphasis-none"</span> cancels emphasis</b>
within a stream of inline emphasis.</p>

<p>
 This is <b>bold</b>.
 This is <i>italic</i>. 
 This is <u>underline</u>. 
 This is <s>strikethrough</s>. 
 This is the 
 <b><i><u><s>
  combination
 </s></u></i></b>
 of all of them.
</p>

<p>
 This is <big>big</big>.
 This is <small>small</small>.
 This is a <sub>subscript</sub>.
 This is a <sup>superscript</sup>.
</p>

<p>Here is<br>a line break.</p>

Inline decorative elements, and line break

Text decoration: bold, italic, underline, and strikethrough

This is bold. This is italic. This is underline. This is strikethrough. This is the combination of all of them.

Size changes: big, small, subscript, and superscript

This is big. This is small. This is a _subscript. This is a ^superscript.

The line break

You can place a line break (no end tag, just <br> by itself) anywhere in the content text to create a line break to make the next character of text begin at the next page line.

Here is
a line break.

<p>
 This is an <acronym>acronym</acronym>.
 This is a <cite>citation</cite>.
</p>

<p>
 This is <em>emphasis</em>.
 This is <strong>strong</strong>.
</p>

Inline phrase elements

References: acronym and citation

This is an acronym. This is a citation.

Emphasis: emphasis element, strong

This is emphasis. This is strong.

See the span element above for additional emphasis elements we have defined.