A Web Tutorial Series: Using HTML Formatting Markup in the Page Body for Paragraphs, Lists, and HTML Text Formatting

In the previous tutorial in this series, A Web Tutorial Series: Creating Your Own Presence on the World Wide Web,, introducing HTML 5, a basic web page template was developed. The header was outlined and although details of language and character sets as well as their details regarding their choices was not extensive nor did it involve a deep discussion of the meta tag it is a sufficient as we work on building up a knowledge base.

The advantages of Notepad++ over Notepad were covered in some detail. The issues of perhaps better editing tools was not discussed as it would add an layer to complexity to the learning currently underway.

A simple example illustrateing the problem of whitespace in a tagless body provides a sufficient justification the the goals of this tutorial.

The goals for this tutorial are to look a the HTML tags for words, paragraphs, lists, words, and the subtle differences between certain tags, syntactic versus semantic will be addressed.. The concepts of default values and overriding them will be introduced but not be developed as yet.. As always, tips and techniques will be added. Specifically what information can be obtained if and when problem occurs while developing a page.

In our concluding example of the last tutorial we saw that a tagless body and line spacing between text does not make paragraphs. What does create paragraphs? The simple<p></p> tags.

The first snapshot is bad form Two paragraphs are stacked on the same line but it illustrates the point that the <p> tag is the active element which causes the new line. The third snapshot shows a saner model with each paragraph on a line.

There is another way to create a new line and that is the <br> tag. It creates a new line with the paragraph. <br> is one of those exceptions to the rule there is no ending tag. This is sometime referred to a an empty tag. Our final snapshot for section shows the <br> used with a paragraph. It does not end the paragraph.

It has been mentioned that HTML relates to content while CSS which we will be encountering later applies to style.Sometimes the distinction is blurred For example, in terms of using paragraph tags the semantic meaning is usually clear. A paragraph resents a though. Sometimes though paragraphs may be split into pieces (incomplete thoughts for stylistic reasons.

There are a number of HTML tags that seem stylistic and developers might be inclined to use CSS to format rather than using HTML.

A number of the tags have true semantic meaning. For example:

• <sub> - indicating a subscript. In a chemical formula, for example its meaning is semantic
• <sup> - indicates a superscript, here again in a mathematical meaning

Some are not so clear cut, such as:

• <var> - can be used to define variables
• <code> - representing computer code
• <kbd> - representing computer keyboard action

There may be a clue in that

• <strong> - is used to format important text
• <b> - stand for bold

and

• <em> - was intended to format code that was emphasized
• <i> - is a symbol for italic.

The fact that <strong>/<b> often (as in our case default to bold and <em>/<i> both default to italic indicates that developer sometime struggle with what should be handled in HTML versus what should be CSS on styling.

Two thing to note here: 1) <strong> could be defined by default as bold and red and <em> might by default to italic and blue; and 2) defaults can be overridden.

Overriding of values will be discuss in a future when we look at applying CSS styling to a web page which has very well defined HTML content.

A final point is that the examples presented are not an exhaustive list of HTML text formatting tags. Others will be introduced throughout this series.

The snapshots which follow give examples of the text formatting for these tags.

As with the <p> tags which by their use eliminates the problem of witespace for paragraphs. The list whitespace problem is handled in a number of ways: an unordered list, an ordered list, and a definition list. We will look at the markup for each and snapshots will follow.

An ordered list is best used when the items of the list have equal importance. For example, a grocery list which we were attempting to create in the previous tutorial. The beginning and ending tag pair is <ul></ul>.. Each item in the list is tagged <li>{the item text}</li>. The <li> items are known as children of the parent <ul>. Parent/child relationships have far reaching implications as we will see in future tutorials.

An order list is very similar to the unordered list. The parent tag is <ol>. Children are list items, <li>. The default bullets which prefix the list items in an unordered list are by default prefexed by Arabic numerals. This type of list would be used to describe lists of items in decending ored of importance,

The third type of list is is the definition list. The definition list is bounded by <dl></dl>. Within each list, the list items consist of two parts:: a term <dt>, think "defines term" and an ending tag </dt>. Each term has a description, <dd></dd>, think "defines description". Definition lists are most appropriate where a term is used as a short hand for its description. Dictionary enteries are a good example of definition lists.

We covered some significant ground in this tutorial. Paragraphs, line breaks, HTML text formatting, and lists.

We alluded to the fact that defaults can be overridden and the sometime subtle distinction between content and styling. If HTML should be focused on content, CSS as we see later should be focused on styling. The HTML can become quite awkward if too much formatting is done in the HTML code, yet there are times where it is appropriate to use the HTML text formatting tags.

In the next tutorial we will look at at parent/child relations as well as some other tags which are used in the body of a web page, such as including images and other external resources. Also as our code becomes more complex, we should also consider adding comments to the code where some aspect of the code may be unclear or where we don't have information to complete the code so that things don;t just fall through the cracks.

As this tutorial became quite long did not meet our objective of looking at problem solving, as such. This will be dealt with in the next tutorial.