1. Chapter 2 - Coding Standards, Block Elements, Phrasing Elements, and Character References1
HTML5 Coding Conventions
Comments
Describe Web Page Content Accurately and Fully
Content Model Categories
What Content is Allowed Within a Particular Element?
Block Elements
blockquote Element
Whitespace Collapsing
pre Element
Phrasing Elements
Editing Elements
q and cite Elements
dfn, abbr, and time Elements
1. In this chapter I demo these files:

2. Chapter 2 - Coding Standards, Block Elements, Phrasing Elements, and Character References
Code-Related Elements
br and wbr Elements
sup, sub, and s Elements
small and mark Elements
strong and em Elements
b, u, and i Elements
span Element
Character References
Example with Character References and Phrasing Elements

3. HTML5 Coding Conventions
There's a lot of poor-style HTML code in the world. Why?
Browsers are incredibly lenient, and they bend over backwards to try to display something reasonable, no matter how bad the code is.
Lots of non-programmers implement web pages for fun, and not as part of a business venture, and they don’t care about style.
Why is poor-style HTML code bad?
Poor-style code is harder to understand, and that makes code maintenance (making improvements and fixing bugs) harder.
Here are a few of the coding conventions that you should follow:
Container elements must be paired (start and end tags).
Use lowercase for all tag names (e.g., meta) and attributes (e.g., name), and use lowercase for attribute values unless there's a reason for uppercase (e.g., "John Dean").
For attribute-value assignments, surround the value with quotes and omit spaces around the equals sign.
1. For example, it's legal to omit a p element's end tag, but don't do it. 1

4. HTML5 Coding Conventions
Skim the HTML5 and CSS Coding Conventions document now, and read it in its entirety later on.
HTML Tidy tool: 1 2 3
1. There's no need to memorize the guidelines, but you should be familiar with them.
Prior to submitting each homework assignment, you should review the guidelines in order to make sure that your web pages use proper style.
2. I read the style guidelines document:
Read the "note for teachers” section at
That section was copied from an to me from Chris Mills, who works for the W3C.
I read up to and not including the "body container" section.
The rest of the style guidelines document provides style guidelines for stuff that we haven't covered yet.
I'll skim it fast just to give you an idea of what's there.
3. I go to the Tidy page.
We used Tidy at my former company.
I don't require that you use it for this class because I want you to learn the style without having to totally rely on the Tidy tool for clean up.
If you want to try using it, that's fine.
But be forewarned that it gives you style choices and you're still required to follow my style guidelines so you better make the right choices.

5. Comments
Most programmers agree that comments are more important in regular programs (e.g., Java and C++ programs) than they are in HTML pages. Why?
Documentation requirements for homework projects:
Include a meta author element.
Include a comment whenever background information is needed.
To make a comment, surround commented text with <!-- and --> markers.
Short comments should be written on one line. Insert a space after the <!-- and prior to the -->. For example:
<!-- The following video should be updated periodically. -->
Comments that require more than one line should use block-style formatting with indented text. For example:
<!--
After the user clicks one of the color buttons, the
following code will change its font color.
--> 1 2 3
1. Because regular programs are harder to understand and they need more documentation.
Usually, HTML code is fairly easy to understand, so there's no need for extensive documentation.
However, some documentation is appropriate….
2. You've seen the meta author element before so I won't repeat it here.
3. I'll show examples shortly.
4. This is an appropriate comment because without it, it would be harder to remember to update the video.
I'll show how to display a video in a later chapter.
5. Later on, I'll explain how to use JavaScript to update a paragraph's color as described here. 4 5

6. Describe Web Page Content Accurately and Fully
Overarching Goal
Use appropriate HTML elements so your web page's content is described accurately and fully.
Examples:
Create a title for your web page, and surround the title text with a title element.
If you have text that forms what would normally be considered a paragraph, then surround the text with a p element.

7. Describe Web Page Content Accurately and Fully
According to the HTML5 standard, it's legal for your body container to use all plain text with no containers (like p elements) that surround the text.
(Above, "plain text" means text that is not part of a tag. In other words, plain text is not a tag type, a tag attribute, or a tag attribute’s value.)
Even though it's legal to use plain text within the body container, why is that inappropriate? Why is it good to describe web page content accurately and fully with elements?
So programmers can understand and maintain the web page code more easily.
So CSS and JavaScript can manipulate the web page more effectively. 1
[1. By the way, you'll see on the W3C site that the HTML5 standard refers to plain text as just "text.“]
2. For example, if you use p elements for all your paragraphs (instead of just plain text with br line breaks), you can use CSS to make all your paragraphs indent their first lines.
As another example, if you use h# elements for all your headings, you can use JavaScript to make each heading larger when the mouse hovers over it. 2

8. Content Model Categories
There are lots of different HTML elements, and the W3C attempts to make them easier to remember by grouping them into these content model categories (diagram copied from 1 2
1. I go to the site.
I mouse over the different categories and note how each category's elements pop up.
I'll explain the categories on the next slide, and I'll explain the more important elements throughout this chapter and the next several chapters.
2. Note how the categories overlap:
All of the elements in the interactive, phrasing, embedded, heading, and sectioning categories are also in the overarching flow category.
Some of the elements in the interactive category are also in the phrasing category.

9. Content Model Categories
Now for a description of each content model category shown on the previous slide….
metadata content -
All the elements that are allowed in a web page head container.
Examples:
meta, script, style, title
flow content -
Plain text and all the elements that are allowed in a web page body container.
blockquote, div, p, pre, script, sup 1
1. There are a few others, but these are the most important ones.
We've already covered meta and title, and briefly touched on style.
script is for JavaScript, and style is for CSS, and we’ll use them a lot in later chapters.
2. Flow content includes all of the HTML5 elements except for meta, title, and a few others that are designed specifically for a web page's head container.
3. We've already covered div and p - they are flow content elements, and they are not in any other content model categories (I go back to the Venn diagram and show the non-overlapping flow content area).
We'll cover blockquote and pre later in this chapter - they are flow content elements, and they are not in any other content model categories.
The script element is for JavaScript.
It's in the flow content category as well as the metadata content category (I go back to the Venn diagram and show the overlapping flow content and metadata content areas).
You normally use script in the head, but it's legal to use it in the body.
The sup element is for superscripting.
It's in the flow content category as well as the phrasing content category (I go back to the Venn diagram and show that all of the phrasing content elements are also in the flow content category).
4. Let's examine the phrasing content category on the next slide…. 2 3 4

10. Content Model Categories
phrasing content -
Plain text and all the elements that would be deemed acceptable within a typical paragraph. Normally used for a relatively small amount of text within a larger group of text (e.g. a phrase within a paragraph).
Examples:
abbr, b, br, cite, code, del, dfn, em, i, ins, kbd, mark, q, s, samp, small, span, strong, sub, sup, time, u, var, wbr
embedded content -
Elements that import from another resource into the current web page.
audio, canvas, iframe, img, video 1 2
1. I think the term "phrasing" comes from "phrase," which is a part of a paragraph.
2. These example phrasing elements are the ones I'll present in this chapter.
There are lots more phrasing elements, some we'll introduce in later chapters and some we'll skip.
3. Typically, the imported resource will be an image file, an audio file, or a video file.
We'll discuss embedded content elements in later chapters. 3

11. Content Model Categories
interactive content -
Elements that are intended for user interaction.
Examples:
a, button, input, select, textarea
heading content -
Elements that define a header for a group of related content.
All of the heading content elements:
h1, h2, h3, h4, h5, h6
sectioning content -
Elements that define a group of related content.
All of the sectioning content elements:
article, aside, nav, section 1 2
1. The a element is for a link.
The other elements are for controls within a form - buttons, text boxes, etc.
We'll discuss these elements in later chapters.
2. We discussed the heading elements in Chapter 1.
[The HTML5 spec states that a heading element should be a header for a sectioning element, but there's nothing in the content model or the HTML checker that enforces this.]
3. We'll discuss sectioning elements in a later chapter.
[Briefly:
Article is for a self-contained composition.
Aside is for content that's not part of the web page's main flow.
Nav is for a group of links.
Section is for a group of related content, such that it would be appropriate to list the section within the web page's content outline.]
[The HTML5 spec states that a sectioning element should be a container for a heading element or a footer element, but there's nothing in the content model or the HTML checker that enforces this.] 3

12. What Content is Allowed Within a Particular Container?
The previous content model categories diagram is good for figuring out what elements are allowed inside a particular container. For example, suppose you’re writing the code for a head container.
To determine which elements are allowed inside the head container, go to There, scroll through the table of contents to the head element entry, and click on its link. That should take you to a description of the head element. Read the “content model” section, which says this:
One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element.

13. What Content is Allowed Within a Particular Container?
For each of the following elements, what is the element allowed to contain?
body, div, h1, hr
If the content model value is “nothing,” that means that the current element is a void element.
The HTML validation service generates errors if HTML5 content model specifications are violated. 1 2
1. I load the HTML5 standard page (using the last slide's URL).
For each element, I click on the element's link, and read the element's content model section.
body and div can contain flow elements.
h1 can contain phrasing elements
hr is empty.
2. Remember void elements?
They are not containers - they have only one tag.
3. For example, if a head element contains plain text inside it, the HTML validation service generates an error.
Why? Because only metadata elements are allowed inside a head element, and plain text is not a metadata element.
If a p element has another p element inside it, the HTML validation service generates an error.
Why? Because only phrasing elements are allowed inside a p element, and the p element is not a phrasing element. 3

14. Block Elements 1
The term "block element" is not part of the HTML5 standard, but we’ll use it because it makes certain explanations easier.
A block element expands to fill the width of its surrounding container, so for a given row, there will be only one block element. Most of the time, a block element's surrounding container is the body element, which spans the width of the browser window. In that case, the block element spans the width of the entire browser window.
That's different from a phrasing element in that (1) a phrasing element's width matches the width of the element's contents, and (2) multiple phrasing elements can display in one row.
If you're curious how block elements fit into the content model categories…
Block elements correspond to all the elements in the flow category that are not in the phrasing category. 2
1. Now for another category of elements….
2. Later, we'll have examples of block elements inside containers other than the body container, but don't worry about that for now.
3. Remember flow and phrasing elements?
Flow elements are all the elements that are allowed in a web page body.
Phrasing elements are all the elements that would be deemed acceptable within a typical paragraph.
I go back to the content model category diagram and show how block elements fit in.
[Block elements and the mapping of block elements "to all the elements in the flow category that are not in the phrasing category" are not part of the W3C specification.
But they help when you're trying to describe the elements and differentiate between them.] 3

15. blockquote Element 1
Use the blockquote element to surround a lengthy quotation.
The blockquote element is a block element, and, as such, its content spans the width of the non-margin area of its enclosing container.
Example blockquote element:
<blockquote
cite="
Democracy cannot succeed unless those who express their
choice are prepared to choose wisely. The real safeguard
of democracy, therefore, is education.
</blockquote>
<div><strong>Franklin D. Roosevelt</strong>, 1938</div> 2 3
cite attribute
1. We’ve already talked about the div and p elements, which are block elements.
Now let’s discuss a few more block elements.
2. I compare the code fragment to the browser window.
3. I'll describe the cite attribute later - for now, let's focus on the blockquote.
4. Note the margins on the 4 sides of the quote.
Browsers are not required to display blockquote text with those margins, but it's common to do so.
As an alternative, a browser might render blockquote text with italics.
5. I'll explain the margin values on the next slide… 4
1em margin
40px margin 5

16. blockquote Element
For each element, the W3C's HTML5 standard provides a "typical default display properties" section that describes the typical format used by the major browsers in displaying the element.
Browsers are not forced to follow those guidelines, but they usually do, so you should pay attention to the guidelines.
For example, here are the typical default display properties for the blockquote element:
blockquote {
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 40px;
margin-end: 40px; }
"block" is not part of the HTML5 standard, but it is part of the W3C's CSS standard. 1 2
1. The code's format should look familiar. What is it?
CSS!
It's common for browsers to apply these 5 CSS rules to blockquote elements by default.
2. I read the first callout.
The 1st CSS rule says to use a block value for the display property.
That means that the element the rule applies to, blockquote in this case, willl span the width of its container.
So the display: block property-value pair matches the block element’s width-spanning characteristic described earlier.
3. I read the 2nd callout.
We'll discuss the CSS em unit in more depth in the next chapter, but for now, just know that a margin value of 1em means the margin will be the height of 1 line of text.
“em” stands for the letter M.
So one em unit is approximately the height of a capital M.
See the top and bottom margins on the previous slide.
4. I read the 3rd callout.
We'll discuss pixels in the next chapter, but for now, just know that 1 px unit is the size of an individually projected dot on a typical computer monitor.
See what 40 pixels looks like by examining the left and right margins on the previous slide. 3
Top and bottom margins equal the height of a standard line of text. 4
Left and right margins equal 40 pixels each.

17. blockquote Element Example blockquote element (revisited):
cite attribute
Example blockquote element (revisited):
<blockquote
cite="
Democracy cannot succeed unless those who express their
choice are prepared to choose wisely. The real safeguard
of democracy, therefore, is education.
</blockquote>
<div><strong>Franklin D. Roosevelt</strong>, 1938</div>
The blockquote element's optional cite attribute:
It's for holding a URL value (not an author, not a book title).
It's for documentation purposes (browsers do not render it). 1 1
1. Note the cite attribute and then read the cite attribute bullets.
[2. If you think the user might be interested in visiting the web page where the quote came from, you should implement a link, and not use the cite attribute. We'll describe how to implement a link, using <a> and </a> tags, in Chapter 4.] 2

18. blockquote Element Style requirement:
If blockquote element's enclosed text is greater than one line, then use "block formatting," which means putting the start and end tags on their own lines and indenting the enclosed text.
Use block formatting for all block elements (e.g., div, p, blockquote) with content longer than one line.
Exception:
The pre element, introduced next, is a block element, and block formatting may or may not be appropriate. Before elaborating, we need to explain whitespace collapsing …. 1
1. See how that's done on the previous slide.

19. Whitespace Collapsing1
Normally, browsers collapse whitespace (blanks, newlines, tabs). In other words, if your HTML code contains consecutive blank spaces, line breaks, or tabs, the browser will display those consecutive characters with only one whitespace character (usually a blank space).
For example, the browser window two slides later shows how the following HTML code's whitespace gets collapsed.
<h2>Explore the World - a Haiku</h2>
Life is a journey.
Cross the rivers, climb the peaks.
But first check for texts.
1. I will present another block element, the pre element, on the next slide, but that will make sense only if I first describe whitespace collapsing.
2. This slide's code is rendered in the top half of the browser window shown 2 slides away.
On that slide, note how each group of newline and blank space characters collapses into a single space.
So why does the browser window show a blank line below the first line?
That's from the h2 element, which displays a blank line above and below its text.
3. The whitespace collapsing can be helpful in some circumstances, but not for situations like this, where line breaks and indentations need to be preserved.
In the browser window’s bottom half, note how line breaks and indentations are preserved.
Let's now describe how that was done…. 2 3

20. pre Element 1
Use the pre element for text that needs to have its whitespace preserved.
pre officially stands for "pre-formatted text," but I prefer to pretend that it stands for "preserved whitespace" because that makes more sense.
What does the following code display?
<pre>
Life is a journey.
Cross the rivers, climb the peaks.
But first check for texts.
</pre>
pre container 2
1. Whitespace collapsing is annoying when you need the whitespace to be preserved.
2. I ask the students to describe what’s displayed, and then I examine the bottom-half of the browser window in the next slide
[3. My testing shows that if there's a newline character immediately following the pre element start tag or immediately preceding the pre end tag, it gets stripped out.
But I couldn't find that behavior documented, so don't count on it.] 3

21. pre Element Typically, browsers use monospace font for pre content.
1. Read the callout and note the monospace font.
2. You’ll learn how to adjust fonts using CSS in the next chapter. 1
Monospace font works great for displaying programming code (as you’ll see later), but for haikus, monospace is rather ugly.
To avoid the monospace font, use CSS. 2

22. Phrasing Elements 1
Phrasing elements are meant for text items that would be deemed acceptable within a typical paragraph.
The strong element, introduced in Chapter 1, is a phrasing element because it would be reasonable to use it within a paragraph.
In the haiku web page, even though there is no p container, surrounding "check for texts" with a strong phrasing element would be appropriate (since emphasis within a paragraph is a reasonable need).
The remainder of this chapter focuses on phrasing elements. There are quite a few. We'll present about half of them in this chapter, and we'll present some of the other ones in later chapters.
1. I go back to the Venn diagram slide and show the phrasing content category.
2. I go back to the haiku source code and show where the strong tags would go.
[3. In this chapter, we present 28 out of the 53 total phrasing elements.] 2 3

23. Editing Elements
These next 2 elements (ins and del) handle editing changes.
ins element:
Indicates inserted text.
Typical browser display – underlined (as indicated by the HTML5 standard's "typical default display properties.")
However, it's up to each browser vendor to determine an element's presentation when it’s rendered. Presentation refers to the appearance and format of the displayed element. You can assume that browsers will display the text with an appropriate appearance, but that appearance might be different for different browsers. 1 2
1. I go to the content model categories diagram page, mouse over the phrasing category, and verify that ins is in the phrasing category.
2. The ins element mimics Microsoft Word's track changes feature:
When you insert text into someone else's document, the inserted text is underlined, so it alerts the reader about the suggested change.

24. Editing Elements del element:
Indicates deleted text.
Typical browser display – strikethrough
For a quick demonstration of how an element works, go to the W3Schools' HTML5 tag reference page at click the relevant tag, and then click the "Try it yourself" link.
1. Google "w3schools", find their references page, click on HTML Tags, click on del, and use the “try it” tool for the ins and del element.
This is a great tool.
You should bookmark it. 1

25. q and cite Elements q element: Example:
A quote that is to be rendered within the flow of surrounding text.
Typical browser display – insert surrounding quotes
Example:
<p>
In 1937, President Franklin Roosevelt stated
<q>The test of our progress is not whether we add more
to the abundance of those who have much it is whether
we provide enough for those who have little.</q>
<cite>Inaugural Addresses of the Presidents of the
United States: from George Washington to Donald Trump</cite>
</p>
q element
1. Go to W3Schools and use the “try it” tool for the q element.
I copy and paste this p element into the try it form.
I then insert nested q tags and note how the browser will use double quote marks for the outer quote and single quote marks for the inner quote.
I can't find this feature documented by the W3C, so I omitted it from the book.
cite element 1

26. q and cite Elements
When you display quoted text, if the text comes from a “work,” you should cite the work’s title using the cite element.
The W3C states that a work is a "book, paper, essay, poem, score, song, script, film, TV show, game, sculpture, painting, theater production, play, opera, musical, exhibition, legal case report, or other such work.”
Typically, browsers display a cite container’s text with italics.
What is the difference between the cite element and the cite attribute?
The cite element is for a cited work, like a book title, whereas the cite attribute is strictly for a URL value.
Browsers display the content in a cite element, whereas browsers do not display the content in a cite attribute. 1
1. Previously, we talked about the cite attribute as part of the blockquote element….
[2. It’s common for a cite element to follow a q element, which is what the previous slide shows.
As an alternative, you can have a cite element follow a blockquote element.
As another alternative, you can have a cite element appear within a blockquote element, after the blockquote element’s text.] 2

27. dfn Element
These next 3 elements aren't used all that often, but they are helpful if you want to manipulate definitions, abbreviations, dates, and times with CSS or JavaScript.
dfn element:
Stands for "defining instance."
Indicates a word or expression that is to be defined.
Typical browser display – italic
Example dfn element:
<p>
A <dfn>tooltip</dfn> is a pop-up box that provides information
about the item that the mouse is hovering over.
</p>
Note how the dfn tags surround the term, not the description.

28. abbr Element abbr element: Example abbr element:
Indicates an abbreviation or acronym.
Example abbr element:
<p>
This year's
<abbr title="World Wide Web Consortium">W3C</abbr>
barbeque fundraiser is scheduled for
<time datetime="12:00">noon</time> on
<time datetime=" ">Friday, September 28</time>.
Grillmaster Tim Berners-Lee will be flipping burgers.
</p>
The abbr element's title attribute:
It provides the expanded text that the abbreviation represents.
Typical browser display – show the title value as a tooltip.
abbr element
time elements
1. Go to W3Schools and use the “try it” tool for the abbr element and note the tooltip functionality.
2. We'll discuss the time element shortly, but first…. 1 2

29. abbr Element
Provide code that (1) displays the definition for an IP address, and (2) provides a tooltip for what IP stands for. For "IP address," use the definition "the location of a computer device on a computer network." 1
1. First, write the code for IP and its tooltip.
Use an abbr element:
<abbr title="Internet protocol">IP</abbr>
Then surround the abbr element with a dfn container:
An <dfn><abbr title="Internet protocol">IP</abbr> address</dfn>
is the location of a computer device on a computer network.

30. time Element time element: The time element's datetime attribute:
Indicates a date or time.
Typical browser display – default, same as surrounding text.
The time element's datetime attribute:
It provides a date and/or a time value in a format that JavaScript can understand (so you can manipulate the date/time value if there is a need to do so).
The most common date format is yyyy-mm-dd
The most common time format is hh:mm
See the examples two slides ago, plus these examples:
<time datetime=" ">Tuesday, October 1</time>
<time datetime="04:00">4 am</time>
Browsers do not display the datetime attribute’s value, so normally you should include a date or time value between the start and end tags, as shown above.
1. Note how the examples follow the formats shown above - 4 digits for the year, and 2 digits each for month, day, hour, and minutes.
If you provide values with fewer digits than 4, 2, 2, 2, and 2, you can't be sure that the browser engine will interpret the values correctly.
[2. Date and time values are not mutually exclusive.
You can specify a date and time with one datetime attribute by separating the date and time values with a T.
For example: T15:35] 1 2

31. time Element
To see all the date and time formats allowed for the time element's datetime attribute, go to the HTML5 standard's time element page ( and read about the valid datetime values.
Unfortunately, that web page is rather complicated, so feel free to just rely on the yyyy-mm-dd and hh:mm formats shown earlier.
It's legal to omit the datetime attribute, but if you do so, the time element’s enclosed content must use one of the formats prescribed in the HTML5 standard. For example:
<time> </time>
<time>08:00</time>

32. Code-Related Elements
code element
Indicates programming code.
Typical browser display – monospace
kbd element
Indicates input for a program.
samp element
Indicates output from a program.
var element
Indicates a programming variable or a mathematical variable.
Typical browser display – italic 1 2
1. Why is monospace good for source code displays?
It mimics what the code looks like within an IDE.
Monospce is required to preserve alignment.
2. Be patient: On the next slide, I'll show an example that uses all four of these elements.
3. So the var element isn't just for programming; it's also for math. 3

33. Code-Related Elements
Example with code-related elements:
<body>
<p>
Given the following Java code fragment. If the user enters
<kbd>1992</kbd>, then <var>benefitsYear</var> will be 2054,
and the output will be <samp>The earliest you can receive
social security benefits is 2054</samp>.
</p>
<pre><code>System.out.print("Enter your birth year: ");
benefitsYear = stdIn.nextInt() + 62;
System.out.println("The earliest you can receive" +
" social security benefits is " + benefitsYear);</code></pre>
</body> 1
kbd
var
samp
pre
code 2
1. I ask the students to describe the display.
I go to W3Schools and use the “try it” tool for the code element and enter this slide's example.
Note the code fragment's left alignment.
Note the monospace and italic fonts.
2. Why is the pre container good for source code displays?
It preserves whitespace.
Line breaks and indentations are essential for program readability.
[3. As a more elegant alternative to pre, you can use the following CSS rule:
code {white-space: pre;} ] 3

34. br and wbr Elements
As you know, the br element is a void element that renders a line break.
The wbr (word break) element is similar to the br element in that it's a void element. But whereas the browser treats br as a required break between words, the browser treats wbr as a suggested break within a word if the word bumps into the right side of its containing box.
Example:
<p>
In the late 19^th century, to counter the
effort to disestablish the Church of England, the
anti<wbr>disestablishment<wbr>arianism movement
arose.
</p> 1
1. So far, the only "containing box" has been the browser window's main box.
Later, you'll see how we can create smaller containing boxes within the browser window's main box.
2. I go to W3Schools and use the “try it” tool for the wbr element and enter this slide's example.
wbr elements 2

35. sup, sub, and s Elements sup element: sub element: s element:
Indicates a superscript.
Typical browser display – smaller font, slightly raised
sub element:
Indicates a subscript.
Typical browser display – smaller font, slightly lowered
s element:
Indicates contents that are no longer accurate or no longer relevant. With old versions of HTML, s was used to show stricken text for editing purposes, but the W3C now says s is not for editing.
Typical browser display – line-through
1. Remember the phrasing element that indicates a deletion for editing purposes?
The del element. 1

36. small and mark Elements
The next two elements are more presentation oriented (rather than content oriented), so you should use them less frequently. However, the W3C describes the elements in a manner that emphasizes their content as much as possible. In so doing, the W3C considers them to be acceptable.
small element:
Indicates fine print. Often used for legal disclaimers.
Typical browser display – smaller font than the default
mark element:
Indicates text that is marked or highlighted so it can be referred to from another place. For example:
<p>Homonymic advertising slogan for Mountain Dew:</p>
<p><mark>Do</mark> the <mark>Dew</mark>!</p>
Typical browser display – yellow
1. Go to W3Schools and use the “try it” tool for the mark element. 1

37. strong and em Elements
The W3C makes it clear that elements should be used according to what they represent and not according to their appearance. In the old days (and even today), web developers violated that credo a lot. That is especially true for the next 5 elements.
strong element:
Indicates strong importance.
Typical browser display - bold
em element:
Indicates emphasis.
Typical browser display - italics

38. b , u, and i Elements
Historically, the b, u, and i elements have been used for presentation exclusively, which is bad.
Consequently, the W3C appears to dislike those elements. So why are they still part of the HTML5 standard?
On the subsequent slides, you'll see that the W3C describes the 3 elements in a manner that emphasizes their content as much as possible, but the descriptions are rather contrived.
I recommend that you do not use these elements unless your content matches the descriptions' examples. 1
1. They have been used so much in the past, that the W3C feels compelled to continue to support them.
They are afraid that if they omit them from the standard, (1) browsers will still support them, thus undermining the W3C's credibility, or (2) browsers will no longer support the omitted elements, thus angering web developers and end users when their legacy code breaks.
Legacy code is code created in the past that uses commands supported by an older standard and not the current standard.

39. b Element b element: From the W3C:
The b element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is bold text; for example, keywords in a document abstract, or product names in a review.
The above definition is so narrow that it will be hard for you to find proper uses for the b element (other than the two specific examples of abstract keywords and review product names).
Try to avoid using the b element. Instead, try to use other elements or use CSS.

40. u Element u element: From the W3C:
The u element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is underlining; for example, a span of text in Chinese that is a proper name (a Chinese proper name mark), or span of text that is known to be misspelled.
Same as for the b element, try to avoid using the u element. Instead, try to use other elements or use CSS. 1
1. As with the b element, the W3C appears to have fudged their HTML5 definition for u to make it look like it doesn’t stand for an appearance characteristic - underlining.

41. i Element i element: From the W3C:
The i element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text; for example, a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name.
Same as for the b and u elements, try to avoid using the i element. Instead, try to use other elements or use CSS.

42. span Element 1
The span element doesn't have any special meaning when it's used by itself.
So what is its purpose?
As a generic element, it serves as a "blank slate" for applying CSS formatting features.
If you want to apply formatting to some text, and the text doesn't coincide with one of the other container elements, then put the text in a span element, and apply CSS to the span element.
Example:
Leave right <span class="underlined">now</span>!
Associated CSS rule:
.underlined {text-decoration: underline;}
1. The span element is the last phrasing element we'll cover in this chapter.
We'll use span a lot in the next chapter.
For now, here's a brief overview….
2. I'll show lots of examples with span and CSS in the next chapter.
To give you a sense of what that will be like, think about the u element presented earlier.
As you know, the u element is frowned upon.
For underlining, you should normally avoid using the u element, and, instead, surround the text that is to be underlined with span tags, and then apply a CSS underline rule to the span element.
3. If the above example was confusing, don’t worry.
It’ll make more sense when we dig into CSS details in the next chapter. 2 3

43. Character References 1
A character reference is code that you can use in your HTML to display a character that would otherwise be difficult to display.
Here are some example character references:
Syntax:
&name; 2
character
character reference
description 
&check;
check mark 
≤
less than or equal
<
less than
>
greater than
&
&
ampersand
space
non-breaking space 4
1. Character references are not elements, so they don't quite fit with the rest of the chapter.
But there's no better chapter for them, and introducing them now is good so you can use them early on.
[2. Character references are sometimes called “character entities.”
We use the term “character reference” because that's the term that the W3C uses.]
3. Note the odd-looking syntax for character references.
4. There are no keys on the keyboard for the and  symbols, so use character references.
5. I follow the W3C link and peruse the character references.
Note that character references are case sensitive.
Note that ω displays ω and Ω displays Ω.
[6. You can find another version of the character reference table by clicking the "Character references" link on the HTML5 standard, but that table's glyphs are small and thus harder to identify.
As explained on the W3C character reference page:
There are 2 kinds of character references: named character references (shown above) and numeric character references.
Don't use the numeric character references because they're more cryptic than the named character reference values.] 3
Replace name with a value shown above in the character reference column or a value found at 5 6

44. Character References
In the interest of readability, if there's a choice, use regular characters and not character references.
Here's when it's appropriate to use a character reference:
Use a character reference to display a character that's not on the keyboard.
Use a character reference to display a character that would normally have a special meaning in HTML:
<, >, &
Use the   character reference if you need to:
Display a blank space without allowing a line break (to ensure that a group of words will be displayed on the same line).
Display multiple blank spaces without allowing whitespace collapsing. 1
[1. There are 2 additional characters that can have a special meaning in HTML - " and '.
They have character references of " and &apos;.
But you should normally use the regular characters " and ', and avoid using " and &apos;.
When do you need a character reference to display a double quote?
If you want an attribute value to include a quote character. For example:
Originally, <abbr title=""Music" Television">MTV</abbr> actually played music.
If you used a regular double quote inside the attribute value string, the browser would treat it as the end of the string.
You can use single quotes for attribute values, and if you do so, then use &apos; if you want the attribute value to include a single quote character.
As you'll learn later, if you need to display a quote character from within a JavaScript string, you should use\" or \', not " or &apos;.]

45. Example with Character References and Phrasing Elements1
1. Can you identify the characters that should have been (and are) implemented with character references?
I coax the students to identify pi, the multiplication dots, &, >, 1/3, and <.
To get the character reference codes, I search through the W3C's character reference page, mentioned on the slide 2 before this one.
I show the relevant code on the next slide.
2. What about the single and double quotes?
No need for character references for them.
3. Do you see any places where non-breaking spaces would be appropriate?
a) To avoid a line break within radius = z and within height = a, use non-breaking spaces around the equal signs.
Without the non-breaking spaces, the browser would have split height = a.
b) There are 2 spaces surrounding the late night special text.
4. Do you see where phrasing elements are used?
I show the var, sup, and strong tags on the next slide…. 2 3 4

46. Example with Character References and Phrasing Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="John Dean">
<title>Carmine's Pizzeria</title>
</head>
<body>
<h1>Carmine's Pizzeria</h1>
<p>
Each of our pizzas has a volume of
π&centerdot;<var>radius</var>²&centerdot;<var>height</var>.
If <var>radius</var> = <var>z</var> &
<var>height</var> = <var>a</var>, that means the volume spells
"Pi&centerdot;z&centerdot;z&centerdot;a"!
</p>
==>  <strong>Late night special:</strong> slice of cheese
&frac13; off  <==
</body>
</html>
Character references are in red.
Phrasing elements are in green.

47. Chapter 2 - Quiz Questions
if your HTML code contains consecutive blank spaces, newlines, or tabs, the browser will display the web page with only one space character. What is that phenomenon called?
space conflation
space character transgression
whitespace collapsing
As described in the book, which of the following is a character reference?
" "
≤
"Maddie gets along well with others, and she's very punctual."
#1: c
#2: b