ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

Updated on March 12, 2014

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

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)