Web page
How do you define a tutorial site or news site, a tutorial title, or a news headline?
Document title is the most important part of the document, but also search engine spiders crawl when the most concerned about the content, how to define the title? 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:
A, there is no semantic definition of the title:
<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 this approach is that we can attach a CSS rule to it so that its text appears as a caption.
. Heading {
font-size:24px;
Font-weight:bold;
color:red;
}
Now all the headings are marked with heading class in bold font size and red. But is that the right thing to do? If someone uses a browser that does not support CSS, what is the situation?
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.
B, helpless <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.
C, style plus substance
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.
Easily customize styles for headings
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.
The friendliness of the search engine
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
A simple style
The easiest thing to do with CSS is to set a different font style for our headings. We can create a CSS rule that will apply the style to all
Let's get to know our own super Cool title:
Change colors, fonts, and dimensions with CSS:
H1 {
Font-family:arial, Sans-serif;
font-size:24px;
Color: #red;
}
All places found
