XHTML Architecture: Refactoring Web sites by standard using XHTML

xhtml| Standard

The title we've written for this section is: "XHTML: Simple Rules, easy guidelines." "One of the reasons is that the rules and guidelines discussed in this section are simple and easy." The second reason is that a simple and easy web design book, like a new free product in a supermarket, is a common but effective way to attract people's attention and encourage people to try.

I do hope that the content of this section will stimulate your interest and encourage you to try. Why do you say that? Because once you have mastered the simple and easy ideas contained in this chapter, you'll rethink the way the Web works and start changing the way you build them. But I don't want you to just rewrite the code again. I hope you can actually think and work in a different way.

On the other hand, refactoring is the true meaning of XHTML.

In this chapter, we will study the mechanism and implication of structured markup. If you are incorporating the standards of your Web site into your development project, you may find the content of this chapter familiar. But even veterans of this field will find unexpected gains from this chapter.

Overview of XHTML rules

Converting traditional HTML to XHTML 1.0 is quick and painless, as long as you follow some simple rules and easy guidelines. Whether you use HTML or not, it doesn't prevent you from using XHTML.

• Use the appropriate document type declaration and namespace.
• Use META elements to declare your content type.
• Use lowercase letters to write all the elements and attributes.
• Enclose all property values in quotes.
• Assigns values to all properties.
• Close all the labels.
• Use spaces and slashes to turn off empty labels.
• Do not write a double underline in the comment.
• Ensure that the less than number and the number < &

Unicode and other character sets

The default character set for XML, XHTML, and HTML 4.0 documents is Unicode, a standard defined by the Unicode Federation. Unicode is a comprehensive set of characters that provides each character with a specific unique number, regardless of platform, program, or language. Unicode is also the closest thing we have to a common alphabet, although it is not an alphabet but a set of digital mapping schemes.

Although Unicode is the default character set for Web documents, developers are free to choose other character sets that are more appropriate for them. For example, websites in the United States and Western Europe often use ISO-8859-1 (Latin-1) codes, while the national standard of the People's Republic of China is gb2312.

Marking documents for expression semantics, not for styles

Remember: Maximize the layout using CSS. In the world of Web standards, XHTML markup is not about performance, it's about the structure of the document.

Well-structured documents can convey as much semantics to the browser as possible, whether the browser is located in a handheld or trendy desktop graphics browser. Well-structured documents can convey visual semantics to users, even in older browsers or in modern browsers where CSS is turned off by the user.

Not every site can immediately discard HTML table layouts. The inventor of CSS, the consortium, did not convert the official website into a CSS layout until November 2002. However, even stubborn advocates do not always completely detach themselves from the structure, at least in XHTML 1. But now, we can take a significant step towards this ideal by separating the performance from the structure (or the data from the design), even if the mix of traditional layouts can benefit from it.

Here are some tips to help you think in a more structured way:

The colors in the outline

In grammar schools, most of us are forced to use standard outline formats to write articles. Now that we are designers, how freely we can get out of the limitations of the outline, and then boldly engage in the unique personal expression of the free field (perhaps our brochure and business site is not so unique and personalized). But at least we will not be bothered by the outline any more.

In fact, according to HTML, we should structure the content into an organized hierarchy. During a time when browsers do not support CSS, we cannot do this while delivering the layout that is available for sale. But today, as we deliver our design to the letter, we are capable of delivering the documents that are inherently well structured.

When you mark text for use in the Web, or when you convert an existing text document into a Web page, use these entries in the traditional outline to think.

At the same time, avoid using deprecated HTML elements such as <FONT>, or semantic elements such as <br/>, to simulate logical structures that do not actually exist.

For example, don't do something like this:

<font size= "7" > My theme </font><br/> Introductory text <br/><br/><font size= "6" > Supplementary views </font ><br/> Related text <br/>
Use elements according to their meanings, not according to their appearance

Some of us have fallen into a bad habit of using H1 when we just need a text with a large word, or using Li when we need to add a dot symbol to the front. As we discussed in the previous section, browsers have always been accustomed to imposing design attributes on HTML elements. We've all been used to thinking that H1 means large words, while li means dots, or blockquote means text indents. Most of us are still using structured elements to simulate the effects of writing HTML in a haphazard way.

Similarly, if the designer wants all headings to use the same font size, she will set all the headings to H1, even if there is no structural semantics to do so.


We have to put our tricks aside and start using them based on the semantics of the elements, not what they look like. In fact, H1 can be anything you want to be. The CSS,H1 can be a non bold Roman font, and the P text can be a large character in bold, and Li can have no dots (you can either use a kitten puppy or a company logo png,gif or a JPEG image) and so on.

Starting today, we're going to use CSS to determine the appearance of the elements. We can even change their appearance depending on where the elements are in the page or in the site. CSS can pull the performance out of the structure and allow you to format any element according to the style you like.

H1, H2, H3, H4, H5, h6 {font-family:georgia, Palatino, "New Century Schoolbook", times, serif; font-weight:normal; font -size:2em; Margin-top:1em; margin-bottom:0; }
Why would you do that? The purpose of this is to get a branded look and feel in the graphics viewer while the structure of the document is preserved in text browsers, wireless devices, and HTML-formatted e-mail messages.

We don't want to tell you more about CSS in the section on XHTML. We just want to show that the document structure and visual expression are two completely different things, and that structured elements should be used to convert text, rather than imposing a display effect.

Use structured elements instead of meaningless garbage

As we have forgotten or have no idea that the purpose of HTML and XHTML is to convey structural meaning, many HTML critics use tags to insert the list:

Project One <br/> Project two <br/> Project three <br/>
Consider using an ordered or unordered list instead:

<ul><li> Project One </li><li> project two </li><li> project three </li></ul>
"But Li gave me a dot, and I don't need a dot!" "You might say so. According to the section above, CSS does not assume that elements are expected to look like. It waits for you to tell it what you expect the element to look like. Turning off the dots is the most basic ability of CSS. It has the ability to make the list look the same as normal text, or make the list look like a graphical navigation bar with a full reversal effect.

So, use the list element to mark the list. Similarly, use strong instead of B, using EM instead of I, and so on. In most desktop browsers, the strong display is the same as B, and EM and I are the same, and you can create the visual effects you expect without damaging the document structure.

Although CSS does not make assumptions about the display of any element, browsers make a lot of assumptions, and we have not yet encountered a browser that displays strong as other effects rather than bold (unless the CSS instructions created by the designer are displayed in other ways). If you're worried that a strange browser won't display strong as bold, you can write a CSS rule:

strong {font-weight:bold; font-style:normal;}
Visual elements and structures

Web standards require not only what technology we use, but also the way in which these technologies are used. Using XHTML to write markup, and using CSS to handle part or all of the layout, does not necessarily make the site easier to use, and save a lot of bandwidth. Like the technology we used earlier, XHTML and CSS can be misused and abused. Long XHTML, like lengthy HTML, can waste users ' bandwidth and time. Long, overly CSS is not a complete substitute for HTML code; it's just a bad thing being replaced by another.

In any case, do not skip this section. Reading this chapter will enhance your skills, lose weight on your Web pages, and give you a clearer picture of the differences between markup and design. The idea in this chapter is easy to learn, but it can greatly improve the performance of the site, as well as design, production and update the convenience of the site.

In this section, you'll learn how to write logical, compact markup that allows you to reduce bandwidth by about 50%, reducing the load and pressure on your Web site, and minimizing loading time. By removing the expressive elements and changing the bad habits that have no benefits, we can achieve these goals.

These bad habits afflict many sites on the web, especially those that mix CSS code with primarily tabular layouts. This is clumsy and not economical, even for designers who are experienced in other areas. At the same time, the probability of this problem is equal, whether it's a site for handwritten code or a site created using visible editing tools such as Dreamweaver and GoLive.

This section presents these common errors so that you can identify and guard against them and learn how to correct them. We'll elaborate on the unique identifier attribute (ID)-and show how it allows you to write extremely compact XHTML code, whether you're creating a mixed layout or a pure CSS layout.

Must each element be structured?

As we mentioned in the previous section, each element can be structured, and CSS enables an ordered or unordered list to appear as an out-and-out navigation bar with a reverse button effect. The contents of a document can be marked with ordinary elements that indicate the semantic role they play in the design of a Web site through specific structured attribute flags.

We created the first Chinese beta version of W3school in 2006 A.D., we used CSS to lay out from the beginning and structured the document using XHTML. Each of these elements is structured, from headings to lists, and even paragraphs. You can see the home button with the reverse effect and the Level two menu button on each page of the W3school. The following is the XHTML code for the two components:

<div id= "header" >
Div, id, and other helpers

If used correctly, Div can be a good helper for structured markup, and IDs is a surprising gadget that gives you the ability to write extremely compact xthml, and to skillfully leverage CSS and add complex and sophisticated behavior to your site through the standard Document Object Model (DOM).

The consortium defines the DIV in the XHTML structure model of its latest draft XHTML2:

A DIV element that provides a common mechanism for adding additional constructs to a document by cooperating with the ID, class, and role attributes. This element does not define the style of expression in the content. Thus, the creator can adapt this element to the style sheet, Xml:lang, attributes, and so on, so that XHTML adapts to their own needs and tastes.

Div is a shorthand for division. Division means division, region and grouping. For example, when you combine a series of links, you form a division of the document.

General mechanism for determining structure

All people who write HTML are familiar with the common elements such as paragraphs and headings, but some people may be less familiar with Div. In the description of the global consortium, we can find the key to understanding the DIV element, "a common mechanism for adding structures." ”

On the homepage of this site, we encapsulate the Tutorial directory listing in a div because the Tutorial directory is not part of any element of the body. Where the H2 element marks the title of each tutorial, while the UL list element marks a detailed list of each tutorial. But in a larger and more specific sense, the tutorial directory plays a structured role, the two level navigation component. To emphasize this role, we use the Navsecond ID to mark this div.

<div id= "Navsecond" >
You can use any name. Both "Gladys" and "Orangebox" are fully symbolic of the XHTML naming conventions. But semantic (semantic) or meta-structured (meta-structural) naming is the best (that is, the ability to interpret the names of the functions in which elements are performed).

When a customer decides to use blue, you will find it very silly to name a part of the site Orangebox (orange Box). In this case, you will feel more stupid, when the final delivery is only six months, you start to adjust the style sheet, but how can not think of "Gladys" (Gladys, Women's name) in the end represents the navigation area, sidebar or search box.

Therefore, labeling the ID as "menu", "Content", or "Searchform" will help you remember. Further, tags are not synonymous with design, and well structured pages can be formatted in any way you want. As a result, whether you use a purely CSS layout or a mixed layout, you will completely eliminate the habit of thinking and creating using performance tags.

ID Vs. class

The id attribute is not new to XHTML; class attributes or div elements are the same. They all go back to the HTML age. The id attribute assigns a unique name to an element. Each name can only be used once on the page being given. (for example, if your page contains a div with ID content, then another div or other element cannot use that name.) Conversely, class attributes can be used over and over again in a page (for example, five paragraphs in a page can use a class name named "Small" or "footnote"). The following markup will help clarify the difference between ID and class:

<div id= "searchform" >search form components go. Thissection of the page is Unique.</div><div class= "blogentry" > 
In this example, the div named Searchform is used to encapsulate the page area containing the search form, and the div class= "Blogentry" is used to encapsulate each article entry in the blog. There is only one search form on the page, so we select ID to label this unique component. But blogs have a lot of portals, so class attributes are applied in this case. Similarly, news sites typically have multiple div classes that can be named "NewsItem" or something else.

However, not all sites need div. Blog sites can only use H1, H2, and H3 headings and <p> paragraphs, as well as news sites. We are here to show class as Blogentry Div, not to encourage you to fill the site with Div, but only to show you this principle: in the same HTML document, use multiple class, but only one time ID.

Sticky sticker Theory

It should be helpful to think of the id attribute as a sticky sticker. I would make a sticker on the fridge to remind myself to buy milk, and I would put one on the phone and remind me to call a late-paying client. Another one, posted on the ledger folder, reminds me of the bills I have to pay before 15th this month.

IDS also mark Special areas in your document to remind you which areas require special processing, in which the id attribute is similar to a sticky sticker. In order to achieve the so-called special processing, you need to use this special ID to write several rules in the stylesheet, or add a few lines of code to the JavaScript file. For example, there are certain rules in your CSS file that apply only to elements within a div with ID name searchform.

When an id attribute is used as a magnetic object (a magnet) for a series of specific CSS rules, it is called a CSS selector. There are many ways to create selectors , but IDs are easy to use and have many uses.

The power of the ID

The id attribute is incredibly powerful. It has the following capabilities:


     

 
      
 
       
As a style sheet selector, we have the ability to create compact, minimized XHTML.
 
       
As the destination anchor for the hypertext, replacing the outdated Name property.
 
       
As a way to locate specific elements from a DOM based script.
 
       
As the name of the object element.
 
       
As a tool for comprehensive use (General purpose processing) (in the case of the Global Consortium, "use as a domain identification tool when extracting data from an HTML page to a database, or converting an HTML document to another format." ”）。
 
      

     
Rules for IDs

The ID value must start with a letter or underscore, and cannot begin with a number. Although this error is not captured by the consortium validation, the XML parser will. Also, if you use the ID with JavaScript in the form, the ID name and value must be valid JavaScript variables. Spaces and hyphens, especially hyphen, are not allowed. Not only that, it is not a good idea to use underscores for class or ID names, due to limitations in CSS2.0 (and some browsers).

Semantic tagging and usability

Now that we've talked about a wide range of XHTML elements (especially Div and ID), let's take a look at the home page example of this site. First, let's review the menu at the header position:

<div id= "Navfirst" ><ul id= "menu" ><li id= "H" ><a href= "/h.asp" title= "html Tutorials" >html tutorials </a ></li><li id= "x" ><a href= "/x.asp" title= "xml Tutorials" >xml tutorials </a></li><li id= "B" > <a href= "/b.asp" title= "browser script" > Browser script </a></li><li id= "s" ><a href= "/s.asp" title= "Server Script" > Server script </a></li><li id= "D" ><a href= "/d.asp" title= "dot net tutorials" >dot Net tutorials </a></li ><li id= "M" ><a href= "/m.asp" title= "Multimedia Tutorials" > Multimedia Tutorials </a></li><li id= "W" ><a href= " W.asp "title=" site manual > Construction Station Manual </a></li></ul></div>
We have seven links and each link is assigned an ID to correspond to the corresponding content: for example, the ID of the name h corresponds to the HTML tutorial, and so on. At the same time, these links are encapsulated in a list element called menu, and the ID named menu indicates the function of the list-a menu list, while a more peripheral name, Navfirst Div, is used to mark this section of the page, and to associate it with something such as the main content ( maincontent), the sidebar (sidebar), and the footer (footer) are distinguished by elements.

The DIV and UL two elements provide a real structure that identifies the function of the content (the navigation bar) and where it belongs in the document (the header position of the page). Instead, the traditional table layout doesn't provide any semantic information about the data, and it easily eats up to three times times the bandwidth.

Note that these tags do not contain an IMG tag, and all are not involved in attributes such as width, height, background, or border, and so on. It also does not use table cells and does not involve a series of related properties. It is very clean and compact and provides all the information that is available to understand it.

Used in conjunction with CSS, these tags provide site visitors with a reliable, fast-loading layout. It also offers the possibility of creating a more flexible and diverse look for visitors. And in a CSS-free environment, our well structured markup can still provide all the content without confusion.

The observant reader may have found that the text contained in the A element is not displayed by the browser, thanks to the perfect combination of the structured markup and CSS, which allows us to define a trigger mechanism with a few lines of CSS rules, and when the user uses the graphics viewer, they see the beautiful navigation buttons, When a user uses a text-only reader, they can get all the text, so that the content is the same for all users.

Also, because the tag does not contain images and table cells, the navigation bar component can be referenced by any page in the site without changing the structure, giving it a different visual effect. In short, we have improved the reusability of the code by modularization the code.