Introduction to Website Design And Development HTML5, CSS3, and JavaScript 4th Edition By Jennifer Robbins – Test Bank

Complete Test Bank With Answers

Sample Questions Posted Below

Chapter 4

HTML Tags and Attributes
Contents
4.1
4.2

Markup: Presentational, Structural, Semantic
Tags . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.1 Most Tags Come in Pairs . . . . . . . . . . . .
4.2.2 Some Tags Stand Alone (Void) . . . . . . . . .
4.2.3 Starting and Ending a Tag . . . . . . . . . . .
4.2.4 Nesting and Overlapping Markup . . . . . . . .
4.3 Tag Attributes . . . . . . . . . . . . . . . . . . .
4.3.1 Blank Attribute Values . . . . . . . . . . . . .
4.3.2 Spacing . . . . . . . . . . . . . . . . . . . . . .
4.3.3 Quote Marks . . . . . . . . . . . . . . . . . . .
4.4 Global Attributes . . . . . . . . . . . . . . . . .
4.4.1 style= . . . . . . . . . . . . . . . . . . . . . . .
4.4.2 id= . . . . . . . . . . . . . . . . . . . . . . . .
4.4.3 class= . . . . . . . . . . . . . . . . . . . . . . .
4.4.4 title= . . . . . . . . . . . . . . . . . . . . . . .
4.4.5 hidden= (Advanced) . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

36
37
38
39
39
40
41
41
41
42
45
46
46
47
47
47

In this chapter we will provide more information about HTML markup.

4.1

Markup: Presentational, Structural, Semantic

Content is more than meets the eye. It is the meaning.
36

CHAPTER 4. HTML TAGS AND ATTRIBUTES

37

Presentational Markup (style) is worried only about what meets the
eye. It tells how you want certain things to be shown, how they look.
It includes tags for line break, bold, italic, strike-through, underscore. It
includes explicit coloring and sizing.
When you are first starting out with web design, the obvious first thing to
do is work on presentation. It is what people see.
Do you like the ability to copy and paste words from a PDF file into some
other document you are working on? If the PDF is simply a scan, you
cannot copy and paste the words, just portions of the image. But if the
PDF file came from a program, or if the scanner is smart enough, maybe
the words can be selected and copied. The fact that they are words and not
just smears of ink on a page, that fact goes beyond the presentation and
into the semantics (meaning).
Structural Markup identifies the structure of your document. It includes
tags for things like headings, paragraph, lists, and tables. It goes a step
beyond presentation to begin revealing the meaning of the document. It
shows the relationships between the parts of your webpage.
Structural markup is focused on the relationships between pieces of a webpage. Often this is incorrectly called “semantic,” but they are actually
different.
Semantic Markup (meaning) is a richer approach to telling what things
are. Often this is reflected in how they are displayed. It includes tags for
emphasis, title, header, footer, and navigation.
The long-term goal of structural and semantic markup is to help search
engines and other programs understand your contents, so they can help
everyday users like ourselves search for information and find it.

4.2

Tags

All HTML markup looks the same as this:
<tag att=val att=val att=val …>
This is the HTML markup prototype. There is an opening angle bracket
(less than sign), followed by the tag, followed by zero or more attributes.
Then there is the closing angle bracket (greater than sign). Each attribute

CHAPTER 4. HTML TAGS AND ATTRIBUTES

38

must have a space in front of it.
Exam Question 53 (p.339): Give the prototype (pattern) for HTML
markup in general.
Acceptable Answer: <tag att=val …>
In our study of HTML we will use the following vocabulary.
tag means the first piece of an HTML markup. It normally matches a word
or phrase in English that has a similar meaning. For example, tag might be
h1 or p or img.
attribute= means one of the attributes (parameters) that modify the behavior of that HTML tag. For example, attribute might be style= or
class= or title=.
value will appear in the context of attribute=value.
Later on, in our study of CSS we will find a similar vocabulary. However,
for CSS attribute: with a colon will be used instead of attribute= with
an equals sign.
All HTML markup is done using tags and attributes. Markup is always
(1) introduced by <,
(2) followed by a tag,
(3) followed by zero or more attributes,
(4) each attribute can have a value, and
(5) ended with > or />.

4.2.1

Most Tags Come in Pairs

There are two main kinds of markup used in webpages.
The most common kind uses a start tag before the content to be marked,
and a matching end tag after the content to be marked.
The end tag uses the same tag word as the start tag, but it has / right
before the tag word.
Example: <thisisatag> goes with </thisisatag>.

CHAPTER 4. HTML TAGS AND ATTRIBUTES

4.2.2

39

Some Tags Stand Alone (Void)

The other kind uses a single tag and does not surround any text. These are
called void tags.
Instead of marking up the existing content, void tags insert additional content, such as an image or a line break.
These are some commonly-used void tags: base, br, hr, img, input, link,
meta.
Check out this picture: <img src=abc.jpg>

4.2.3

Starting and Ending a Tag

Exam Question 54 (p.339): What character marks the start of each piece
of HTML markup?
Required Answer: <
Exam Question 55 (p.339): What character marks the end of each piece
of HTML markup?
Required Answer: >
Exam Question 56 (p.339): What two characters can mark the end of
HTML markup for a void tag?
Required Answer: />
Some authors strongly recommend using /> at the end of each void tag. I
don’t believe that any more.
Exam Question 57 (p.339): When a tag is void, what does that mean?
Acceptable Answer: it cannot have a separate end tag
Exam Question 58 (p.339): When do you need a space before the end of
HTML markup?
Acceptable Answer: If the markup ends in /> and a non-quoted attribute
value is right before it.
The reason you need a space between a non-quoted attribute value and />
is to avoid having the / wrongly accepted as part of the attribute value.

CHAPTER 4. HTML TAGS AND ATTRIBUTES

4.2.4

40

Nesting and Overlapping Markup

Let’s define a couple of words: nesting and overlapping. Markup can usually
be nested, but normally overlapping is not allowed.
By nested tags we mean:
<x> aaa <y> bbb </y> ccc </x>
In this case, the whole item, aaa bbb ccc, is tagged with the x tag, and a
smaller part in the middle, bbb, is tagged with both the x tag and the y tag.
Exam Question 59 (p.339): When one set of tags begins and ends totally
inside another set of tags, what do we call that?
Acceptable Answer: nesting or nested
By overlapping tags we mean:
<x> aaa <y> bbb </x> ccc </y>
In this case, we apparently intend the first two-thirds, aaa bbb, to be tagged
with the x tag, and the last two-thirds, bbb ccc, to be tagged with the y
tag, with the middle third, bbb, tagged with both the x tag and the y tag.
Overlap is forbidden.
In most cases, the solution is to end the tag and then restart it, like this:
<x> aaa <y> bbb </y></x><y> ccc </y>
All you really need to know is that nesting is okay, and overlapping is not.
In case you are curious, here is why:
After your webpage is loaded into the browser, it is no longer stored as
HTML. Instead, it is stored as a tree-like structure called the DOM (document object model). Trees cannot handle overlaps.
The browser may fix it for you automatically, but it is not required to. A
validator will just say it is wrong.
Exam Question 60 (p.339): What is wrong with this ordering: <a>…<b>…</a>…</b>?
Acceptable Answer: overlap
Exam Question 61 (p.339): What is wrong with this ordering: <a>…<b>…</b>…</a>?
Acceptable Answer: nothing

CHAPTER 4. HTML TAGS AND ATTRIBUTES

4.3

41

Tag Attributes

We can use attributes to modify or customize tags. Attributes are also
called parameters or properties.
Attributes are specified right after the tag. Here is an example.
<abc x=5 y=hello z=whatever>
In this example, there are three attribute/value pairs. The first is x=5. The
second is y=hello. The third is z=whatever.
Normally the order does not make any difference. We could have said the
following, and it would mean the same thing.
<abc z=whatever y=hello x=5>
Exam Question 62 (p.339): In HTML does the order in which attributes
are specified make any difference?
Required Answer: no

4.3.1

Blank Attribute Values

If the attribute’s value is blank, you can specify it or leave it off. Here are
three options.
<… attribute=”” …> (the value is explicitly the empty string)
<… attribute= …> (the value is assumed to be the empty string)
<… attribute …> (the value is assumed to be the empty string)
The second option, <… attribute= …>, is legal but it is dangerous and
should not be used. The following attribute, if any, could be interpreted to
be its value if you are not careful.
Sometimes a missing attribute has a default value. The submit button, for
example, has a default value that is different than specifying value=”.

4.3.2

Spacing

Although it is perfectly legal to have zero or more spaces before the =, and
zero or more spaces after the =, we strongly recommend that spaces not be
placed around the = (equals) sign. It makes things confusing.

CHAPTER 4. HTML TAGS AND ATTRIBUTES

42

<… attribute=”abc” …> (strongly recommended)
<… attribute = “abc” …> (not recommended)
<… attribute= “abc” …> (not recommended)
<… attribute =”abc” …> (not recommended)

4.3.3

Quote Marks

For an attribute value, quote marks are normally not required.
To avoid confusion, if the value itself could be misunderstood to be HTML
syntax, then the quote marks are required. These syntax characters are:
space, the three kinds of quotes (single, double, and backquote), less than
(<), greater than (>), and equals (=).
Having a space inside the value is the most common reason for needing
quotes.
Specifically, when you are just writing letters, digits, and simple punctuation
like dot (.) or slash (/), the quotes are not required. A URL does not usually
require quote marks.
When quote marks are used, they can be either single quotes or double
quotes, and must be the same before and after the value.
<… attribute=abc …> (good)
<… attribute=a’c …> (not allowed)
<… attribute=”a’c” …> (good)
Exam Questions: You should know whether certain characters make it
necessary to enclose an attribute’s value in quotes or not.
Space has special meaning in this part of HTML. It delimits things. Because
it has special meaning, it must be quoted.
Exam Question 63 (p.340): If an HTML attribute’s value includes a space
does that force it to be quote marked?
Required Answer: yes
Double-quote has special meaning in this part of HTML. It delimits a
value. Because it has special meaning, it must be quoted (using singlequotes).
Exam Question 64 (p.340): If an HTML attribute’s value includes a

CHAPTER 4. HTML TAGS AND ATTRIBUTES

43

double-quote (“) does that force it to be quote marked?
Required Answer: yes
Less-than has special meaning in this part of HTML. It starts a new tag.
Because it has special meaning, it must be quoted.
Exam Question 65 (p.340): If an HTML attribute’s value includes a lessthan (<) does that force it to be quote marked?
Required Answer: yes
Greater-than has special meaning in this part of HTML. It ends a tag.
Because it has special meaning, it must be quoted.
Exam Question 66 (p.340): If an HTML attribute’s value includes a
greater-than (>) does that force it to be quote marked?
Required Answer: yes
Single-quote has special meaning in this part of HTML. It delimits a value.
Because it has special meaning, it must be quoted (using double-quotes).
Exam Question 67 (p.340): If an HTML attribute’s value includes a
single-quote (apostrophe) (’) does that force it to be quote marked?
Required Answer: yes
Back-quote has special meaning in this part of HTML. Because it has
special meaning, it must be quoted.
Exam Question 68 (p.340): If an HTML attribute’s value includes a
back-quote (‘) does that force it to be quote marked?
Required Answer: yes
Equals has special meaning in this part of HTML. It goes between an
attribute and its value. Because it has special meaning, it must be quoted.
Exam Question 69 (p.340): If an HTML attribute’s value includes an
equals (=) does that force it to be quote marked?
Required Answer: yes
Letters do not have any special meaning in this part of HTML.
Exam Question 70 (p.340): If an HTML attribute’s value includes a letter
(A a B b …) does that force it to be quote marked?
Required Answer: no
Digits do not have any special meaning in this part of HTML.
Exam Question 71 (p.340): If an HTML attribute’s value includes a digit
(1 2 3 …) does that force it to be quote marked?

CHAPTER 4. HTML TAGS AND ATTRIBUTES

44

Required Answer: no
Colons do not have any special meaning in this part of HTML. They do
have special meaning within a URL, and after a CSS attribute name, but
not here.
Exam Question 72 (p.340): If an HTML attribute’s value includes a colon
(:) does that force it to be quote marked?
Required Answer: no
Dots, also known as decimal points, periods, or full stops, do not have any
special meaning in this part of HTML. They do have special meaning within
a URL, but not here.
Exam Question 73 (p.340): If an HTML attribute’s value includes a dot
(.) does that force it to be quote marked?
Required Answer: no
Exam Question 74 (p.340): If an HTML attribute’s value includes a dash
(-) does that force it to be quote marked?
Required Answer: no
Slashes do not have any special meaning in this part of HTML. They do
have special meaning within a URL, but not here.
Exam Question 75 (p.340): If an HTML attribute’s value includes a slash
(/) does that force it to be quote marked?
Required Answer: no
Percents do not have any special meaning in this part of HTML. They do
have special meaning within a URL, but not here.
Exam Question 76 (p.340): If an HTML attribute’s value includes a
percent (%) does that force it to be quote marked?
Required Answer: no
Ampersands do not have any special meaning in this part of HTML. They
do have special meaning in creating character references, but that does not
affect us here.
Exam Question 77 (p.341): If an HTML attribute’s value includes an
ampersand (&) does that force it to be quote marked?
Required Answer: no
If you are not quoting the value, you must leave a space after it, or you must
end the tag immediately. Watch out for this situation:

CHAPTER 4. HTML TAGS AND ATTRIBUTES

45

<img … width=100 /> (right)
<img … width=’100′ /> (right)
<img … width=100/> (wrong)
<img … width=’100’/> (okay but discouraged)
In the “wrong” case, it is wrong because the slash (/) becomes part of the
value. That is, width is 100/ instead of being just 100.
That is why some authors will tell you to leave a space before /> at the end
of a tag.
Exam Question 78 (p.341): In <img … width=’100’/> what is the value
of width?
Required Answer: 100
Exam Question 79 (p.341): In <img … width=100 /> what is the value
of width?
Required Answer: 100
Exam Question 80 (p.341): In <img … width=100/> what is the value
of width?
Required Answer: 100/

4.4

Global Attributes

Some attributes can be included on any HTML tag. These are called the
global attributes. They are universally available. Here is a complete list: accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title, and translate.
Exam Question 81 (p.341): List the four commonly-used global attributes
for HTML tags.
Required Answer: id, class, style, title
http://www.w3.org/TR/html-markup/global-attributes.html has more.
http://www.w3schools.com/tags/ref_standardattributes.asp has more.

CHAPTER 4. HTML TAGS AND ATTRIBUTES

4.4.1

46

style=

style= specifies any CSS styling attributes that may be desired. Example, style=’color:red’. The style attribute provides immediate control
of anything that can be done using a cascading style sheet. Because it is
specified immediately at the tag, it takes precedence over anything the CSS
style sheet may say.

4.4.2

id=

id= specifies the ID of the item. Example, id=top. The id attribute gives
a unique name to the tag. Each id should only appear once on a web page.
This name can be used by the web browser, to jump to that part of the
webpage. It can also be used by CSS and JavaScript to control style and
actions or animations relating to that item.
ID values must be unique within an html page, and must start with a letter.
They can continue with letters, digits, underscores, dots (points, periods,
full stops), dashes, and colons. (Specifically, they cannot include spaces.)
There is no limit to length.
Exam Question 82 (p.341): In HTML, what type of character can be first
in an id?
Acceptable Answer: letter
Exam Question 83 (p.341): In HTML, what six kinds of characters can
appear after the first in an id?
Required Answer: letter, digit, dot, dash, colon, underscore
Exam Question 84 (p.341): In HTML, is id=123 valid?
Required Answer: no
Exam Question 85 (p.341): In HTML, is id=abc valid?
Required Answer: yes
Exam Question 86 (p.341): In HTML, is id=a.b.c valid?
Acceptable Answer: yes
Exam Question 87 (p.341): In HTML, is id=a-b-c valid?
Acceptable Answer: yes
Exam Question 88 (p.341): In HTML, is id=”a b c” valid?
Acceptable Answer: no

CHAPTER 4. HTML TAGS AND ATTRIBUTES

47

Because the legal ID characters are so limited, it is true that you never need
to put quote marks around an ID value.

4.4.3

class=

class= specifies the class of the item. Example, class=highlight. Like
id, class can be used by CSS and JavaScript to control style and actions or
animations relating to items that share that same class. Unlike id, the same
class can be used on more than one item. If you have more than one class,
separate them by spaces and enclose the list in quote marks.

4.4.4

title=

title= specifies text that will be displayed if the user hovers their mouse
over the element for a second or so. Example, title=’more information’.
It is a good way to provide hints or extra information that would otherwise
clutter the screen.
I personally think that “title” is really a horrible name for this attribute
because we already have something else called title. The whole document has
a title which is specified in the head with the syntax <title>…</title>,
and which is typically displayed in the tab of the browser. The two titles
are totally different.
I think a better name would be “popup” but for historical reasons it is called
title. This new thing called title can apply to any portion of a webpage.
Exam Question 89 (p.341): What does the <title> tag do?
Acceptable Answer: gives a name to the whole webpage
Exam Question 90 (p.341): What does the “title=” attribute do?
Acceptable Answer: provides information that is invisible until the user
hovers over it

4.4.5

hidden= (Advanced)

hidden= specifies that the item will not be rendered. It is invisible and
takes up no space.
It may be most useful in connection with JavaScript that can remove the
hidden attribute when you want to make something appear.

CHAPTER 4. HTML TAGS AND ATTRIBUTES
JavaScript: (something).removeAttribute(“hidden”);

48