Text expression
Introduction
This section covers a few techniques related to writing on the Web: emphasis and bullet-point lists. Following on from last time, links to particular places within webpages are also discussed.
Emphasis
Two types of emphasis are available on the Web.
- Normal emphasis <em>, usually displayed in an italic font
- Strong emphasis <strong>, usually displayed in boldface
Bullet-point lists
Bullet-point lists are created using the <ul> tag. Within this tag, <li> tags contain each item in the list.
Internal links
Using the <a> tag it's possible to link to a specific position within a web page.
Emphasis
Two types of emphasis - normal emphasis <em> and strong emphasis <strong> - are available within web pages. Normal emphasis is equivalent to italics; strong emphasis should be used less frequently, but is equivalent to boldface text.
Normal emphasis
You can apply normal emphasis to a word or phrase by enclosing that word or phrase in <em> ... </em> tags. Normal emphasis is equivalent to italicising a word in printed text.
Emphasis is used within paragraphs: it doesn't replace the <p> tag. For example:
<p>This paragraph <em>emphasises</em> my point.</p>
The <em> tag usually displays as italic. Speech browsers will give emphasis to the words.
Strong emphasis
Strong emphasis works much the same way: enclose the word or phrase in <strong> ... </strong> tags. For example:
<p>This paragraph contains <strong>strong words!</strong></p>
Strong emphasis, which normally displays as boldface text, should be used very sparingly. It's only appropriate when the relevant text should really jump out at the user. For example, it would be appropriate for a very important warning in a set of instructions, or for highlighting items within text that users are expected to see before reading the rest (as we saw earlier with film titles).
Display control
I've mentioned that these tags "normally display" in a particular way. As with the other tags we've seen, this appearance can be customised using stylesheets, which will be discussed in a future class. When writing text, you should choose either <em> or <strong> as appropriate for the meaning you require, regardless of how you plan to display them.
Bullet-point lists
Bullet-point lists are created using the <ul> ("unordered list") tag instead of <p>. Within this tag, <li> ("list item") tags contain each item in the list.
Example list
<ul>
</ul>
Within-page linking
If you have a long web page, you may want to link to a specific point within that page in order to save the user from scrolling. You can do this using the <a> tag - both to create a link in the normal way, and to provide the "anchors" which mark positions.
Creating an anchor
As well as creating links, the <a> tag is also used to create an "anchor" - a location within the page which you can jump to specifically.
You need to give each location a name, used to reference it. This cannot include spaces or other special characters. This is supplied as the value of the name attribute of the <a> tag.
The <a name="name"> tag should then be used to surround the text you are referencing. When you jump to this link, the text contained within <a> will be scrolled into position by the browser to make sure that it's visible.
Normally you use the <a> tag on the subtitle of the section you want, or a single paragraph. For example:
<a name="contents"><h2>Contents</h2></a>
<p>blah, blah, blah...</p>
Linking to an anchor
You create a link to an anchor in the same way as normal - using the href attribute of the <a> tag. After the address of the page, you add a # symbol and then the name of the location (the same name previously specified as a name attribute.)
If the link is to another location on the same page, you can miss out the page name, beginning the address with the # symbol.
For example, to link to the contents section shown above, from within the same page:
<p><a href="#contents">Return to contents</a></p>
Supposing the section is from a page in the current folder called example.html, then it could be linked from elsewhere:
<p>Return to <a href="example.html#contents">contents on that other page</a></p>
Example
This example file demonstrates most of the techniques covered today.
Summary
Emphasis is marked with <em> or <strong>
Normal emphasis is equivalent to italics and is marked with the <em> tag. Strong emphasis, using the <strong> tag, is also available but is less often necessary.
Bullet-point lists are marked with <ul> and <li>
The <ul> tag is used in place of a paragraph, to mark the beginning and end of a bulleted list. Within the list are one or more <li> tags that contain each list item.
Links within pages use name attribute and #
Creating links within a page is a two-step process.
- First, the target of the link must be marked with the <a name="name"> tag.
- Second, the link is created using <a href="#name">. If the link is to a section within another HTML page, then the address of that page must be given before the # in the normal way.