Markup language - phrase elements

Author：Eve Cole Update Time：2025-05-15 13:48:02

Click here to return to the Wulin.com HTML tutorial column.

Above: Markup Language - Forms

Original source Chapter 6 , and other phrase elements

In the introduction and previous chapters, the concept of semantic tags has been mentioned slightly, using tags to identify the meaning of files instead of simply setting the display effect with tags. Designing a web page that completely uses semantic tags is a good idea. However, I think this goal is too ideal. Of course, not achieving the goal completely does not mean that the effort process is worthless. At least it is valuable to work towards this goal.

In reality, it is often necessary to add non-semantic tags to achieve specific design goals, mainly because famous browsers today cannot support the standards by 100%. Some CSS rules cannot display the correct effect in some browsers, and unfortunately, we must use additional tags in the process of achieving certain design goals.

There is an important concept that must be taken seriously: that is, trying to write semantic structures as much as possible will bring practical benefits. At the same time, although the support for standards has not reached 100%, it has crossed the critical point so that we can now write web pages using methods that meet network standards. Sometimes we have to make some sacrifices, but the more labels that comply with standards, the easier it will be for the future. Display effect vs. Structure labels

This chapter will discuss the difference between display effects and structural labels, or rather, the differences between using replacement and using replacement. Later in this chapter, we will also discuss several other phrase elements and their importance within the standard-compliant, structured label grammar.

You may have heard that some people suggest using replacement when they need bold text, but they don't further tell you why such replacement is needed. Without knowing why , it's really hard to expect other web designers to change their use habits of tags just because they have heard of it. Why is better than ?

What are the benefits of removing the and tags and replacing them with and ? In fact, all this is to express semantics and structure , not just to show the effect . All the examples in this book also strive to follow this concept. See what the experts say

First, let’s take a look at how W3C describes and in the HTML4.01 phrase element specification (http://www.w3.org/TR/html4/struct/text.html#h-9.2.1):

Phrase elements can add structural information to text fragments. Common phrase elements have the following meanings:

 Representative stressed

 Represents a stronger emphasis

So here we are discussing two different degrees of emphasis. For example, it is a single word or phrase. When pronounced, it should be louder, with a higher tone, faster pronounced, or... well, it is more emphasized than the general text content.

W3C then describes the following paragraph:

The display effect of phrase elements varies with the browser. Generally speaking, the visual browser should display the text content in italics and the text content in bold. The voice synthesis software can change the synthesis parameters with the content, such as volume, tone and speed, etc.

Ahh! The last sentence is particularly interesting. The speech synthesis software (we used to call it a screen reader) will correctly handle the text that must be emphasized, which is indeed a good thing.

In contrast, or are just simple display effect tags. If our goal is to separate the structure from the display effect, using and is the right choice. Just want to display bold and italic text with css. More examples will be discussed later in this chapter.

Next, look at two identification examples to help us understand their differences. Method A

your order number for future reference is: 6474-82071.Method B

your order number for future reference is: 6474-82071.Rough and beautiful

This situation is a perfect example of using more than. We intend to make the specific text in the sentence more important. In addition to displaying order numbers in bold, we also hope that screen readers will also change the way they express this content: increase volume, change tone or speed. Method B can achieve both goals at the same time. So what?

Similarly, replacing with can express importance at the same time, rather than simply displaying the text content in italics. Let’s take a look at these two examples: Method A

It took me notone,butthree hours to shovel my driveway this morning.Method B

It took me notone, butthree hours to shovel my driveway this morning.

In the previous example (the real situation when this book was written), my purpose was to make the word three express in an emphasis tone, just like I read this word loudly, visually, Method B will be displayed in italics in most browsers, and the screen reader will adjust the tone, speed or volume appropriately. As long as it is bold or italics, it is fine

It must be noted that in many cases, only the text effect of bold and italics is needed to visually display. In other words, suppose you have a list of links in the sidebar, and you like to let all links be displayed with the same effect: that is, bold (Figure 6-1)

Figure 6-1. Example of bold links placed in the sidebar

In addition to visual features, we do not intend to emphasize link content. This is a good place to change the appearance of links with CSS, so that they will not be particularly emphasized by screen readers and other non-visual browsers.

For example, do you really want the bold link to be read faster, louder, and higher tone? Probably not, the bold here is just the display effect. font-weight is equivalent to bold

In order to achieve the display effect of Figure 6-1, let's assume that the link bar is placed in <div> with id set to sidebar, so that we can use CSS to specify that the links within #sidebar should be displayed in bold:

#sidebar a{

font-weight:bold;

}

Extremely simple, I think it’s a bit ridiculous when I mention it, but this is indeed a good way to help separate structure and display effects. It’s bold!

Similarly, you can apply similar ideas when thinking about italic text. When you don't want to emphasize content and just want to display the text in italics, you can use the font-style attribute to deal with these situations through CSS again.

Let's use the same #sidebar as an example. For example, if you want all links in #sidebar to be displayed in italics, you can write this:

#sidebar a{

font-style:italic;

}

It is another simple concept, but in the field of structured marking grammar, I think it is very important to discuss these situations - using CSS to process CCTV instead of displaying effect labels. Sometimes the simplest solution is also the easiest to ignore. Share bold and italics

When I plan to display the text content in bold and italics at the same time, I think I must first think about a question, what degree of emphasis do you plan to convey? Based on the answer to this question, I will choose the appropriate label: (emphasis) or <stronger emphasis), and then mark the text with the selected label.

For example, as for the following example, I originally planned to let fun be displayed in bold and italics at the same time, but in the end I chose to use to emphasize this word.

Building sites with web standards can be fun!

Most browsers will only display this word in italics. To use both bold and italics, we have several options. Oh, I really hope you agree with the above sentence. Ordinary

One method is to use a normal package outside of fun, and specify the CSS rule to display all s in bold. The tag syntax looks like this:

Building sites with web standards can be fun!

And CSS looks like this:

em span{

font-weight:bold;

}

The obvious semantic part is not good because we added extra tags, but this method is still useful for everyone. Emphasize with class

Another method is to specify a class for the tag and add a bold effect in CSS. The tag syntax looks like this:

Building sites with web standards can be fun!

And CSS looks like this:

em.bold{

font-weight:bold;

}

Using can achieve the italic effect (although semantically emphasizes the text content), and adding a bold class to it will make the text inside appear in bold.

Similar methods can also be used to modify . At this time, when we emphasize a certain paragraph, we can design the italic class with italic effect, and then match the original bold effect.

The markup language looks like this:

Building sites with web standards can be fun!

And CSS is like this:

strong.italic{

font-style:italic;

}

Previous page1 2 3 4 5 Next page Read the full text