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

A Recap of the Previous Tutorial

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.

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

The HTML Paragraph Tag & Line Break Tag

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.


Illustrations of the Use of and Tags

DON'T do this. It's perfectly legal but bad form.
DON'T do this. It's perfectly legal but bad form.
The output of the preceding cod.
The output of the preceding cod.
The more logical placement. There is no confusion of the developer's intention.
The more logical placement. There is no confusion of the developer's intention.
The code includes a line break within the paragraph.
The code includes a line break within the paragraph.
The output caused by the line break within the paragraph.
The output caused by the line break within the paragraph.

HTML Text Formatting

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.

Examples of HTML Text Formatting

HTML source for the tags mentioned above.
HTML source for the tags mentioned above.
The web page displayed for this source as mentioned /  and /  default to the same values but their meanings are somewhat different
The web page displayed for this source as mentioned / and / default to the same values but their meanings are somewhat different

HTML List Markup 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.

Three Types of Lists in HTML

The markup for the three types of lists
The markup for the three types of lists
The web page display for the three types of lists.
The web page display for the three types of lists.

Wrapup and What's Next

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.

Web Design Can Become Complex Very Quickly

Web design can become complex very quickly. Right now we are dealing with one page. Good comments in the code as well as good external documentation is essential. We will look at commenting HTML files in the next tutorial.
Web design can become complex very quickly. Right now we are dealing with one page. Good comments in the code as well as good external documentation is essential. We will look at commenting HTML files in the next tutorial.

How are we Doing?

4 out of 5 stars from 1 rating of Ease of reading and applying the concepts in this tutori

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working