Markup Language - Phrase Element_HTML/Xhtml_Web Page Production

In the introduction and previous chapters, the concept of semantic tags has been slightly mentioned. Using tags to identify the meaning of files is not just to set the display effect with tags. It is a good idea to design a web page that completely uses semantic tags. .However, I think this goal is too idealistic. Of course, not completely achieving the goal does not mean that the hard work is worthless. At least working towards this goal is valuable.
In real situations, it is often necessary to add non-semantic tags in order to achieve specific design goals, mainly because none of the well-known browsers currently support the standard. Some CSS rules cannot be displayed in some browsers. correct effect, which unfortunately necessitates the use of additional tags in order to achieve certain design goals.
There is an important concept that must be kept in mind: that is, trying to write semantic structures as much as possible will bring practical benefits. At the same time, although the support for the standard is not 100%, it has passed the critical point. Let us now Be able to write web pages using methods that comply with web standards. Sometimes you have to make sacrifices, but the more standards-compliant tags you insist on writing, the easier your future work will be. Display effect VS structure label
This chapter will discuss the differences between display effects and structural tags, more specifically, the differences between using to replace , and using to replace . In this chapter Later, we'll also discuss several other phrase elements and their importance within standard-conforming, structured tag syntax.
You may have heard some people recommend replacing with when bold text is needed, but they did not tell you further why such a replacement is needed. Without knowing "why" In this case, it's hard to expect other web designers to change their usage of tags just because they've heard they need to do so. Why are and better than and ?
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 display effects. , all examples in this book also strive to follow this concept. See what the experts say
First of all, let’s take a look at how W3C describes the and
phrase elements in the HTML4.01 phrase element specification. Common phrase elements can add structural information within text fragments. The meaning is as follows:
represents emphasis
represents stronger emphasis
So what we are discussing here are two different levels of emphasis. For example, a word or phrase should be pronounced louder, with a higher pitch, faster, or...well, that's it More emphasis than ordinary text content.
W3C went on to describe the following:
The display effect of phrase elements varies with browsers. Generally speaking, visual browsers should display the text content of in italics and the text content of in bold. Speech synthesis software can Change synthesis parameters such as volume, pitch, speed, etc. to match the content.
Aha! That last sentence is particularly interesting. Speech synthesis software (previously called screen readers) will correctly handle text that must be emphasized, which is indeed a good thing.
In contrast, or are just display effect tags. If our goal is to separate the structure from the display effect, it is correct to use and If you simply want to display bold or italic text, just use CSS. More examples will be discussed later in this chapter.
Let’s look at two logo 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. Thick and beautiful
This situation is a perfect example of using instead of as we intend to make specific text within the sentence appear more important. In addition to bolding the order number, we also want screen readers to also Change the way they express the content: increase the volume, change the pitch or speed. Method B achieves both goals at the same time. So what?
Similarly, replacing with can express importance at the same time, rather than simply displaying 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. emphasis
In the previous example (which was true at the time of writing), my intention was to make the word "three" appear emphatic, as if I were saying the word out loud. Visually, method B works better in most browsers. will be displayed in italics, and the screen reader will adjust timbre, speed or volume appropriately. Just bold or italics will be fine
It must be noted that in many cases, only bold and italic text effects need to be visually displayed. In other words, suppose you have a list of links in your sidebar, and you like to have all links displayed with the same effect: Also It’s bold (Figure 6-1)

We don’t intend to emphasize link content beyond visual features. This is a good place to use CSS to change the appearance of links so that they are not highlighted by screen readers and other non-visual browsers.
For example, do you really want bold links to be read faster, louder, and with a higher pitch? Probably not, the bold here is just for display effect. font-weight is equivalent to bold
In order to achieve the display effect of Figure 6-1, let us assume that the link bar is placed in the

whose id is set to sidebar, so that we can use CSS to specify that the links within the #sidebar should be displayed in bold:
#sidebar a{
font-weight:bold;
}
It’s so simple that I feel a little ridiculous just thinking about it, but it’s a great way to help separate structure from presentation. That’s bold!
Similarly, similar ideas can be applied when thinking about italicized text. When you don’t want to emphasize content and just want to italicize text, you can again use the font-style attribute to handle these situations through CSS.
Let's use the same #sidebar as an example. For example, if you want all links in the #sidebar to be italicized, you can write:
#sidebar a{
font-style:italic;
}
Another extremely simple concept, but in the field of structured markup syntax, I think it is very important to discuss these situations - using CSS to deal with CCTV instead of displaying effect tags. Sometimes the simplest solution is also the most Easily ignored. Share bold and italics
When planning to display text content in bold and italics at the same time, I feel that I must first think about a question, what degree of emphasis do you intend to convey? Based on the answer to this question, I will choose the appropriate tag: (emphasis) or (stronger emphasis), then mark the text with the selected label.
For example, in the following example, I originally planned to make "fun" appear in bold and italics at the same time, but in the end I chose to use to emphasize the 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 a few options. Oh, I really hope you agree with the above sentence. Normal
One way is to wrap an ordinary outside "fun" and specify a CSS rule to display all within in bold. The markup syntax looks like so:
Building sites with web standards can be fun!
And the 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. Emphasis on class
Another method is to specify a class for the tag and add a bold effect with CSS. The markup syntax looks like this:
Building sites with web standards can be fun!
The CSS looks like this:
em.bold{
font-weight:bold;
}
Using can achieve an italic effect (while emphasizing the text content semantically), and adding bold class to it will cause the text within to be displayed in bold.
A similar method can also be used to modify . At this time, we can design italic when emphasizing a certain paragraph of text. class plus italic effect, coupled with the original bold effect of .
The markup language looks like this:
Building sites with web standards can be fun!
The CSS is like this:
strong.italic{
font-style:italic;
}
#p# Overview
I think it's necessary to discuss this topic, so this is a good example of one of the core themes of this book: It is important and beneficial to separate content from presentation: and swapping and tags Forming tags into structurally equivalent tags (when emphasizing content) is a simple way to help achieve this kind of separation goal.
So the next time you hear someone say "Yes, you should always use instead of ", you have a good reason to back up this argument.
In most cases, it is suitable to use or to convey emphasis. When you just want to pursue a visual bold or italic effect, use CSS. Skill extension
So far in this chapter, we have focused on and , which are just part of what W3C calls "phrase elements". In this part, let's look at some more phrase elements and their relationship to standards. Phrase element
In addition to and , the complete list of phrase elements in the W3C HTML 4.01 specification includes: : Contains other citations and reference source information : Represents the definition example of a noun : Represents a piece of code <samp>: represents a program, script output example <kbd>: represents the text to be input by the user <var>: represents the variables of the program <abbr>: represents abbreviated nouns (like WWW, HTML, URL, Mass., etc.) <acronym>: represents abbreviated names (like WAC, radar, etc.) <br>Let’s look at a few tags in depth, starting with <cite> <br>#p# <cite>’s design <br><cite> is an interesting element worth discussing, especially important when replacing the <i> tag that simply specifies the display effect. The purpose of <cite> is to refer to the source of the citation: to identify the author or publication. Historically For example, a designer might use <i> to italicize book titles, but earlier in this chapter we learned that CSS is the best tool for specifying display effects. <br>You may suggest using <em> to indicate the title of the publication, but when citing books or other publications, we do not intend to emphasize it, that is, display the book title in italics (also common in the printing industry Use underscores, but this can obviously be confused with links). <br>Then the <cite> tag was tailor-made for this job. Most browsers will even display the content in the <cite> tag in italics by default. And we can also add CSS rules to achieve the same purpose. Specification <br>W3C's <cite> tag specification is a bit brief. It is only briefly mentioned in the HTML 4.01 specification. <br><cite>: Contains other citations and reference source information. <br>This is almost what we can grasp, but we don’t know exactly what kind of information can be placed in <cite>, but from the perspective of "source", we can at least put the author and publication in it. <br>Let’s see how <cite> is used: <br>The novel, <cite>The Scarlet Letter</cite> is set in Puritan Boston and like this book, was written in Salem, Massachusetts. <br>After using the <cite> tag, the title The Scarlet Letter It is displayed in italics in most browsers. We will add the following very simple CSS rule so that the browser will display the correct effect even if there is no default. <br>cite {<br>font-style: italic;<br>} <br>To review, we replaced the <i> tags in the titles of books and other publications with <cite>. In most browsers, we can still get the italic display effect, and once again make the page content more structured. Semanticization. Of course, this structure can also be used with CSS, let’s take a look. Change the style of <cite> <br>As we discuss building page content with structure and semantics, we also make it easier to specify styles (and modify styles) with CSS. Take the <cite> tag as an example. If we use this permanently By tagging a publication, we have complete control over the actual style and can easily modify it whenever necessary. <br> Assume that the entire website is made using the <cite> tag to mark book references and publication titles. We add global CSS rules to italicize all <cite> elements, but within a few months After that, we want to display the book publication untitled not only in italics, but also in bold, red text with a gray background. <br> Of course, this can be done quickly with a few CSS rules, immediately changing the titles of all references previously marked with <cite>, which would not be possible if you use <i> or <em> . <br>cite {<br>font-style: italic;<br>font-weight: bold;<br>color: red;<br>background-color: #ddd;<br>} <br>Figure 6-2 is the display effect of most browsers, and this is another good example of writing structured markup first, so that you can easily modify the design style of the entire site later. <br> <br>Figure 6-2. Use the <cite> tag and use CSS style effects to unleash the potential of the structure <br>In addition to being easy to use styles, structured markup is also easy to process by server-side software, bringing interesting applications. <br>For example, usability advocate Mark pilgrim on his personal website "Dive into mark" uses a lot of <cite> tags. Since the <cite> tag is used to mark any publication cited in the blog, Mark can write a program that parses all articles to create a database and then based on the referenced citations Source classification (http://www.peintomark.com/archives/citations/) <br>Figure 6-3 below is the result of my own search. I can find two related articles in Mark's blog, which are all accomplished by marking "Dan Cederholm" with <cite>. </cite></cite></cite></cite></em></i></cite></cite></cite></cite></cite></cite></i></cite></cite></cite></cite></cite></cite></cite></em></i></cite></i></cite></cite></cite></acronym></abbr></var></kbd></samp>

Figure 6-3 "posts by" produced by Mark Pilgrim in "Dive into mark" citation" results (http://www.peintomark.org/archives/citations/dan_cederholm/)
#p# and
I would also like to propose two phrase elements, namely (abbreviated noun) and (abbreviated name). Using these tags can provide definitions for abbreviated nouns, allowing all users to understand the content and improve the web page ease of use.
Let us take a fresh look at the uses of and defined by W3C in the HTML4.01 specification: Represents abbreviated nouns (like WWW, HTTP, URL, Mass., etc.) Represents abbreviated nouns (like WAC, radar, etc.)
With the appropriate title attribute, these elements can help users who do not understand specific nouns. For example, when marking the abbreviation of "XHTML", we can use the tag like this:
XHTML
Using here will cause the screen reader to spell out the abbreviation (X-H-T-M-L) instead of pronouncing the full text. In contrast, using will cause it to spell out the full text instead. Abbreviation.
An example of using the tag is as follows:
NATO
We can also use two auditory CSS rules, again emphasizing these differences:
abbr {
speak:spell-out;
}

acronym {
speak:normal;
}
Auditory styles allow authors to specify a reading method specifically for screen readers. This can modify the auditory expression of the page, guide markup structure, change the tone, timbre, etc., so that the reading effect of the page is more consistent with the visual effect. Define once
Many people suggest defining only once the abbreviations and abbreviations that appear repeatedly in the page. They think that repeated definitions every time a noun appears is a waste of space, and it is best to only add the title attribute when it appears for the first time. I think This makes some sense, although when a user is directed to a specific paragraph on the page, they may not be able to benefit from the definition because they cannot see the abbreviation expanded at the top of the page.
Use your judgment when (and how often) you define nouns enclosed in and . Show effect
To visually attract readers, some browsers will by default add a 1-pixel dotted bottom border below and to entice users to move their mouse over abbreviated nouns. When the mouse moves over it, the browser will display the definition content provided by the title attribute in the form of a "tool tip".
For browsers that do not display dotted bottom borders by default, the same effect can be achieved by defining CSS.
abbr, acronym {
border-bottom: 1px dotted;
cursor: help;
}
We also added an additional rule to turn the cursor into "Help" (supported by most browsers) to help users see that this is not a link that can be clicked, but a definition displayed as a "Tooltip" Content(Mark Newhouse, "Real World Style: CSS Help").
Figure 6-4 is the display effect of the browser. "XHTML" is expanded into definition text and dotted bottom edge. The help cursor is:

Figure 6-4. General browser display It is worth mentioning that at the time of writing this book, the Windows version of the Internet Explorer does not yet support specifying styles for the tag and displaying tool tips. IE/Win supports the tag, which is to encourage some designers to only use to deal with abbreviated nouns and abbreviations.
It may be tempting to do this, but using the wrong elements to solve a real-world problem is not a good thing. For this particular problem, I prefer to represent the noun according to the specification and let the correctly supported browsers handle it#p# The <br><code> element is designed to display code examples within XHTML pages. For example, when you want to share a piece of CSS, you can write like this: <br><code><br>#content {<br>width: 80%;<br>padding: 20px;<br>background: blue;<br>}<br>
Generally speaking, visual browsers will display the content in the tag in a fixed-width serif font. Of course, we We can also add CSS rules to specify the display method we like. <br>code {<br>font-family: Courier, serif;<br>color: red;<br>} <br>In this way, the content of <code> will become a red Courier font. <samp> The <br><samp> element is used to identify sample output of programs and scripts. For example, if I want to discuss the Perl I am writing When the script outputs the result, I may mark it like this: <br><p>When the script has executed, at the command line you will see the message <samp>script was successful!</samp>.</p> <br>Here I surround the script output example with <samp>. At the same time, we can also use CSS rules to set a unique style for the program output example, just like we just did for <code>. <var> <br>Related to <samp>, <var> is used to mark variables and references in the program. For example, if we are discussing XSLT stylesheets, then I can write: <br><p>I'm going to pass the parameter <var>lastUpdated</var> to my main.xsl file.</p> <br>Many browsers will display the content of the <var> tag in italics, but you can write a simple rule to remove the default value if you don't like italics. We can use the CSS font-style attribute to change the display effect : <br>var {<br>font-style: normal;<br>font-family: Courier, serif;<br>color: purple;<br>} <br>Finally let’s look at the <kbd> element, which completes the phrase element. <kbd> The <br><kbd> element can be used to mark the text that the user wants to enter. For example, if I am explaining how to use the accesskey just specified to switch the cursor to the search box, I might write like this: <br><p>To quickly change focus to the search input field, Mac users type <kbd>Command 9</kbd>.</p> <br>You can probably guess what I’m going to say next. Yes, using simple CSS rules, you can style all <kbd> elements just like any other phrase element. Conclusion <br>Looking back at what we have seen in this chapter, we first discuss the reasons why <strong> and <em> are better than <b> and <i> with the same display effect, and also study how to simply design To set the bold or italic display effect, CSS is the correct method. <br> also discusses other phrase elements, starting with <cite> to mark people and publications, and demonstrates the benefits of structured markup syntax for display effects and data analysis. <br>It also demonstrates how to mark abbreviated nouns and abbreviations with appropriate components to improve the usability of web pages, while using additional CSS display and phonetic rules to strengthen the definition content. Finally, you can see the remaining phrase elements, each element They all have different preset styles for general text, but we can also quickly and easily design simple CSS rules for a single page or the entire website to specify the desired display style for these elements. <br>There are some labels that are quite unfamiliar to many people in this chapter. After standardization was launched in China, it was sadly misinterpreted as p css, I really don’t know how to describe it. I hope people who can see it can correctly understand the road signs on the road to standardization-semantic documents</cite></i></b></em></strong></kbd></kbd></kbd></kbd></var></var></samp></var>