Tishk International University

Faculty of Engineering
Computer Engineering Department

Coding Standards, Block Elements, Text

Elements, and Character References

Musa M. Ameen
Web Programming I (CMPE 341)
2
Week 2
Fall 2024/25
Outline
✓ HTML Coding Conventions
✓ blockquote Element
✓ Whitespace Collapsing
✓ Phrasing Elements
✓ sub, sup, s, mark, and small Elements
✓ Character References

2
Objectives
✓ Understand HTML5 coding conventions and learn where they can be found.
✓ Define a block element.
✓ Understand blockquote elements.
✓ Know when whitespace collapsing occurs and how to combat it with the pre
element.
✓ Understand phrasing elements, like q, cite, dfn, abbr, and time.
✓ Learn CSS basics.
✓ Learn how and when to use character references.

3
Main Textbook Source
Web Programming with HTML5, CSS, and JavaScript, John Dean

✓ Chapter 2 Coding Standards, Block Elements,

Text Elements, and Character References

4
HTML Coding Conventions
Browsers are very lenient in terms of requiring web developers to write high-quality code.
So even if a web page’s code uses improper syntax or improper style, web browsers won’t
display an error message; instead, they’ll try to render the code in a reasonable manner.
If a web page uses improper syntax, different browsers might render the web page differently.
Those rules help programmers understand the code more easily, but the browsers don’t care
about such things.
Consequently, for all those people who create web pages on their own, there’s nothing to stop
them from using horrible style.
Companies/Organizations like their programmers to follow standard coding conventions so the
resulting programs are easier to maintain (program maintenance means debugging and
enhancing a program after it has been released initially).

5
HTML Coding Conventions
In this course, we attempt to use coding-style conventions that are as widely agreed upon as
possible. (https://google.github.io/styleguide/htmlcssguide.html) See Appendix A of the book.
Remember the following style rules:
➢ For every container element, include both a start tag and an end tag. So even though it’s
legal to omit a p element’s end tag, don’t do it.
➢ Use lowercase for all tag names (e.g., meta) and attributes (e.g., name).
➢ Use lowercase for attribute values unless there’s a reason for uppercase. For a meta author
element, use title case for the author’s name because that’s how people’s names are
normally spelled (e.g., name=“Zara Dara").
➢ For attribute-value assignments, surround the value with quotes, and omit spaces around
the equals sign.
➢ Everyone’s code needs to be understandable. One key to understanding is good
comments. Comments are words that humans read but the computer skips.
<!-- Comments in html -->
6
 blockquote Element
You should use a blockquote element when you have a quotation that is too long to embed
within surrounding text.
It’s a block element, so it
spans the width of its
container. More precisely, its
content spans the width of the
nonmargin part of its
enclosing container.

Besides providing
documentation, another
benefit of including the cite
attribute is that it can be used
as a “hook” for adding
functionality to the blockquote
element using JavaScript. 7
Whitespace Collapsing
Whitespace refers to characters that are invisible when displayed on the browser window. The most
common whitespace characters are the blank, newline, and tab characters. The web developer
generates those characteristics by pressing the spacebar, enter, and tab keys, respectively.
If your HTML code contains consecutive blank spaces, newlines, or tabs, the browser will display the
web page with only one whitespace character (usually a blank space).
You should use the pre element for text that needs to have its whitespace preserved. Formally, pre
stands for “preformatted text.”

8
Phrasing Elements
Phrasing elements are meant for text items that would be deemed acceptable within a typical
paragraph. For example, the strong element.
Two phrasing elements that are used to indicate editing changes—the ins element (for
insertions) and the del element (for deletions).
HTML is <del>boring.</del><ins>super exciting!</ins>

HTML is boring.super exciting!

The ins element is meant to indicate text that has been inserted. If you’re an editor and you’re
reviewing someone else’s written work, you’ll probably have suggestions for inserted text
every now and then. Browsers display an ins container’s text with underlining. However, it’s up
to each browser vendor to determine an element’s presentation when it’s rendered.

The del element is meant to indicate text that has been deleted. Typically, browsers display a
del element with strikethrough text.

9
q and cite Elements
q element: It’s for quoted text that is to be rendered within the flow of surrounding text.
When you display quoted text, if the text comes from a “work,” you should cite the work’s title
using the cite element.

10
dfn and abbr Elements
The dfn element is for a word or expression that is to be defined. Browsers display a dfn
element’s text with italics.
The abbr element is for an abbreviation or acronym.
That recognition enables
CSS and JavaScript to read
and/or manipulate the
date/time value if there is a
need to do so.

11
sub, sup, s, mark, and small Elements
The sup element is for a superscript. The sub element is for a subscript.
The s element indicates something that is no longer accurate or no longer relevant. Typically,
browsers display s elements with a line-through.
The mark element is for text that is marked or highlighted so it can be referred to from another
place.
The small element indicates something that would normally be considered “fine print.”

12
span Element
The span element (like the div block element) has no innate characteristics, either with regard
to content or with regard to presentation. Its presentation characteristics are given to it
explicitly by CSS.
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.
if you’d like to underline “Buzz Energy Drink”, surround “Buzz Energy Drink” with span tags
like this:
<span class="underlined">Buzz Energy Drink</span>
The class attribute’s value (underlined in this case) is the glue that connects an element to a
CSS rule. Here’s the CSS rule that gets connected to the preceding span element:
.underlined {text-decoration: underline;}
You can see .underlined, which causes the rule to be connected to the span element. And note
text-decoration: underline, which tells the browser to display the span element’s text with an
underline.
13
Character References
A character reference is code that you can use in your HTML to display a character that would
otherwise be difficult to display. Character references are sometimes called “character entities”
We use the term “character reference” because that’s the term that the W3C uses.

14
Character references When there’s No Choice and When there’s a Choice

The last four character references are &larr;, &centerdot;, &check;, and &copy;
They are used to display the symbols ←, •, ✓, and ©, respectively.
Those character references are just a small sample of character references where there is no
key on a standard keyboard for the character reference.
With no key, there’s no choice. If you want to display the character, you must use the character
reference.
On the other hand, if there’s a choice, you should use regular characters and not character
references.
For example, if you want to display an apostrophe for a possessive word, use the apostrophe
character (') and do not use &apos;.
Why? Because the apostrophe character is more readable.

15
Character References Example

16
References
✓ Dean, J. (2018). Web programming with HTML5, CSS, and JavaScript. Jones &
Bartlett Learning.
✓ Hickson, I. (2023, October). A vocabulary and associated APIs for HTML and
XHTML. https://www.w3.org/TR/2011/WD-html5-20110405/

17