css| Tips | Web page A document title, what is the best way to define it? To answer this question, imagine that we want to define the title of the article on a page, and we usually have three ways to achieve this simple goal:
method One: Does it make sense?
<span class= "heading" > article title </span>
Although <span> is a handy label in some cases, it does not convey the full meaning of the title. One advantage of adopting this approach is that we can attach a CSS rule to it, assign it a heading class, and make its text appear as headings.
. Heading {
font-size:24px;
Font-weight:bold;
Color:blue;
}
OK, now all the headings are marked with heading class in bold font size and blue. That's great! But is that the right thing to do? What if someone is watching with a browser that doesn't support CSS?
For example, what happens if we set the rules for this external style sheet without being supported by the older version of the browser? Or do people with visual impairments use screen readers to read this page? What a visitor sees (or hears) through these channels should be no different from the normal text on the page.
Although class= "heading" adds a bit of meaning to the label, <span> is still just a normal label that can be modified by the default style of most browsers.
The search engine retrieves the page by skipping the <span> tag, as if it doesn't exist, without 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, because the <span> tag is an inline element, we may need to nest it in an extra block level element, such as a <p> tag or <div> tag, so that it can form a separate line, which will further confuse your label 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:<p> and <b> combination
<p><b> article title </b></p>
Using a paragraph label will give us a block-level display,<b> the text into bold. But when you mark an important title in this way, we face the same meaningless result.
Unlike the method a,<b> tags can display text as bold in a visual browser-even in browsers that do not support CSS. But like <span> tags, search engines do not give a higher priority because there are some things that are not bold in the paragraph.
difficult to design style
With the combination of common <p> and <b>, there is another drawback--it is not possible to design this title differently from other paragraphs. We may want to use a special style to highlight the title to make the page content clearer and more structured, but this method only makes it bold.
method Three: Style plus essence
Well, what a good title definition. Most web designers are familiar with it. In fact, the proper use of them,
It's also a smart way to define, and you'll find it simple. No longer need additional tags, you can say, this is only a little bit less than the other two methods, which can be negligible, but saving a little.
Easy Customization Style
Because we use
More importantly, even without the style, a title tag can clearly indicate a title! The Visual browser displays
Screen readers, PDAs, mobile phones, and both visual and non-visual browsers will understand that when you hit a title tag, the right thing to do is to treat it more seriously than the plain text on the page. With <span> tags, browsers that do not support CSS do not treat it specifically.
Nasty Default Style
In the past, because the default browser defaults were ugly, designers might avoid using headline tags altogether. Alternatively, avoid
However, it is important to emphasize that we can simply use CSS to change the title tag--for example, a <;h1> is not necessarily a huge scale that covers most of the screen. In the end, I'll show you how easy it is to use CSS to style title tags, and hopefully it will help you reduce your fear.
for search engine friendly
This is a huge benefit. Search engines like title tags. On the other hand, a <span> label or plain bold paragraph label means a little bit more. The proper use of
Search engine robots will give special attention to title tags--this is where you might put some keywords. Just like retrieving <title> and <meta>, they look up the title tag below the page. If you do not use these tags, the keywords contained in them 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 page content. Sounds good, doesn't it?
about the order of headings
In the example, this particular title is the most important part of the page, because it is the title of the document. Therefore, we use the most important title tag,
The title we're going to take (if not another
As mentioned earlier, the designer may use
"About the order of the headings" which says "H-Ann sequential row h1h2 ..." Theoretically it should be so, but in the actual custom style, you have only 100% of the entire structure of the site to understand you can do this, in addition to many of the work is because H this label has the default kind of a lot of people do not like to apply it, as div,p such as the label easy to control. But we should use the theory to guide us to work in the right way.
