Markup Language - Simplified Tags_HTML/Xhtml_Web Page Production

Click here to return to the HTML Tutorial column of the Web Teaching Network. Above: Markup Language – Let’s Talk About Lists Again Original source Chapter 9 Simplified tags Previously, we have repeatedly mentioned that structured content can classify structure and design details and simplify tags. How to do this? We can use standard-compliant XHTML and CSS to replace tables and images to create the layout we need. Click here to return to the Script House HTML Tutorial column.
Above: Markup language - Let’s talk about the list again
Original source Chapter 9 Simplify tags
We have mentioned before that structured content can classify structure and design details and simplify tags. How to do this? We can use standard-compliant XHTML and CSS to replace tables and images to create the layout we need. .
When using standard technologies to make websites (especially websites that rely heavily on CSS), we often develop a bad habit of adding redundant tags and class attributes. The technology does not require them at all.
By using descendant selectors in CSS, we can eliminate redundant

, and category attributes. Streamlined tags mean that the page will be faster to read and easier to maintain. In this chapter, we discuss several simple methods for accomplishing this task. When making a website with standard technology, how to streamline tags?
Streamlining tags is an important topic worthy of discussion. When making a website, write it in legal XHTML and use CSS to set the display effect. One of the great benefits you can get is to streamline tags. .Short codes represent faster download speeds, which is absolutely key for users who use 56k dial-up Internet access. Short codes also represent server space requirements and reduced bandwidth consumption, which can make bosses and system administrators happy.
The problem is that simply confirming that the page conforms to W3C standards does not mean that the code used in the content will be shortened. Of course, you can add various unnecessary tags to the marked content that meets the standards. Yes, it does meet the standards, but Maybe a lot of redundant code has been added to make it easier to design CSS.
Don’t be afraid! Here are some techniques that allow you to design simple, standard-compliant markup content while retaining enough CSS. Style control capabilities. Next, let’s learn a few simple techniques to streamline tags. Inherited Selector
Here we are going to look at two ways to mark the sidebar (including information, links and other things) on a personal website. Put all the good stuff into one with the id of "sidebar"

, so that you can place it somewhere in the browser window later (CSS layout/typography functionality will be discussed in Part 2). Method A: Happy classification

About This Site

This is my site.

My Links

• Archives


• About Me

I have seen similar method A on many websites When designers first discover the power of CSS, it is easy to go overboard and specify a class for each tag that wants to develop a special style.
Taking the previous example, perhaps we think

Specifying class=sideheading helps them be styled differently from other headings on the page; specifying class=sideheading for

and
• is done for the same reason. When specifying the style of the category CSS
  , suppose we want the title to be orange, use serif fonts, and add a light gray border at the bottom. And the "sidelinks" unordered list needs to remove the small dot symbols, and the list items should be changed to Bold.
  The CSS content required for Method A will look like this:

  
  .sideheading {
  font-family: Georgia, serif;
  color: #c63;
  border-bottom: 1px solid #ccc;
  }
  .sidelinks {
  list-style-type: none;
  }
  .link {
  font-weight: bold ;
  }

  
  We can specify special styles for these tags by referring to the category names (classes) specified in the tags. You can even imagine that other parts of the page are organized in this way: Navigation bar , footer and content area, each tag is added with a messy category so that you can have complete control over them.
  Yes, it does work, but there is a simple way to save these category attributes (class ), while making your CSS easier to read and more organized, then look at method B. Method B: Natural choice

  
  

  
  

  About This Site

  
  

  This is my site.

  
  

  My Links

  
  

  
  
  • Archives
  
  < ;li>About Me

Method B is short and sweet! But wait, where did all the categories go? Well... you'll soon find out that we don't really need them, mostly because we crammed these tags into a single tag with a unique name ( This example is the relationship of

of sidebar).
This is where the inheritance selector comes into play. We only need to directly specify the tags located within the sidebar with the tag name to remove these redundant classification attributes. . Specifying CSS with content context
Let's look at the same style as method A, but this time we use the inheritance selector to specify the tag located in the sidebar.

#sidebar h3 {
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}

#sidebar ul {
list-style-type: none;
}

#sidebar li {
font-weight: bold;
}

By referring to the #sidebar ID, you can specify a special style for the tags contained in it. For example, only the

tag located within

The above-mentioned CSS rules will be set.
This method of specifying styles according to the context of the content is the key to shortening the tagged content. Usually after designing the semantic structure of the content, there is no need to add classification attributes to the tags. Not only used in the sidebar
We only show one paragraph of the page (the sidebar), but this method can be applied to the entire page structure, as long as the marked content is divided into several paragraphs according to logic (perhaps #nav , #content, #sidebar, #footer), and then use the inheritance selector to set special styles for the tags in this paragraph.
For example, suppose that there are both #content and #sidebar paragraphs in the page. You use the

tag and want them to use serif fonts. However, you want the

in one paragraph to be displayed in purple and the other in orange.
This does not require modifying any tags. Add the classification attribute. We can specify the rules common to all

tags through a global style, and then use the inheritance selector to set the color according to the position of the tag.

h3 {
font -family: Georgia, serif; /* All h3s to be serif */
}
#content h3 {
color: purple;
}
#sidebar h3 {
color: orange;
}

Specifies that all

tags use senif fonts, and the color must be purple or orange based on the content context. At this time, we do not need to repeat the sharing rules (font-family in this example), thus shortening the content of the CSS and preventing duplicate rules in multiple declarations.
Not only can we reduce the extra markup space required for the class attribute, but the CSS structure also becomes It is more meaningful, making it easier for us to read its content, easier to organize according to page segments, and it becomes very simple to modify specific rules. This is especially obvious for large and complex layouts, because then you may simultaneously There are hundreds of CSS rules.
For example, in this example, if you add the sharing rule to each declaration, and later want to change all

to sans serif fonts, you will have to modify it There is no way to do it in three places at once. Fewer categories are better to maintain
In addition to reducing the source code space needed, replacing redundant categories with inherited selectors also means that the markup content can be easily expanded in the future.
For example, let's assume that you want to make the sidebar The links inside become red instead of blue like the rest of the page, so you create a red class and add it to the anchor tag like this:

About This Site

This is my site.

My Links

• class="red">Archives


• class="red">About Me

< ;/p>

And turning these links into red (assuming the default link color is not red) requires CSS similar to this:

a:link.red {
color: red;
}

There is nothing wrong with these actions and they can work normally, but if you change your mind in the future, What if you want to change these links to green? Or, more realistically, your boss occasionally said "red is outdated this year, change these sidebar links to green"! No problem, you just need to modify the red in the CSS The class is done, but the class attribute in the markup content is still red. Obviously this is not completely semantic, just like using other colors as category names.
This is not a good place to use display effects as category names. But if we don’t specify the category at all, we can save a lot of effort (and code) in processing categories, and at the same time make the content semantics more reasonable. We might as well use the inheritance selector to select these sidebar links and specify the style as needed.
The markup content is exactly the same as method B, and the CSS required to set the sidebar link will be like this:

#sidebar li a:link {
color: red;
}

Basically, this means "only the

tags within

use the href attribute Anchor tags should still appear in red.
For now, we maintain short and flexible markup content, and future updates will only require the use of CSS, whether you want the link to be red, green, bold, or italic, no problem .
Next, let’s look at another way to simplify tags: eliminate unnecessary

tags and directly use existing block-level tags.
                                                                                      #p# Unnecessary

In addition to reducing the classification attributes required to specify styles, there is another simple way to streamline tags: that is, when there are block-level elements in the

tag, replace Remove it and look at these two examples next. Method A: Use

• Archives


• About

This is a very small navigation bar, consisting only of an unordered list. We want to cover the entire The

of the list specifies nav as the id.
But

is a block-level element like

, why not just specify the id for it directly? Let's look at method B. Method B: Remove







Archives




About


ul>


Method B shows that ul can be used directly and the redundant

is discarded. Any positioning, internal and external patches and other style settings can also be assigned to

, as simple as assigning to

. So instead of discarding the outsourcing tag, you can see part of the tag source code.
There is an important point to note, that is, this method is only used when the nav does not contain anything other than

It is only applicable when tags are included. For example, there should be no redundant paragraphs,

or

. Since these tags are usually not suitable to be placed inside

, so

should be used as an outsourcing tag. It makes more sense. However, for the examples given by Method A and Method B, the unordered list is the only connotative tag, so it makes sense to throw away

. In fact, considering the existence meaning of all outsourced tags Very important, does it really need to be placed somewhere? Is there an existing block-level element that can be used? Simple markup code is not difficult to do. Other Examples
Another situation where

can be thrown away is in the case of outsourcing the

, for example, if it was originally like this:






... form elements here ...




In fact, it can be written in a simpler way:





... form elements here ...



Similarly, if the footer of the website only contains a single paragraph, in addition to writing like this:







Copyright 1999-2004 Dan Cederholm





can also be written like this:




Copyright 1999-2004 Dan Cederholm


Of course, this modification can only be done when the footer of the page only contains one paragraph.
                                                                                      #p# In summary
I looked at two simple ways to streamline tag code. The first is to use category attributes sparingly and set styles with inherited selectors; the second is to directly specify the id for an existing single block-level element without using redundant < ;p>Outsource them.
These methods may seem like only inconsequential size savings, but once you start implementing them for your entire website, streamlined, structured code will gradually become clearer and more flexible to write. , content that conforms to semantics and is easier to maintain in the future.
In "Technique Extension", let's see how to further utilize the power of inherited selectors, specify styles for nested lists, and make it into a site map. Skill Extension
In this unit, let’s explore how to use inheritance selectors to create special styles for different levels of a nested list. What we are making is part of a small site map. We will find that it is very basic to keep The markup code can specify styles for each level without adding additional classification attributes.
First, let’s take a look at the markup code. The original
tag is a nested, unstyled list that provides the most basic hierarchical structure for something like an outline (and of course a sitemap in this case). Since we use nested lists, we can be confident that All browsers and devices will display its structure correctly, and it can be easily styled later using CSS.
The markup code for a small site map might look like this, with three top-level items and several nested items.






• Weblog


• Articles
  
  
  
  • How to Beat the Red Sox
  
  
  • Pitching Past the 7th Inning
    
    
    
    • Part I
    
    
    • Part II li>
      
    
    
  
  
  • Eighty-Five Years Isn't All That Long, Really
  
  
  
  


• About




Figure 9-1 is how most browsers will display this example , you can find that as long as we use the default values, the structure we are pursuing has roughly taken shape. Even without specifying the style, the structure is still very obvious, although it is indeed a bit boring, so then we started to add some CSS.

Figure 9-1 Nested list that has not yet been styled Adding styles
Suppose we want to add some style definitions to a certain layer of the site map. We need to add something to the markup code. In fact, it is just an id, so that we can specify this list with other items on the page. Partial lists have different styles without adding any other markup content.




id="sitemap">

• Weblog


• Articles
  
  
  
  • How to Beat the Red Sox
  
  
  • Pitching Past the 7th Inning
    
    
    
    • Part I
    
    
    • Part II
    
    
    
    
  
  
  • Eighty-Five Years Isn't All That Long, Really
  
  
  
  


• About




Using the inheritance selector, you can create a unique style for each level of the list. For example: If you want the outermost font method to be bold , use orange, and if the inner layer gradually shrinks, you can first specify the size, thickness and color for the entire list.


#sitemap {
font-size: 140%;
font -weight: bold;
color: #f63;
}


This will change the entire list into large fonts and orange bold font. Then for any level of nested structure The

• tag inside reduces the font size and changes the color.

  
  #sitemap {
  font-size: 140%;
  font-weight: bold;
  color: #f63;
  }
  #sitemap li ul {
  font-size: 90%;
  color: #000;
  }

  
  The previous CSS will cause all top-level items to be displayed in large, orange and bold fonts, while the inner nested lists will be displayed in black, 90% font (in this case, 90% of 140%). The result See Figure 9-2.
  
  Figure 9-2 Specify styles for top-level list items
  We don’t need to specify a smaller font for the third layer, because it will automatically use 90% of 90 % (A little confusing, but it works!)
  Each level of the list now has an automatically reduced font-size, followed by some dots. Customize the dot symbol
  to remove the default style, and use the background attribute to add decorative dot symbols to the third-level items. First remove the default list style for all

• tags, and then The third layer project specifies endoscopic images. For further differentiation, font-weight:normal will also be set for the third layer -- overriding the bold setting value of the list.

  
  #sitemap {
  font-size: 140%;
  font-weight: bold;
  color: #f63;
  }
  #sitemap li {
  list -style: none; /* turns off bullets */
  }
  #sitemap li ul {
  font-size: 90%;
  color: #000 ;
  }
  /* Third layer*/
  
  #sitemap li ul li ul li {
  font-weight : normal;
  padding-left: 16px;
  background: url(bullet.gif) no-repeat 0 50%;
  }

  
  Figure 9-3 is the completed website map, using custom dot symbols and ordinary fonts on the third layer

• tag. Added on the left An inner patch of 16 pixels to leave room for the decorative dot image (and also leave some extra white space). It also tells the browser to start displaying the image from 0 pixels on the left and 50% above, which basically makes the left side of the image Align and align the center line of the text. Although we can specify vertical alignment in pixels here, if specified in percentage, the dot image can still maintain the correct arrangement when the text size changes.
  
  Figure 9-3 The third layer of projects plus custom dot pictures Add a border
  Then add a dotted border to the left of the second-level list to complete our site map. This can further remind readers that the top-level project has sub-projects belonging to it.
  In order to only display the second-level list To achieve this effect, these rules will be added:

  
  #sitemap {
  font-size: 140%;
  font-weight: bold;
  color: #f63;
  }
  #sitemap li {
  list-style: none; /* turns off bullets */
  }
  #sitemap li ul {
  margin: 6px 15px;
  padding: 0 15px;
  font-size: 90%;
  color: #000;
  border-left: 1px dotted #999;
  }
  /* for third -level */
  #sitemap li ul li ul {
  border: none;
  }
  #sitemap li ul li ul li {
  font-weight: normal;
  padding-left: 16px;
  background: url(bullet.gif) no-repeat 0 50%;
  }

  
  We slightly adjusted the outer patch of the second layer and added a dotted border. After this rule, we used border:none; to remove the border of the third layer.
  Figure 9-4 is the modified Good font, border and picture list effect.
  
  Figure 9-4 Completed list style, with dotted edges added to the second layer
  When designing lists such as outlines, nesting

  is a well-structured, easy-to-style solution. By specifying a unique id lag for the top-level
  , we can offload the task of styling each layer individually to CSS without adding redundant display. Effect tags. The design possibilities are far beyond this simple example.
  Figure 9-5 is the effect of the same CSS applied to a slightly larger site map. Since CSS specifies styles based on levels, the label content is written Exactly the same, the project will automatically select the appropriate style according to the different nesting levels.
  
  Figure 9-5 An expanded version of the site map made with CSS and nested lists Conclusion
  At the beginning of this chapter, we explored two ways to streamline tag source code, one is to use inherited selectors, and the other is to throw away redundant

  tags.
  Integrated selectors do not have to use redundant, Classification attributes that easily make marked source code difficult to read, while removing the

  tag that directly contains unique block-level elements allows us to save bytes as much as possible, and also makes it easier to build source code with complex layouts. .
  Using these practices may only seem to save a few bytes, but once you start applying these practices to your entire website, the savings start to accumulate, and you can think of it as another way to write flexible, structured markup. Great tool.
  In addition to streamlining the tag source code, we also looked at how inheritance selectors can be used to style sitemaps using nested lists. You can specify unique styles for each level of the outline without having to use additional Classification attribute, once again saves a few bytes, and makes future updates and redesign work easier.
  Long live the streamlined tag code!
  This book "part I starts with tag syntax" is all over, I hope These simple statements can give you some inspiration