Since the World Wide Web (the Web, for short) was created in 1990, people who want to put pages on the Web have had little control over what those pages will look like. In the beginning, authors could only specify structural aspects of their pages, for example that some piece of text would be a heading or some other piece would be straight text. Also, there were ways to make text bold or italic, among a few other effects. But that's where their control ended.
In the scientific environments where the Web was born, people were more concerned with the content of their documents than the presentation. In a research report, the choice of type faces (or fonts) is of little importance compared to the scientific results that are reported. However, when authors outside the scientific environments discovered the Web, the limitations of HyperText Markup Language (HTML) became a source of continuing frustration. These authors often came from a paper-based publication environment where they had full control of the presentation. They wanted to be able to change the color of text, make it look more s p a c e d o u t or more squeezed, to center it or put it against the right margin - or anywhere else they want. Many Web designers come from a desktop publishing background, in which they can do all of these things, and more, to improve the appearance of printed material. They want the same capabilities when they design Web pages. However, such capabilities have been slow to develop - slow by Internet speed standards, that is. So designers have devised techniques to sidestep these limitations, but these techniques have unfortunate side effects. We discuss them and their side effects later.
This page is about a new method for designing Web pages - Cascading Style Sheets, CSS for short, that works with HTML, represent a major breakthrough in how Web page designers work, by expanding their ability to improve the appearance of their Web pages - the documents that people publish on the Web. HTML describes the document's structure; that is, the roles that the various parts of a document play. For example, a piece of text may be designated as a heading or a paragraph. HTML doesn't pay much attention to the document's appearance, and in fact it has only very limited capability to influence appearance. CSS, however, describes how these elements are to be presented to the reader of the document. Using CSS, you, the designer, can better specify the appearance of your HTML pages as well as make your pages more available to Web users worldwide. Even though HTML has limited capabilities to influence appearance, without style sheet capabilities, it has been a half-baked publishing environment. The release of CSS greatly enhances the potential of HTML and the Web.
Cascading Style Sheets - CSS - is a simple mechanism for adding style to HTML documents. With CSS, you can specify such styles as the size, color, and spacing of text, as well as the placement of text and images on the page. Plus a whole lot more. This is done via the use of style sheets. A style sheet is a set of stylistic rules that describe how HTML documents are presented to users.
A key feature of CSS is that style sheets can cascade. That is, several different style sheets can be attached to a document and all of them can influence the presentation of the document. In this way, the author can create a style sheet to specify how the page should look, while the reader can attach a personal style sheet to adjust the appearance of the page for human or technological handicaps, such as poor eyesight or a personal preference for a certain font.
CSS is a simple language that can be read by humans - in contrast to some computer languages. Perhaps even more important, however, is that CSS is easy to write. All you need to know is a little HTML and some basic desktop publishing terminology: CSS borrows from desktop publishing terminology when expressing style. So those of you who have experience in desktop publishing should be able to grasp CSS very quickly. But if you're new to HTML, desktop publishing, and/or Web page design, don't despair. You, too, will likely find CSS surprisingly easy to grasp.
To understand how revolutionary CSS is, you first need to understand Web page design as it has been up to now and the design problems that CSS can help solve. In this section, we begin with a brief tour of the Web and the problems Web page designers and others have faced prior to the introduction of CSS. Then we quickly review the basics of HTML. For those of you who are already publishing on the Web, this all may be old news. For those of you who are new to the idea of designing Web pages, this should help put things in perspective. In Section 2 we step you through the basics of how to use CSS. In subsequent sections, we delve more deeply into CSS, covering how you can specify the text, background, color, spacing, and more in the design of your Web pages.
The Web is a vast collection of documents on the Internet that are linked together via hyperlinks. The Internet consists of millions of computers worldwide that communicate electronically. A hyperlink is a predefined linkage between two documents. The hyperlinks allow a user to access documents on various Web servers without concern for where they are located. A Web server is a computer on the Internet that serves out Web pages on request. From a document on a Web server in California, the user is just one mouse click away from a document that is stored, perhaps, on a Web server in France. Hyperlinks are integral to the Web. Without them, there would be no Web.
Users gain access to the Web through a browser. A browser is a computer program that lets users "surf" the Web by fetching documents from Web servers and displaying them to the user. To move from one document to another, the user clicks on a highlighted word or image that represents a hyperlink. The browser then retrieves the document that is at the other end of the hyperlink and displays it on the screen. For example, a user could be in a document about baroque music and click the highlighted words Johann Sebastian Bachwhich are linked to "Bach's home page" (on the Web, all celebrities - as well as everyone else who wants one - have a home page). When the browser has fetched Bach's home page (instantly in the best case) it will appear on the user's screen.
The Web was invented around 1990 by Tim Berners-Lee and Robert Cailliau. Tim was then working at CERN, the European Laboratory for Particle Physics. A graduate of Oxford University and a long-time computer and software expert, he is now Director of the World Wide Web Consortium - W3C - an organization that coordinates the development of the Web. He also is a Principal Research Scientist at Massachusetts Institute of Technology's Laboratory for Computer Science (MIT LCS). Robert is a 20-year veteran at CERN. It was Robert who organized the first Web conference in Geneva in 1993. Both Tim and Robert were awarded the ACM Software System Award in 1995 because of their work on the Web. Robert wrote the Foreword to this book.
Tim created the language - HTML - that is used by people to exchange information on the Web. We discuss what HTML is in the next section and give a brief review of its basics later in the section. Tim also began work on style sheets soon afterward, but when the Web really started taking off in 1993 the work on them was not complete.
The "world" discovered the Web around 1994. Since then, the Web's growth has been tremendous. Had style sheets been available on the Web from its beginning, Web page designers would have been spared much frustration. However, the release of CSS now, three years later, has some advantages. First, in the interim we have learned much about the kind of visual effects that Web designers want to achieve on their pages. Second, we learned that users also want their say in how documents are presented on their computer screens; for example, visually impaired people may want to make fonts bigger so that they can read documents more easily. As a result, we were able to provide functionality to meet as many of these needs of designers and users as possible. (We'll add even more in forthcoming releases of CSS.) Hence, the CSS of 1997 is a better solution than a style sheet solution years earlier would have been.
HTML is a markup language. A markup language is a method of indicating within a document the roles that the document's pieces are to play. Its focus is on the structure of a document rather than its appearance. For example, you can indicate that one piece of text is a paragraph, another is a top-level heading, and a third is a lower-level heading. You indicate these by placing codes, called tags, into the document. HTML has around 30 commonly used tags which are reviewed later in this chapter. You could, for example, use a tag that says, in effect, "Make the text coming up a heading."
In contrast, desktop publishing (DTP) programs emphasize the presentation of a document rather than its structure. Authors can select font families, text colors and margin widths and thereby accurately control what the final product - which normally ends up on paper - looks like.
The distinction between structural and presentational systems isn't always as clear-cut as described above. HTML, while having its roots in structured documents, has some tags that describe presentation rather than structure. For example, you can specify that a text should be presented in bold or italic. Also, some DTP programs let you describe the structure - in addition to the presentation - of a document. When you create a new document in applications like Microsoft Word or Adobe FrameMaker, there is a standard set of "styles" available. A style is a group of stylistic characteristics that you can apply to a piece of text. For example, you may have a style called "title1" that has the stylistic characteristics that set the text to "18 point Helvetica bold italic." (If you're not familiar with what "18 point Helvetica bold italic" means, don't worry; we explain it in Section 4.) By applying the style "title1" to selected parts of your document you are effectively marking it up. At the same time, you are also specifying how those pieces of text should be presented.
Conceptually, this is very similar to HTML and CSS. In HTML, "title1" would be a tag, and the stylistic characteristics (namely "18 point Helvetica bold italic" ) would be written in a CSS style sheet. If you already know a DTP program that supports this notion of styles, the transition to HTML and CSS will be easy.
DODGING THE LIMITATIONS OF HTML
The HyperText Markup Language - HTML - is a simple, easy-to-learn markup language designed for hypertext documents on the Web. In fact, a computer-literate person can learn to write basic HTML in less than a day. This simplicity is one reason for the huge success of the Web.
From the beginnings of HTML, Web page designers have tried to sidestep its stylistic limitations. While their intentions have been good - to improve the presentation of documents - the techniques for doing so have unfortunate side effects. These techniques work for some of the people some of the time but never for all of the people all of the time. They include the following:
- Using proprietary HTML extensions
- Converting text into images
- Placing text into tables
- Writing a program instead of using HTML
- We discuss these techniques, and their side effects, in the next sections.
One way to sidestep HTML's limitations has been for browser vendors to create their own tags that give designers who use their browser a little more control over the appearance of a Web page. At some point, it seemed that every new version of a browser introduced a few new tags that designers could play with. Doing this may sound like a good idea. However, it creates it own problem; namely, these browser-specific tags are not universal, at least not when they are first created.
For example, in 1994, Netscape - the company that makes the popular Navigator browser - introduced the CENTER tag for centering text on the screen and the FONT tag to indicate the font size. But the effect worked only in Netscape's Navigator browser. In 1995, Microsoft introduced the MARQUEE tag, which enabled text to slide across the screen. But it worked only in Microsoft's Internet Explorer browser. While the browser for which these tags were written knows what to do with them, there is no guarantee that any other browser will. So no matter how terrific your page looks, the impact will likely be lost if your page, full of browser-specific tags, is displayed to a user who is using a different browser. The only way you can know how your page will appear on all the various browsers is if you test the page on each one. In short, you, the Web page designer, are at the mercy of browser software developers. To take advantage of the latest browser capabilities, you have to change the documents that form your pages. As you will see, by using CSS in such cases, you need not change your document; you need only change your style sheets. This is a much easier and less costly way to update your pages.
A second way by which designers have sought to get around the limitations of HTML has been to make text into images. With an image, the designer can fully control colors, spacing, and fonts, among other features. Then the designer simply inserts in the document the appropriate hyperlink where the image is to appear on the page, thereby linking the image to the page. When the browser displays the page, the text - in the form of an image - appears on the page.
This method, too, has downsides. First, you compromise accessibility to your page. Easy accessibility is one of the guiding principles of the Web. Second, you make your readers wait longer for your documents to display. At the same time, you also slow down the Web in general.
Compromised accessibility
Accessibility of your page to Web users is compromised in two ways when you use images to hold text. First, certain types of software called robots (also known as crawlers or spiders) roam the Web (so to speak) seeking what's out there and then creating and updating indexes that users can use to find Web pages. Indexing services like AltaVista, Hotbot, and Lycos use robots to build their indexes.
Robots work by loading a Web page and then automatically loading all of the pages that are linked from that page, and then loading all of the pages that are linked from those pages, and so on, usually for the purpose of creating a database of all the words on all of the pages. When a user searches for a particular word or set of words, all the pages containing that selection are made available to the user. Robots, however, cannot read images. So they just skip them. Hence, they simply miss text that is in images.
Accessibility of your page to Web users is compromised in a second way. Not all users have a browser that provides a GUI - graphical user interface - such as that provided by Navigator and Explorer. Some browsers can display only text, not images. So the content of your images is lost to the user.
Currently, the only way around these accessibility problems is to enclose a textual description of the image that robots and text-only browsers can use. In the latter, for example, the user would receive this textual description of the image rather than the image - not a great substitute for the real thing but better than nothing.
Longer download time
The second downside to using images to hold text is that images take longer to load and draw on the screen. The user may become impatient and back out of your page before it's had time to completely load. Also, the preponderance of images as a substitute for attractive type can account for much of the reputed slowness of the Web to respond when drawing pages on screens.
A third technique designers have used to bypass the limitations of HTML is to put text into a table. Doing this enables the designer to control the layout of the text. For example, to add a margin of a certain width on the left side of a page, you would put the whole document inside a table and then add an empty column along the left side to create the "margin."
The downside (you knew there would be one): not all browsers support tables, so pages that use tables do not display well on those browsers. Depending on how you use tables, the result on such browsers can be somewhere between "weird" and "disastrous."
The use of tables also complicates the writing of HTML. You have to add a lot more tags even for a simple table. The more complex the table or table structure - you can create tables within tables to any depth you want - the more complex your code becomes.
Used with care, tables can sometimes be the right solution. CSS does not fully replace tables. But, if you use tables, you must be prepared to cope with the extra complexity and the inability of some browsers to display them properly.
Writing a program instead of using HTML
A fourth technique designers use to bypass the limitations of HTML is to create a program that displays pages. Although much more complex than any other alternative, this technique has the advantage of giving designers control over every pixel on the screen - something not even CSS style sheets can do. However, this technique shares some of the drawbacks of the previous three discussed. A program cannot be searched by robots, and it cannot be used by text-only browsers. Further, because it is an actual programming language (which HTML is not), it is more difficult to learn. It may contain a computer virus. And it is questionable whether 15 years from now there will be computers that can execute the program. Examples of programming languages for creating Web documents are Java and JavaScript.
Why should all of this matter?
HTML has become a universal data format for publishing information. Due to its simplicity, anyone with a computer and Internet connection can publish in HTML without expensive DTP applications. Likewise, on the user side, HTML documents can be shown on a variety of devices without the user having to buy proprietary software. Also, perhaps the strongest point in HTML's favor of all: it allows for electronic documents that have a much higher chance of withstanding the years than proprietary data formats. The methods of dodging the limitations of HTML described above are undermining these benefits: HTML is in danger of turning into a compli-cated proprietary data format that cannot be freely exchanged. CSS, by allowing authors to express their desire for influence over document presentation, will help HTML remain the simple little language it was meant to be.
Also, there are esthetic and commercial reasons for why the Web needs a powerful style sheet language. Today, placing a page on the Web is no longer just a matter of putting up some text and hoping someone will stumble across it. Web pages have become an important means whereby people around the world can get together to share ideas, hobbies, interests, and much more. It also is becoming an increasingly important medium for advertising products and services. Today, a page needs to attract and stimulate as well as inform. It needs to stand out among the enormous and rapidly growing repertoire of pages crowding onto the Web. Esthetics have become more important. The current HTML tools simply aren't enough for the Web page designer who wants to make good-looking pages.
Let's get started. In the next section, we review the basics of writing HTML. In Section 2 we introduce CSS and show you how it works with HTML. From there, we lead you on an exploration of CSS and what you can do with it.
CSS was designed to work along with HTML. To take advantage of CSS, you need to know a little HTML. As we said in the Preface, we assume most readers of this book will have had some exposure to HTML. However, to ensure we all are talking about the same thing, we review here the basics of HTML.
HTML is simple to write. It's essentially a series of elements that define the structure of your document. An element normally has three parts:
- Start tag
- Content
- End tag
The diagram below illustrates the three parts of an element:
<SENTENCE>This is very simple element.</SENTENCE>
|_ ______||___________
______________||_ _______|
| | |
Start tag
Content End tag
All tags in HTML start with a <' and end with a >'. Between these comes the name of the element. In the above example, the name of the element is "SENTENCE." The content of the above element is a string of characters (but we will soon see that the content of an element can be another element). After that comes the end tag. End tags look like the start tag, except they have a /' before the tag name.
Building a simple HTML document
HTML has around 30 commonly used elements. "SENTENCE" isn't one of them; in fact, sentence isn't an HTML element at all. We just used it as an example to show the basic structure of all elements. Let's look at a real HTML element.
<HTML></HTML>
One of the elements in HTML is called " HTML." The HTMLstart tag (< HTML>) marks the beginning of an HTML document, and the HTMLend tag (</ HTML>) marks the end. Everything between these two tags is the content of the HTMLelement. In the above example there isn't anything between the start and the end tag. In the next example we have added some content:
<HTML>
<TITLE>Bach's home page</TITLE> </HTML>
What we added from the last example is marked in bold letters (this is a convention we will use throughout this chapter). Unlike the "SENTENCE" example, the content of the HTMLelement is not just a string of characters - it's actually another element. The title element contains the title of an HTML document. The title of the document we will be building in this chapter is "Bach's home page."
_____________HTML element ________________
|
|
<HTML><TITLE>Bach's home page</TITLE></HTML>
|_____________________________|
TITLE element
To make is easier to see where elements start and end, we will show the HTML examples over several lines and indent elements that are inside others. We do this because it makes the code easier to read. The browser will ignore the extra space as well as the line breaks that separate one line from another.
<HTML>
<TITLE>Bach's home page</TITLE>
</HTML>
When a browser displays an HTML document in a window on the screen, the content of the TITLEelement will go into the title bar of the window. The title bar is at the top of the window. Below that is often the browser's control panel. Further below is the most interesting part of the browser window: the canvas. The canvas is that part of the window in which documents are actually displayed.
As you can see, we have yet to put anything in our document that will be displayed in the canvas. To have something actually show up on the canvas, you must place it in the BODYelement. The BODYelement is inside the HTMLelement:
<HTML>
<TITLE>My own site</TITLE>
<BODY>
</BODY>
</HTML>
By themselves, the BODYtags do not add anything to the canvas; we need to give the BODYelement some content. Let's start by adding a first-level heading to the sample document. The standard HTML tag for a first-level heading is H1. Here's the HTML code:
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
</BODY>
</HTML>
(Above, the title of the document is the same as the first-level heading. This will often be the case in an HTML document, but doesn't have to be.)
The above code will actually result in text appearing on the canvas.
HTML also has other headings you can use: H2, H3, H4, H5, and H6. The larger the number, the lower the level of heading. Typically, the lower the level, the smaller the font size. Here's our document with a couple of extra headings added:
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
<H2>Bach's compositions</H2>
<H3>The keyboard music</H3>
</BODY>
</HTML>
However, we don't need those two extra headings right now, so we delete them and add a paragraph of text instead. We do this using the paragraph element, P:
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
Note that we left out the ending paragraph tag, </ P>. Normally, an element begins with a start tag and ends with an end tag. However, sometimes the end tag may be omitted. In the above example, the end tag is there to notify the browser when the element ends. In some cases, the browser can figure this out for itself without the help of an end tag, so the end tag may be omitted. For example, the Pelement cannot exist outside of the BODYelement. So, when the browser encounters the BODYend tag (</ BODY>), it knows that the Pelement also has ended. Still, including the Pend tag is perfectly legal.
Next, suppose we want to emphasize a word relative to the surrounding text. Several HTML elements can express this; among them we find STRONGand EM( EMstands for emphasis). The names of these elements do not say anything about how they are to be displayed, but there are some conventions: STRONGelements are normally displayed in bold, and EMelements are displayed in italic.
The following code shows the use of the STRONGelement:
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's
home page</H1>
<P>Johann Sebastian Bach was a
<STRONG>prolific</STRONG> composer.
</BODY>
</HTML>
Notice how the word "prolific" stands out relative to the surrounding text. Also note that while the H1and Pelements start on a new line, the STRONGelement continues on the same line where the Pelement started. H1and Pare examples of "block-level" elements, while the STRONGelement is an "inline" element. We discuss block-level and inline elements next.
Block-level and inline elements
In the previous section, the STRONGelement was placed in the middle of another element, P, while the Pand H1elements both began and ended a line. You can't insert a Pelement in the middle of another element, say an H1element, or vice versa. But you can insert an element like STRONGin the middle of any other element. This is because the Pand H1elements are block-level elements, while the STRONGelement is an inline element.
Elements can be divided into three groups:
- Block-level
- Inlin
- Invisible
A block-level element is an element that begins and ends a line or, put another way, that has a line break at its beginning and end. Examples of block-level elements that you've seen so far in this chapter are H1and P. Others are given in Table 1.1.
An inline element is an element that does not begin and end a line, although it may be placed at either end. Examples of inline elements are STRONG, which you saw in the earlier example, and EM. Others are given in Table 1.1.
An invisible element is an element whose content isn't displayed on the canvas. We have seen only one invisible element so far: TITLE. It's not really an invisible element since it appears in the title bar of the window, but it is not displayed on the canvas. HTML only has a few invisible elements and you will find them in Table 1.1.
Confused about the different elements? Don't worry. Table 1.1 gives you an overview of the most common HTML elements. We've introduced you to several of these already and will discuss others shortly. We talk about others as appropriate throughout the rest of the book and use them in a lot of examples. Also, we suggest you refer to the table as needed as you work your way through these sections.
| Element name | Abbreviation for | Block, inline, or invisible | Typical effect | End tag can always be omitted? | Empty? Replaced? |
|---|---|---|---|---|---|
| A | anchor | inline | highlighted | no | |
| BLOCKQUOTE | block-level | indented | no | ||
| BODY | block-level | inside | canvas | yes | |
| BR | break | block-level | breaks the line | - | empty |
| DD | definition description | block-level | yes | ||
| DL | definition list | block-level | no | ||
| DIV | division | block-level | no | ||
| DT | definition term | block-level | yes | ||
| EM | emphasis | inline | italic | no | |
| H1, H2 ... H6 | heading levels | block-level | large fonts | no | |
| HR | horizontal rule | block-level | horizontal rule | - | empty |
| HTML | block-level | yes | |||
| I | italic | inline | italic | no | |
| IMG | image | inline | as an image | - | empty, replaced |
| LI | list item | block-level | with a list item marker in front | yes | |
| LINK | invisible | - | empty | ||
| OBJECT? | block-level | no | replaced | ||
| OL | ordered list | block-level | no | ||
| P | paragraph | block-level | yes | ||
| PRE | preformatted | block-level | in monospace font | no | |
| SPAN | inline | no | |||
| STRONG | inline | bold | no | ||
| STYLE | invisible | no | |||
| TITLE | invisible | shown in title bar, not on canvas | no | ||
| TT | teletype | inline | monospace font | no | |
| UL | unordered list | block-level | no |
Table 1.2You may have noticed that we have put the names of elements in all capital (uppercase) letters. This is not necessary. HTML tags are not case sensitive. That is, any combination of uppercase and lowercase letters can be used. Hence, "TITLE", "Title", and "title" are all the same. We use all uppercase letters to help distinguish element names from the rest of the text.
Among the elements that are not included in Table 1.1 are the elements used to create forms and tables. Also, the HTML extension elements have been left out.
In the next several sections, we add to your repertoire of HTML tags by discussing elements that you can use to create lists, add a horizontal rule, force a line break, and link to text and images.
Most of your document will consist of elements. However, you also can insert HTML comments into the document. A comment is anything you want to say about what is going on with your document that you don't want the user to see. The user can't see the contents of a comment because browsers ignore comments; that is, they do not display a comment's contents. Comments can be a helpful way of communicating something about your document to other designers who will see your code.
To ensure the comment really is not viewable by the user, you enclose the comment between a special string that the browser will recognize as enclosing a comment. You begin the comment with the string <!-- and end it with the string -->. (That's two hyphens in both cases.) Here's a sample comment:
<!--CSS is the greatest thing to hit the Web since hyperlinks-->
Lists are very common in HTML documents. HTML has three elements that create lists:
-
OL, which creates an ordered list. Inan ordered list, each list item has a label that indicates the order, for example a digit (1, 2, 3, 4 or I, II, III, IV) or letter (a, b, c, d). In desktop publishing terminology, ordered lists are often called numbered lists.
-
UL, which creates an unordered list. In an unordered list, each list item has a mark that does not indicate order, e.g. a bullet symbol. In desktop publishing terminology, unordered lists are often called "bulleted" lists.
-
DL, which creates a definition list. A definition list is a list of terms with their corresponding definitions. For example, a dictionary is a (long!) definition list.
Bach's home page must surely include a list of some of his compositions. Let's add an ordered list:
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a <STRONG>prolific</STRONG> composer. Here are his best works:
<OL>
<LI>the Goldberg Variations
<LI>the Brandenburg Concertos
<LI>the Christmas Oratorio
</OL>
</BODY>
</HTML>
Notice that an LIdoesn't need an end tag, but a OLdoes.
The ordered list above is unfair to all the other great compositions by Bach. Let's change the ordered list into an unordered list. To do this, we simply change the OLto UL:
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a <STRONG>prolific</STRONG> composer. Among his works are:
<UL>
<LI>the Goldberg Variations
<LI>the Brandenburg Concertos
<LI>the Christmas Oratorio
</UL>
</BODY>
</HTML>
Notice that we do not have to change the LIelements to change the list from unordered to ordered: both ULand OLuse LIas the list item element. But since the LIelements are now inside the ULelement, they will look different.
A DL, or definition list, is used for lists that have terms - each contained in a DTelement - and their corresponding definitions - each contained in a DDelement. An example of a DLis a dictionary or glossary. In the next example, we change our OLto a DL. Notice how the LIs change to DTs and that like the LIs, they do not require end tags.
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a <STRONG>prolific</STRONG> composer. Among his works are:
<DL>
<DT>the Goldberg Variations
<DD>composed in 1741, catalog number BWV988
<DT>the Brandenburg Concertos
<DD>composed in 1713, catalog numbers BWV1046-1051
<DT>the Christmas Oratorio
<DD>composed in 1734, catalog number BWV248
</DL>
</BODY>
</HTML> Empty elements
All HTML elements we have discussed so far have had content. HTML also has some elements that do not have content - they are empty elements. One example is the HRelement which inserts a horizontal rule in the document. It doesn't need any content. Also, there is the BRelement whose sole purpose is to force a line break. Since empty elements do not have any content they don't need any end tags either.
Adding a horizontal rule
We can add a horizontal rule to a document by using the HR(horizontal rule) element. HRis an empty element, so you should omit its end tag.
Here's the code for adding an HRelement. <HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a <STRONG>prolific</STRONG> composer. Among his works are:
<UL>
<LI>the Goldberg Variations
<LI>the Brandenburg Concertos
<LI>the Christmas Oratorio
</UL>
<HR>
</BODY>
</HTML>
Adding a line break
We can force a line break in the middle of an element by using the BR(break) element. The browser normally ignores line breaks in the HTML document and will automatically break a line when needed when it displays the document. However, if you want to enforce a line break at a certain spot in the document, BRlets you do this. BRis an empty element, so you should omit its end tag.
Here's the code for a BRelement (note, we reverted to our example that included the UL).
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's <BR>home page</H1>
<P>Johann Sebastian Bach was a <STRONG>prolific</STRONG> composer. Among his works are:
<UL>
<LI>the Goldberg Variations
<LI>the Brandenburg Concertos
<LI>the Christmas Oratorio
</UL>
<HR>
</BODY>
</HTML>
Forcing line breaks is generally not a good idea, so we'll take out the BRelement as we move on.
In the previous example, we mentioned that a browser generally ignores line breaks, except for those that you enter using the BRelement. The browser also ignores tabs and extra white space. Tabs are converted to single space characters, while extra space characters - any more than one - are collapsed into one space character. Generally, this is what we want. This feature enables us to space out our code so that it is more readable and reflects the structure of the document, secure in the know