-
Notifications
You must be signed in to change notification settings - Fork 434
Expand file tree
/
Copy pathH49.html
More file actions
111 lines (101 loc) · 6.71 KB
/
H49.html
File metadata and controls
111 lines (101 loc) · 6.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using semantic markup to mark emphasized or special text</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
</head>
<body>
<h1>Using semantic markup to mark emphasized or special text</h1>
<section class="meta">
<p class="id">ID: H49</p>
<p class="technology">Technology: html</p>
<p class="type">Type: Technique</p>
</section>
<section id="applicability">
<h2>When to Use</h2>
<p>HTML</p>
</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to demonstrate how semantic markup can be used to
mark emphasized or special text so that it can be programmatically determined. Using
semantic markup to mark emphasized or special text also provides structure to the
document. User agents can then make the structure perceivable to the user, for example
using a different visual presentation for different types of structures or by using a
different voice or pitch in an auditory presentation. </p>
<p>Most user agents will visually distinguish text that has been identified using semantic
markup. Some assistive technologies provide a mechanism for determining the
characteristics of content that has been created using proper semantic markup.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<p class="working-example">See <a href="../../working-examples/semantic-text/">rendered examples of semantic text</a>.</p>
<section class="example">
<h3>Using the <code class="language-html">em</code> and <code class="language-html">strong</code> elements
to emphasize text</h3>
<p>The <code class="language-html">em</code> and <code class="language-html">strong</code> elements are
designed to indicate structural emphasis that may be rendered in a variety of ways
(font style changes, speech inflection changes, etc.).</p>
<pre xml:space="preserve"> ... What she <em>really</em> meant to say was, &quot;This is not OK,
it is <strong>excellent</strong>&quot;! ...</pre>
</section>
<section class="example">
<h3>Using the <code class="language-html">blockquote</code> element to mark up long quotations from another source</h3>
<p>This example also demonstrates the use of the <code class="language-html">cite</code> element to specify a reference.</p>
<pre xml:space="preserve"><p>The following is an excerpt from the <cite>The Story Of My Life</cite>
by Helen Keller:</p>
<blockquote>
<p>Even in the days before my teacher came, I used to feel along the square stiff
boxwood hedges, and, guided by the sense of smell, would find the first violets
and lilies. There, too, after a fit of temper, I went to find comfort and to hide
my hot face in the cool leaves and grass.</p>
</blockquote></pre>
</section>
<section class="example">
<h3>Using the <code class="language-html">q</code> element to mark up a shorter quotation from another source</h3>
<p>Quotation marks aren't manually added to the quote because they are added by the user agent.</p>
<pre xml:space="preserve"><p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it,
we can never do anything good in the world</q>.</p></pre>
</section>
<section class="example">
<h3>Using the <code class="language-html">sup</code> and <code class="language-html">sub</code> elements to mark up superscripts and subscripts</h3>
<p>The <code class="language-html">sup</code> and <code class="language-html">sub</code> elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake.</p>
<pre xml:space="preserve"><p>Beth won 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2</sub>O.</p></pre>
</section>
<section class="example">
<h3>Using the <code class="language-html">code</code> element to mark up code</h3>
<p>This example shows use of the <code>code</code> element to provide visual emphasis for a CSS rule:</p>
<pre xml:space="preserve"><code>
#trial {
background-image: url(30daytrial.jpg);
background-position: left top;
background-repeat: no-repeat;
padding-top: 68px;
}
</code></pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li>Examine the content for information that is conveyed through variations in presentation of text.</li>
<li>Check that appropriate semantic markup (such as <code class="language-html">em</code>, <code class="language-html">strong</code>, <code class="language-html">cite</code>, <code class="language-html">blockquote</code>, <code class="language-html">sub</code>, and <code class="language-html">sup</code>) have been used to mark the text that conveys information through variations in text.</li>
</ol>
</section>
<section class="results">
<h3>Expected Results</h3>
<ul>
<li>Check #2 is true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../general/G115">G115</a></li>
</ul></section><section id="resources"><h2>Resources</h2>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2">HTML - Phrasing Content</a>.</li>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">HTML - <code class="language-html">blockquote</code> element</a>.</li>
<li><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element">HTML - <code class="language-html">code</code> element</a>.</li>
<li><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element">HTML - <code class="language-html">q</code> element</a>.</li>
<li><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-sub-and-sup-elements">HTML - <code class="language-html">sub</code> and <code class="language-html">sup</code> elements</a>.</li>
</ul>
</section></body></html>