HTML Text Tags

Chapter 5 of Creating Web Sites: The Missing Manual deals with HTML text tags. HTML was created to give the web designer less control over placement of text because each person viewing the site will see it differently. There is no control over the type of monitor, screen settings or Web browser that a user will utilize. If text is placed exactly on the designer's monitor it may look completely different on a user's monitor; creating a site that the designer did not intend. HTML tags create the fundamental structure of your site. The Web browser interprets the code and displays the elements.

Guidelines Successful Web Sites Use:

1. A web page should be functional in a window with a resolution of 640 x 480 pixels (dots). This is the highest resolution on a Windows 95 system computer. There may be some scrolling involved for the user however, the majority of the page should be viewable to the user. The importance of your page being viewable to this resolution is that it prevents users that utilize an older computer from being able to view your site.
2. One's page should appear at its best at a resolution of 800 x 600 pixels; which is the most common monitor screen size of today.
3. The page should still have a decent appearance when viewed above 800 x 600 pixels.

There are two different types of tags:

1. Logical tags (or idiomatic tags) which define the content type such as headings, quotations, or paragraphs. This type of tag structures your document.
2. Physical tags (or typographic tags) which create formatting such as italics, underlining, boldface. The most popular tags are <b>and <i> tags.

* Note when creating a web or postal address is automatically formatted in italics.

Logical tag can let other programs besides Web browsers analyze HTML documents.

The semantic web refers to the concept of the web as a place where the contents of the page are are most important as opposed to the appearance of the page. It is the stress on the knowledge or information available on the web.

CSS (Cascading Style Sheets)

A CSS is a separate document created to control the formatting of your web page or web site. This is a way of separating the content from the structure of the elements. Using CSS are useful in that they can be reused with other web pages. They also save time because formatting is applicable to a whole document so it is not necessary to add tags throughout a document. Applying physical changes to web page is simpler for this reason.

Basic Text Tags

Numerous tags are used to create block elements which are portions of text sectioned off (using a line break and a small amount of space) on a Web page. Using a block element is a simple way of formatting a document. It does however create automatic spacing between block elements which may not always be the look one is looking for and is where style sheets come in handy.

An inline element is a tag that is placed within block elements for instance the image tag or the line break tag.

The paragraph tag (<p>) is a container tag that distinguishes it as a paragraph of text. In order for a browser to separate a line between paragraphs a line break tag is required. I you apply multiple spaces in a paragraph, it will only indicate one space.

To get more space without a line break, you will need to use a non-breaking space character to instruct a browser to insert a space. Text does not wrap when using this character.

Line breaks are used when one would like a new line but does not require a new paragraph. The line break (<br>) is not a block element so that it can be used anywhere in a document. Line breaks should not be overused since they can create pages do not look right in different sized resolutions. Line breaks should be used for addresses, outlines, poems and anywhere else more control is needed. They should never be used in bulleted and numbered lists.

Headings are section titles located above a paragraph. There are six heading levels with <h1> being the largest and <h6> being the smallest in size. <h5> and <h6> are smaller in size than regular sized text; this is why they are rarely used. Headings are important in that they describe the composition of your document.

Horizontal lines (<hr>) separates text using a horizontal line that runs from one side of its container to the other and separates everything above and below it. Usually horizontal lines are used to separate paragraphs. Sometimes they are used in a small container like a table cell.

Preformatted text (<pre>) differs from the rules of HTML in that it will mimic every space and line break you enter in a web browser. The text will be converted into a monspaced font such as Courier. Monospaced font is font where every letter takes up the same amount of space.

Quotes is a block element which is not often used in a Web page. When it is used it is usually to insert poetry. A <blockquote> tag is used for long quotations. The text display is indented on the left and right sides.

The tag <q> is used to nest short quotations inside another block of text. The majority of browsers will not format the <q> tag and one will be required to format it using italics. The best way though is to add the <q> tag to your style sheet.

Divisions (<div>) are block elements that are utilized to group together one or more block elements. They are extremely useful when added to style sheets because they can implement formatting directly to a <div> tag. The formatting can be applied across many paragraphs at once by simply adding the <div> tag into a style sheet.

A <span> tag is related to the <div> tag. The distinction being that the <div> tag is used for grouping block elements together whereas the <span> tag is positioned inside a block element and around a portion of text. The <span> tag needs to be used in conjunction with style sheets.

Hints for Text on the Web

• Text should be split into small sections. Users like to read long paragraphs.
• Pages should be short; two screenfuls at the most. This makes it easier for users to read and there are then more web pages.
• Content should be divided into many pages because this gives readers the ability to choose what they would like to read and the order in which they read it.
• The most important information needs to be on the first screen. This is the idea of designing above the fold; where interesting content and images are placed at the top of the web page and the user is not required to scroll to get to this information.
• Proofreading is a must in order to create a professional site.
• One should not format excessively until one is familiar with style sheets because style sheets can can give one's site cleaner HTML.

HTML Tags for Lists

There are three types of list tags (which organized text)

1. Ordered lists which assign each item in the list a number or letter. These are useful when sequence is important to emphasize such as when there are series of steps. When you use ordered lists it is not necessary to add the numbers; the browser does the work for you. Numbering is never incorrect and everything is always lined up nicely. Spacing is automatically inserted in the paragraph before the list. Start and type attributes can be used to being the list at a number other than 1. Different letter types and roman numerals can also be used.
2. Unordered lists or bulleted lists. The appearance of bullets can be adjusted to a certain point. When browsers interpret unordered lists they automatically indent each item listed and bullets appear before the content. Different types of bullets can be used including the black dot, empty circle and square.
3. Definition lists which are used to display terms and their accompanying definitions. On a web page the term is aligned to the left and the definition is indented beneath it. Definition lists are useful for producing an online glossary. The tagging in a definition list differs from the ordered and unordered lists. The entire list is wrapped in a <dt>. The inside <dl> tag is where the the terms and definitions are placed with the term wrapped in the <dl> tag (dictionary term). The definition is positioned in a <dd> tag (dictionary term).

A nesting list is a method where a list is placed inside another list to allow one to create multilayered outlines and comprehensive, consecutive instructions. To create a new list inside of a list the <li> tag is used. Different styles are useful to distinguish one level from the next.

Inline character style tags are commonly used formatting tags that can be used within another block element such as a paragraph, heading or list.

• Italics, bold and underline are basic formatting tags.
• Emphasis and strong- The emphasis tag <em> is a logical tag comparable to the physical tag <i> italic tag. In most browsers the same effect is viewed however the emphasis tag is better to use since is it more generic; it signifies that emphasis is needed. The <strong> tag is a logical tag comparable to the bold tag <b>.
• Subscript, Superscript and Strikethrough- The subscript tag <sub> creates smaller text that is positioned at the bottom of the current line. A superscript tag (<sup>) indicates that the text is to be smaller and positioned at the top of the current line. The strike tag (<strike>) interprets the browser to create text that is crossed out.
• Teletype (<tt>) displays utilizing a fixed-width or monospaced font such as Courier. Often it is used to refer to snippets of code.
• There are over 250 special characters supported by HTML. While not all characters are found on your keyboard there are special codes used to indicate them. A complete list of these characters can be found at: http://www.webmonkey.com/reference/Special_Characters