The best way to define a title _css/html

Author: Akhun 2005-4-15 20:45:18
The original: What's the best by Mark up the Title of a Document?
Description: This article is a chapter in the book "Web Standards solutions:the Markup and Style Handbook". ISBN: isbn:1590593812. We will translate the valuable chapters of this book in succession.
Original Author: Dan Cederholm
Translation: Akhun
A document title, what is the best way to define it? To answer this question, first imagine that we want to define the title of the article on a page, usually we have three ways to achieve this simple purpose:

Method One: Does it make sense?
article title
Although it can be a handy label in some cases, it does not convey the full meaning of the title. One of the benefits of using this approach is that we can attach a CSS rule to it and assign it a heading class so that its text appears as a caption.

. Heading {
font-size:24px;
Font-weight:bold;
Color:blue;
}
OK, now all headings are marked with a heading class in bold font and blue. That's great! But is that the right thing to do? What if someone viewed it with a browser that doesn't support CSS?

For example, what if the rules for this external stylesheet we set are not supported by older browsers? Or if someone with a visual impairment reads this page with a screen reader, what happens? What a visitor sees (or hears) through these channels is no different from the normal text on the page.

Although class= "heading" adds a bit of meaning to this tag, it is still just a normal label that can be modified by the default style of most browsers.

When the search engine retrieves this page, it skips over the label, as if it doesn't exist, giving a little extra attention to the keywords it might contain. In the back we will talk more about the relationship between search engine and title.

Finally, since the tag is an inline element, we may need to nest it in an extra block-level element, such as

Label or label so that it can form a separate line, which will further confuse your tag with unnecessary code. These additional tags are necessary to enable browsers that do not support CSS to display text that is not different.

Method Two:

and combinations

Article title

Using a paragraph tag will bring us a block-level display,Will turn the text into bold. But when we use this method to mark an important headline, we face the same meaningless result.

Unlike method A, tags can display text in bold in a visual browser-even in browsers that do not support CSS. But like tags, search engines do not give higher priority to something that is bold in a paragraph.

Difficult to design styles

With the ordinary

And The combination also brings another drawback-the title cannot be designed to be different from other paragraphs. We might want to use a special style to highlight the title, make the page content clearer and more structured, but use this method only to show it as bold.

Method Three: Style plus essence

Article title

Well, what a good title definition. Most web designers are familiar with it. In fact, using them properly, You can provide flexible, indexed, and styled structures for page content.

It's also a smart way to define it, and you'll find it simple. No longer need additional tags, you can say that this is just a little bit less than the other two methods, which can be ignored, but one thing to save is a little.

One until

, representing the six levels of the title, from the most important (

) to the most minor (

）。 They are block-level and do not need to add other elements to make them go alone. Simple, effective-it's a good tool.

Easily customize Styles

Because we use

The label is unique, and theOr

Labels are more suitable for use throughout the page, so we can style them with a variety of CSS methods.

What's more, even if you don't use a style at all, a title tag can clearly represent a title! A visual browser puts

Displayed in a larger bold body. A non-styled page will display the structure of the document as expected, with the appropriate title tag to convey the meaning.

Screen readers, PDAs, mobile phones, and both visual and non-visual browsers will understand that what you do when you encounter a headline tag, the right deal, is more important than the plain text on the page. With tags, browsers that do not support CSS do not treat it in a special way.

Nasty default Style

In the past, designers might have avoided using title tags completely because the default values of browsers were ugly. Or, because of the large size of the default value, avoid using

Or

, instead, use the title label of the higher value to achieve a smaller size.

However, it is important to emphasize that we can simply use CSS to change these headline tags--for example, a <;h1> is not necessarily a huge version of the full screen. In the back, I'll show you how simple it is to style the title tag with CSS, and hopefully it will help you reduce your fear.

The search engine-friendly

This is a huge benefit. Search engines like title tags. On the other hand, a label or an ordinary bold paragraph tag means a minor point. The appropriate use

To

Tagging your headlines requires just a little bit of effort, but it makes it easier for search engines to retrieve your pages so people can eventually find them.

Search engine bots give special attention to the title tag-this is where you might put some keywords. It's like retrieving theAnd , they will look under the heading label below the page. If you do not use these tags, then the keywords contained inside will not be considered valuable and thus ignored.

So with a little effort, you can increase the likelihood that people will find your site based on the content of the page. Sounds good, doesn't it?

About the order of headings
In the example, this particular title is the most important in the page, because it is the title of the document. Therefore, we use the most important title tags,

。 Conform to the norms of the people, some think skipping a number of title levels is a bad use. For example, imagine us on the following page:

Article title

The title we followed (if not with another

Repeated words) should be

, and then the

Wait a minute. You may not be in

Skip to the next level, just keep up.

。 I am inclined to agree with the above view and to construct a typesetting structure along with the continuity of the level of writing. This makes it easier to add titles and styles to an already existing page, and you will reduce the number of errors that result from the use of out-of-bounds numbers.

As mentioned earlier, the designer may use

To label the most important title on a page simply because its default font size is not like

It's so annoying and huge. But remember, first structure, then design. We can always use CSS to style the headings into any text size we like.

