Markup language - title_HTML/Xhtml_web page production

Standardized Design Solutions - Markup Language and Style Handbook
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup Starting from Markup Syntax
Chapter2 Titles
Overview:
Not only do all web pages need titles, but if marked up correctly, they can add to a web design and usability Quite a few.
In terms of appearance, the title of a web page usually uses a larger font size, and may use a different color or font from the main text. The function of the title is to "briefly describe the topic discussed in the following chapters" , W3C describes it this way - Display a summary of each paragraph in a web page.
How to create a page title to make the most effective use of the information we want to display? In this chapter, we will study several commonly used methods for processing titles. methods, try to find one of them that is most helpful to us, and then we will use some CSS tips and tricks to decorate the best method.
The best way to create a document title What is a good way?
Before answering this question, let us assume that we are now placing the title at the top of the document and let's look at three ways to achieve a similar effect.
Method A: Does it make sense?
Super Cool Page Title
Although the tag is used in some The occasion is a convenient tag, but for the page title, it doesn't mean much. The only advantage of using this method is that we can specify a css style for the heading class to make the text look like a title.
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
Now, all titles marked with heading class It will all become bigger, thicker, and blue, which is great, right? But what happens if someone visits this page using a browser that does not support CSS?
For example, if we put the CSS style in the old in an external style sheet file that the browser does not support — or what happens when a screen reader reads the page for users with disabilities? Users accessing the page through these means will not be able to see (hear) the title and body text. The difference. Annotation methods such as
class="heading" slightly describe the meaning of the tag content, but is just a general-purpose container, which only allows most browsers to change the default display style. .
When the search engine crawls this page, it will skip the tag as if it was not there, and will not increase the weight of the keywords that may be included in it. This will be discussed later in this chapter. Mention more about the relationship between search engines and page titles.
Finally, since the tag is an inline element, we mostly need to place the content of method A into another block-level container, for example or

so that it can occupy a line of its own. This will generate a lot of unnecessary code. Even if you add the necessary containers, browsers that do not support CSS will still display the text in its original way for users to see. There is no difference between the title and the text.
                                                                        #p#
Method B: Combination of P and B

Super Cool Page Title

Method B uses the paragraph tag, which will give us the block-level element display we want, and the tag will make the text bold (on most browsers) — but When we mark important titles in this way, we still have to face the same lack of semantic results.
Unlike method A, the existence of the tag even if it lacks the definition of CSS style, in most browsers The text will still be presented in bold style. However, like the tag, search engines will not increase the keyword weight for bold text within the paragraph.
It is difficult to add styles
Using a simple combination of p and b tags prevents us from adding a different style to this title from other paragraphs. Perhaps we want to emphasize the title in a unique way and add definition and structure to the page content - but using After using this method to make it appear bold, we have no way to do these things.
Method C: Style and substance

Super Cool Page Title

Haha, here comes our good friend the title tag. Title tags have been around since the beginning, but many web designers still fail to use them in a consistent way. If used properly, title tags can Provides an anchor point for page content and provides a flexible, indexable, and style-changeable structure.
From the perspective of the tags themselves, you will love its simplicity. They do not require additional container tags. You It can even be said that this method can save some bytes compared to the first two methods, which may be ignored, but every byte smaller is a change.

to

represent six layers of headings respectively, from the most important

to the least important

. They are block-level elements themselves and can be self-contained without an additional container. One line, simple and efficient - the best tool for the job.
Easy to define styles
Because the

tag has a unique meaning, unlike Or the

tag will be used multiple times in the text, so we can use CSS to add various styles to it (we will discuss it in depth in "More Techniques" in this chapter).
More importantly, even without adding any style definitions, the title tag clearly looks like a title! The browser will use large fonts and bold fonts to render the content of

, even if all style definitions are removed from the page, You can still see the structure of the document, because the correct title tag describes the meaning of the content, not the presentation. (Figure 2-1)

Figure 2-1: Using title tags after breaking away from styles Page content
Screen readers, PDAs, mobile phones and other visual and non-visual browsers can also recognize and correctly process the content of the title tag, highlighting its importance above other content on the page. Use < ;span> tag, browsers that don’t support (or can’t support) CSS won’t think it’s anything special.
Annoying default styles
In the history of web design, designers People avoid using title tags simply because without styling, title tags look like monsters. Choose one of the two, and some of them avoid using

because the default font size is too large. Or

instead use a smaller font size and a higher label title tag.
However, there is an important point worth emphasizing. We can easily change the style of these title tags according to our own preferences by defining css - for example For example,

may not necessarily be a giant thing that takes up half the screen. Later, I will demonstrate how to simply use CSS styles to define title tags to help you overcome your fear of

.
Friendly to search engines
This is the biggest advantage. Search engines like title tags very much. Bold fonts in tags or paragraphs do not mean much to search engines. Using the correct

~

tag title does not take much time, but it can help search engines index your page and make it easier for users to find your page.
Search engine robots attach great importance to The content in the title tag, maybe, you will want to pile a few keywords in it. After they process the