Home arrow HTML arrow Page 5 - Quick Start with HTML

Quick Start with HTML

When you're just starting out with HTML and XHTML, you want to build documents right away. This article series gets you started right. It is excerpted from chapter two of HTML & XHTML: The Definitive Guide, Sixth Edition, written by Chuck Musciano and Bill Kennedy (O'Reilly; ISBN: 0596527322). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
March 27, 2008
  1. · Quick Start with HTML
  2. · 2.2 A First HTML Document
  3. · 2.3 Embedded Tags
  4. · 2.4 HTML Skeleton
  5. · 2.6 Text
  6. · 2.6.2 Text Structures

print this article

Quick Start with HTML - 2.6 Text
(Page 5 of 6 )

Text-related HTML/XHTML markup tags comprise the richest set of all in the standard languages. That's because the original language--HTML--emerged as a way to enrich the structure and organization of text.

HTML came out of academia. What was and still is important to those early developers was the capability of their mostly academic, text-oriented documents to be scanned and read without sacrificing their capability to distribute documents over the Internet to a wide diversity of computer display platforms. (Unicode text is the only universal format on the global Internet.) Multimedia integration is something of an appendage to HTML and XHTML, albeit an important one.

Also, page layout is secondary to structure. We humans visually scan and decide textual relationships and structure based on how it looks; machines can only read encoded markings. Because documents have encoded tags that relate meaning, they lend themselves very well to computer-automated searches and to the recompilation of content--features very important to researchers. It's not so much how something is said as what is being said.

Accordingly, neither HTML nor XHTML is a page-layout language. In fact, given the diversity of user-customizable browsers, as well as the diversity of computer platforms for retrieval and display of electronic documents, all these markup languages strive to accomplish is to advise, not dictate, how the document might look when rendered by the browser. You cannot force the browser to display your document in any certain way. You'll hurt your brain if you insist otherwise.

2.6.1   Appearance of Text

For instance, you cannot predict what font and what absolute size--8- or 40-point Helvetica, Geneva, Subway, or whatever--will be used for a particular user's text display. OK, so the latest browsers now support standard Cascading Style Sheets (CSS) and other desktop publishing-like features that let you control the layout and appearance of your documents. But users may change their browser's display characteristics and override your carefully laid plans at will, quite a few of the older browsers out there don't support these new layout features, and some browsers are text-only with no nice fonts at all. What to do? Concentrate on content. Cool pages are a flash in the pan. Deep content will bring people back for more and more.

Nonetheless, style does matter for readability, and it is good to include it where you can, as long as it doesn't interfere with content presentation. You can attach common style attributes to your text with physical style tags, like the italic <i> tag in our simple example. More important and truer to the language's original purpose, HTML and XHTML have content-based style tags that attach meaning to various text passages. And you can alter text display characteristics, such as font style, size, color, and so on, with CSS.

Today's graphical browsers recognize the physical and content-related text style tags and change the appearance of their related text passages to visually convey meaning or structure. You can't predict exactly what that change will look like.

The HTML 4 standard (and even more so, the XHTML 1.0 standard) stresses that future browsers will not be so visually bound. Text contents may be heard or even felt, for example, not read by viewers. Context clues surely are better in those cases than physical styles.  Content-based text styles

Content-based style tags indicate to the browser that a portion of your HTML/XHTML text has a specific usage or meaning. The <cite> tag in our simple example, for instance, means the enclosed text is some sort of citation--the document's author, in this case. Browsers commonly, although not universally, display the citation text in italic, not as regular text. [Content-Based Style Tags, 4.4]

While it may or may not be obvious to the current reader that the text is a citation, someday someone might create a computer program that searches a vast collection of documents for embedded <cite> tags and compiles a special list of citations from the enclosed text. Similar software agents already scour the Internet for embedded information to compile listings, such as the infamous Google database of web sites.

The most common content-based style used today is that of emphasis, indicated with the <em> tag. And if you're feeling really emphatic, you might use the <strong> content style. Other content-based styles include <code>, for snippets of programming code; <kbd>, to denote text entered by the user via a keyboard; <samp>, to mark sample text; <dfn>, for definitions; and <var>, to delimit variable names within programming code samples. All of these tags have corresponding end tags.  Physical styles

Even the barest of barebones text processors conform to a few traditional text styles, such as italic and bold characters. While not word processing tools in the traditional sense, HTML and XHTML provide tags that explicitly tell the browser to display (if it can) a character, word, or phrase in a particular physical style.

Although you should use related content-based tags, for the reasons we argued earlier, sometimes form is more important than function. Use the <i> tag to italicize text without imposing any specific meaning, the <b> tag to display text in boldface, or the <tt> tag so that the browser, if it can, displays the text in a teletype-style monospaced typeface. [Physical Style Tags, 4.5]

It's easy to fall into the trap of using physical styles when you should really be using a content-based style instead. Discipline yourself now to use the content-based styles because, as we argued earlier, they convey meaning as well as style, thereby making your documents easier to automate and manage.  Special text characters

Not all text characters available to you for display by a browser can be typed from the keyboard. And some characters have special meanings, such as the brackets around tags, which if not somehow differentiated when used for plain text--the less-than sign (<) in a math equation, for example--will confuse the browser and trash your document. HTML and XHTML give you a way to include any of the many different characters that comprise the Unicode character set anywhere in your text through a special encoding of its character entity.

Like the copyright symbol in our simple example, a character entity starts with an ampersand (&), followed by its name, and terminated with a semicolon (;). Alternatively, you may also use the character's position number in the Unicode table of characters, preceded by the pound or sharp sign (#), in lieu of its name in the character-entity sequence. When rendering the document, the browser displays the proper character, if it exists in the user's font. [Character Entities, 3.5.2]

For obvious reasons, the most commonly used character entities are the greater-than (&gt;), less-than (&lt;), and ampersand (&amp;) characters. Check Appendix F to find out what symbol the character entity &#166; represents. You’ll be pleasantly surprised&#033;

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials