Suchen und Finden
HTML5 is the latest of a series of HTML versions. To get the most out of HTML5, you need to know how it fits in with the other versions of HTML that came before it.
Most of this chapter is a review of standard HTML ideas. If you’ve never written any HTML by hand before, you’ll want to look it over carefully. If you’re already a code ace, you can probably just skim over it.
The content of this chapter forms a baseline. The code described here works in all modern browsers. As much of the HTML5 content is still browser-dependent, begin with a standard set of tags and elements that work on every browser. This chapter describes this lowest-common-denominator HTML syntax, which is expanded upon throughout the book.
This chapter is really an overview. If you’re totally new to HTML, you might consider looking over one of my other books — HTML, XHTML, and CSS All–in-One For Dummies, 2nd edition (Wiley). It goes into great detail on HTML, CSS, and lots of other good stuff. That book is a standard reference for today’s Web. The book you’re holding now is really more about where the Web is going in the near future.
Be sure to check out my Web site for working examples of every code fragment in the book: www.aharrisbooks.net/h5qr.
In this part . . .
Comparing HTML5 to XHTML and HTML 4
Building the Basic Page
Adding Images and Links
Formatting Data with Lists and Tables
Validating Your Code
Exploring HTML and XHTML
HTML has been around for a while now, and it has been continuously changing. Ideas that were once cutting edge (like using frames) are now considered out of date. HTML began as a very simple language, which became more complex as it was used more. HTML5 tries to make HTML simple again. The following ideas have driven the development of HTML5.
Make the code as clean as possible. Things will get complicated fast. HTML code should be clean and easy to read. It shouldn’t have any unnecessary features, and it should be formatted in a way that is easy to follow.
Separate structure from design. Try to keep your HTML code focused on the structure of the code (what it means) rather than the display (how it looks). This keeps the HTML code relatively clean and easy to work with.
Use HTML for structure. Avoid tags like
Avoid use of tables and frames for layout. These techniques were the best tools Web designers had at one point, and so they were frequently used to provide visual structure to Web pages. However, modern CSS approaches provide for much cleaner code that’s easier to work with even when things get more advanced.
Start with valid code. A lot of times, a page will look perfectly fine, but there will be some mistake hidden away that will rear its ugly head at the worst possible time (usually when you’re trying to show something to a client). It’s best to start your projects with HTML that you know is valid. See “Validating Your Pages,” later in this part, for more on ensuring the HTML foundation is in tip-top shape.
HTML 4 was the dominant form of HTML for a long time. It was popular for some very good reasons:
Universal support: By the time HTML 4 came out, there was really only one dominant browser — Internet Explorer 6 (IE6). Since the vast majority of users had some form of this browser, any code that would work for this browser was considered standard. In fact, the standards we call HTML 4 are really the parts of HTML 4 that were supported by IE6.
Reasonable control: HTML 4 enhanced older versions of HTML with some nice features like font support, the ability to change colors, and some support for multimedia. Frames added a certain amount of layout support, although they brought their own problems.
Ease of use: The HTML 4 standard itself was pretty easy to learn. It wasn’t too much trouble until you tried to do advanced stuff like table-based layouts. Then the simplicity of the language began to hurt because it just couldn’t do some things.
Forgiving: HTML was designed to be very easygoing. If you did something wrong, the browser would simply guess what you were trying to say. Often, the guesses were correct.
Emergence of XHTML
HTML 4 was popular for a long time, but it wasn’t perfect. As Web development moved from a hobby enterprise to become the foundation of serious applications, the weaknesses of HTML 4 became more apparent. While HTML 4 never died away, a new standard called XHTML (eXtensible HyperText Markup Language) emerged among elite Web developers. XHTML was intended as a more serious answer to HTML 4. While HTML 4 was easy to get along with, it was considered sloppy by professional programmers. XHTML (especially the strict version) was much more precise and predictable, making it popular among higher-end developers. Here are the key features of XHTML Strict:
More demanding syntax: XHTML is case-sensitive, it requires all attributes to be encased in quotes, and it has very strict rules for how tags are nested. Every tag must have an explicit closing tag. (Even one-off tags like
require a special closing character.) This more precise syntax made XHTML a little more exacting to program than HTML 4, but the results were far more predictable.
Validation support: The main advantage of all the strictness in XHTML was support for validation. The HTML 4 standard was so loosey-goosey that nobody could tell if a page was formatted incorrectly. With XHTML, it became possible to run a special validation program that could find structural errors in your code.
Separation of content and layout: HTML was originally intended only to describe the content of a document. By the time HTML 4 came out, it added numerous tags for handling the visual aspects of a document. The
tags were prime examples of this. While these tags did their jobs, they did not provide enough control, and moved away from the central idea of HTML. XHTML strict removed all layout tags.
Rising importance of CSS: Cascading Style Sheets (CSS) were available in HTML 4, but they were not always used properly because HTML provided some alternatives. When XHTML eliminated layout tags, CSS moved from an optional enhancement to a central part of Web development.
XML syntax: Early promoters of XHTML emphasized that XHTML followed the syntax of the XML standard. While this is true, it never turned out to be quite as important as people thought it might. The XML syntax made it easier for automated programs to manipulate Web pages as data, but that’s not a feature that most Web developers are terribly concerned about.
It’s alive, and it’s HTML5!
HTML5 is not really a rejection of XHTML. It has some of the best features of both HTML 4 and XHTML:
Simple doctype: The doctype definition (the boilerplate code that begins every Web page) for XHTML was really complicated. Even people who taught classes and wrote books about it (like, um, me) never memorized the doctype, but had to copy and paste it every time. HTML5 has a very simple and clean document definition, and it’s once again possible to write a page with a text editor from memory.
Separation of content and style: HTML5 does not include the style tags from HTML 4 (font, center, and so on), requiring developers to use CSS for all styling. Likewise, frames and table-based layout are discouraged in favor of CSS-style layout.