Markup Language - Phrase Elements

Click here to return to the 123WORDPRESS.COM HTML Tutorial section.
Previous: Markup Language - Form Original source Chapter 6 , and other phrase elements In the introduction and previous chapters, the concept of semantic tags has been briefly mentioned. Tags are used to identify the meaning of files, rather than simply setting the display effect with tags. It is a good idea to design a web page that uses all semantic tags. However, I think this goal is too idealistic. Of course, not fully achieving the goal does not mean that the effort process is worthless. At least it is valuable to work towards this goal.
In real-world 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 standards 100%. Some CSS rules do not display the correct effect in some browsers, which unfortunately requires us to use additional tags in the process of achieving certain design goals.
An important concept to keep in mind is that there are real benefits to trying to write semantically structured content. At the same time, standards support, while not 100%, has passed the critical mass that allows us to write pages using web standards-compliant methods today. Sometimes sacrifices must be made, but the more standards-compliant markup you write, the easier your job will be in the future. Display vs. Structural Tags This chapter will discuss the differences between display and structural tags, and more specifically, the differences between using instead of , and instead of . Later in this chapter, we'll also discuss several other phrasing elements and their importance within the syntax of standards-compliant, structural markup.
You may have heard someone suggest that you should use instead of when you need bold text, but they didn't go into detail to tell you why you should do so. Without knowing the "why" , it's hard to expect other web designers to change their tag usage habits just because they've heard that they should do so. Why are and better than and ?
What are the benefits of removing and tags and replacing them with and ? In fact, all of this is to express semantics and structure , not just for display effects . All examples in this book also strive to follow this concept. See what 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 a text segment. Common phrase elements have the following meanings:
Representatives emphasized
 stands for stronger emphasis, so here we are discussing two different levels of emphasis. For example, a single word or phrase should be read louder, with a higher pitch, faster, or... well, more emphasized than normal text.
W3C goes on to state the following:
The display effect of phrase elements varies with different browsers. Generally speaking, visual browsers should display text content with in italics and text content with in bold. Speech synthesis software can change synthesis parameters according to the content, such as volume, pitch and speed.
Ahaha! That last sentence is particularly interesting. Speech synthesis software (formerly known as screen readers) will correctly handle words that must be emphasized, which is indeed a good thing.
In contrast, and are just display tags. If our goal is to separate structure from display, using and is the right choice. If we simply want to display bold or italic text, we can use CSS. We will discuss more examples later in this chapter.
Let's look at two examples of identification 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. Bold and beautiful This is a perfect example of where is more appropriate than . We want to make a certain piece of text within a sentence more important. In addition to bolding the order number, we also want screen readers to change the way they present this text: increase the volume, change the pitch or speed. Method B achieves both goals at once. What about ?
Similarly, using instead of can also convey importance, rather than simply italicizing the text. Let's take a look at these two examples: Method A
It took me not one, but three hours to shovel my driveway this morning. Method B
It took me not one, but three hours to shovel my driveway this morning. Emphasis In the previous example (which was true at the time this book was written), my goal was to make the word "three" appear emphasized, as if I were saying it aloud. Visually, Method B would appear in italics in most browsers, and screen readers would adjust the tone, speed, or volume appropriately. Just Bold or Italic It's important to note that in many cases, you only need to visually display bold or italic text. In other words, suppose you have a list of links in your sidebar, and you want all of the links to appear the same: bold (Figure 6-1).

Figure 6-1. Example of bold links in a sidebar. We don’t intend to emphasize the content of the links, other than their visual appeal. This is a good place to use CSS to change the appearance of the links so that they are not emphasized 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 purely for display purposes. font-weight is equivalent to bold. To achieve the display effect in Figure 6-1, let's assume that the link bar is placed in a <div> with an id of sidebar. In this way, we can use CSS to specify that the links within #sidebar should be displayed in bold:
#sidebar a{
font-weight:bold;
}
It's so simple that I feel a little ridiculous even mentioning it, but it's a great way to help separate structure from presentation. That's bold!
Similarly, you can apply similar thinking when thinking about italic text. When you don't want to emphasize the content, but simply want to italicize the text, you can again use the font-style property to handle this with CSS. Let's use the same #sidebar as an example. For example, if you want to make all the links in #sidebar italic, you can write it like this:
#sidebar a{
font-style:italic;
}
Another extremely simple concept, but in the realm of structured markup syntax, I feel it is important to discuss these situations - using CSS to handle CCTV instead of display effect tags. Sometimes the simplest solutions are also the most easily overlooked. When planning to use bold and italics at the same time to display text content, I think it is necessary to think about a question first, 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), and then mark the text with the selected tag.
For example, in the following example, I originally intended to make the word "fun" bold and italic at the same time, but I finally 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 several options. Oh, I really hope you agree with the above statement. A normal 
One way is to wrap "fun" with a normal and specify CSS rules to make all inside bold. The markup syntax looks like this:
Building sites with web standards can be fun!
The CSS would look like this:
em span
font-weight:bold;
}
The obvious semantic part is not as good because we are adding extra markup, but this method still works for everyone. Another way to emphasize with classes is to assign a class to the tag and add a bold effect with CSS. The markup syntax would look like this:
Building sites with web standards can be fun!
The CSS would look like this:
em.bold{
font-weight:bold;
}
Using will achieve an italic effect (and semantically emphasize the text content), and adding the bold class to it will make the text within appear in bold.
A similar method can also be used to modify . In this case, when we want to emphasize a certain paragraph, we can design italic class to add italic effect, and then match it with the original bold effect of .
The markup looks like this:
Building sites with web standards can be fun!
And the CSS is like this:
strong.italic{
font-style:italic;
}

Previous Page 1 2 3 4 5 Next Page Read More

<<: Javascript Basics: Detailed Explanation of Operators and Flow Control

>>: Detailed tutorial for installing the unzipped version of mysql5.7.28 winx64 on windows

Detailed explanation of unique constraints and NULL in MySQL

Recommend

Configure nginx to redirect to the system maintenance page

Last weekend, a brother project was preparing to ...

Detailed explanation of the relationship between the primary key being 0 and the primary key self-selection constraint in MySQL (details)

Preface This article mainly introduces the relati...

Markup Language - Phrase Elements

Detailed explanation of unique constraints and NULL in MySQL

MySQL 5.7.17 installation and configuration method graphic tutorial (Ubuntu 16.04)

JavaScript implements simple calculator function

Summary of problems encountered in the implementation of Vue plug-ins

Example code for using CSS cross-fade() to achieve a semi-transparent background image effect

Implementation of Docker deployment of MySQL cluster

A detailed introduction to the netstat command in Linux

MySQL uses aggregate functions to query a single table

MySQL installation and configuration method graphic tutorial (CentOS7)

Detailed explanation of how Tomcat implements asynchronous Servlet

Recommend

Configure nginx to redirect to the system maintenance page

Detailed explanation of the relationship between the primary key being 0 and the primary key self-selection constraint in MySQL (details)

Detailed explanation of samba folder sharing server configuration under centos

Perfect solution to the problem of MySQL shutting down immediately after startup (caused by ibdata1 file corruption)

Bootstrap 3.0 study notes grid system case

A detailed introduction to JavaScript execution mechanism

Common styles of CSS animation effects animation

Is it necessary to create a separate index for the MySQL partition field column?

Solve the problem that await does not work in forEach

Summary of JS tips for creating or filling arrays of arbitrary length

Detailed explanation of commonly used CSS styles (layout)

jQuery plugin to implement floating menu

Detailed installation tutorial of mysql-8.0.11-winx64.zip

A case study to thoroughly understand how to correctly use MySQL inndb joint index

Problems encountered when uploading images using axios in Vue