Lesson 3: Building the User Interface by Using HTML5: Organization,

Input, and Validation

 
1. Which of the following elements is not considered to be semantic markup?
a) article
b) section
c) div
d) aside
 
Answer: c
Difficulty: Easy
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
The div element isn’t considered to be semantic markup; the element alone doesn’t have
much meaning without the id or class attribute. However, HTML5 Web pages still use the
div element.
 
2. You are creating an HTML5 Web page and want to include your contact information.
Which element is the most appropriate to use?
a) address
b) wbr
c) nav
d) article
 
Answer: a
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
The address element is designed to define an area for contact information for a page or
section.
 
3. You are creating a Web page and want to include text, like a heading, that will display
information when clicked and then hide the information when clicked again. Which of the
following element should you use?
a) aside
b) details
c) summary
d) header
 
Answer: c
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
The summary element defines a visible heading for a details element. A user can click the
heading to display or hide information.
 
4. You are preparing a medical article for display on a Web page. The article includes some
very long words. Which element do you use to ensure a Web browser will break the long
words appropriately?
a) details
b) section
c) hgroup
d) wbr
 
Answer: d
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
The wbr element defines a possible line break. When a word is very long, or you’re
concerned the browser will break a line at the wrong place, you can use the wbr element to
break the word or line appropriately.
 
5. Which of the following is true of the footer element?
a) It defines a footer for a document or section.
b) It is designed for navigation links.
c) You can have only one footer per document.
d) It always appears at the bottom of a Web page.
 
Answer: a
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
The footer element defines a footer for a document or section. It may include the document
author, contact information, copyright information, and links to terms of use. Navigation
links are more often found in or just below the header, or along the side a Web page. You can
have multiple footers in a single document, but you need to use CSS to instruct the browser
where in a document to display footers.
 
6. You are blogging on your Web site and want part of the information to be available for
other Web sites to use and display. Which HTML5 element should you use to set off the
content to be syndicated?
a) summary
b) details
c) article
d) div
 
Answer: c
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
Content set off by <article> tags can be distributed in syndication, so think of it as content
that makes sense on its own.
 
7. You are creating a how-to article and want to display definitions for a few keywords in
your article. Which HTML5 element should you use for the definitions?
a) wbr
b) details
c) article
d) aside
 
Answer: d
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
The aside element is used to set off content that’s related to the current topic but would
interrupt the flow of the document if left inline. This element is useful for sidebars, notes,
related reading links, and definitions for keywords in a paragraph.
 
8. What does the <hr /> tag produce?
a) page break
b) horizontal rule
c) word break
d) heading
 
Answer: b
Difficulty: Easy
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
The <hr /> tag creates a horizontal rule.
 
9. How many columns does the following table have?
<table>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Popcorn</td>
    <td>$4</td>
  </tr>
  <tr>
    <td>Candy</td>
    <td>$3</td>
  </tr>
  <tr>
    <td>Soda</td>
    <td>$3</td>
  </tr>
</table>
a) 1
b) 2
c) 3
d) 4
 
Answer: b
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
The markup indicates a two-column table; the column headings are labeled Item and Price.
 
10. You want to add a title before an HTML table that will appear just once. Which tag do
you use?
a) <title>
b) <thead>
c) <caption>
d) <colgroup>
 
Answer: c
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
You can use the <caption> tag to add a caption above or below the table.
 
11. What are #EEE8AA and #F0E68C examples of?
 
a) hexadecimal color codes
b) placeholder text
c) Web form field names
d) none of the above
 
Answer: a
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
For HTML color, you can use either the color name or the hexadecimal code. The
hexadecimal code #EEE8AA produces the pale goldenrod color. The hexadecimal code
#F0E68C produces the khaki color.
 
12. You are including a bulleted list in an HTML document. You want to use a square as the
symbol marker for all list items. What is the most efficient and proper markup?
a) <ul type="square">
b) <li type="square">item</i>
c) <lu type="square">
d) <ul marker="square">
 
Answer: a
Difficulty: Hard
Section Reference: Choosing and Configuring HTML5 Tags to Organize Content and Forms
You could add the type="square" markup to each <li> tag, but the most efficient way is to
use  <ul type="square"> only once at the beginning of the list.
 
13. You are creating a Web form that will send data back to a Web server. Which attribute do
you use with the form element to send the data?
a) send="data"
b) post="data"
c) method="get"
d) method="post"
 
Answer: d
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags for Input and Validation
The method attribute specifies the HTTP (transmission) method used when sending form
data. Use get for retrieving data and use post for storing or updating data or sending email.
 
14. You are creating a Web form that will display a response to the user after the user clicks
the Submit button. Which value do you use with the target attribute to display the response
in a new, unnamed browser window?
a) _blank
b) _self
c) _parent
d) _top
 
Answer: a
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags for Input and Validation
The target attribute is used with the form element. target specifies where to display a
response to a user after submitting a form. The _blank value loads the response in a new,
unnamed browser window.
 
15. What kind of input does the following pattern markup most likely control?
pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}"
 
a) Zip code
b) house address number
c) telephone number
d) U.S. Social Security number
 
Answer: d
Difficulty: Hard
Section Reference: Choosing and Configuring HTML5 Tags for Input and Validation
The markup indicates a number with a XXX-XX-XXXX pattern, which is the same pattern as
a U.S. Social Security number.
 
16. You are creating a search feature using Web form markup for your Web site. When a user
first opens the page, you want the user’s cursor to appear in the Search field automatically.
Which input attribute should you use?
a) form
b) formmethod
c) autofocus
d) placeholder
 
Answer: c
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags for Input and Validation
The autofocus attribute specifies that a control is to be focused, or selected, as soon as the
page loads.
 
17. You are creating a Web form in which users may submit files. Which attribute do you use
with the input element to restrict file types to video?
a) form
b) accept
c) list
d) formnovalidate
 
Answer: b
Difficulty: Hard
Section Reference: Choosing and Configuring HTML5 Tags for Input and Validation
The accept attribute specifies file types a Web server will accept. The attribute is used along
with the type="file" attribute. The accept attribute uses the audio/*, video/*, image/*,
and MIME_type values. An example is <input type="file" name="pic"
accept="image/*">.
 
18. You want to require users who submit information through your Web form to include
their email address. Which of the following markup is correct?
a) <input email="required" />
b) <input email="email" required />
c) <input type="email" required />
d) <input type="email" pattern />
 
Answer: c
Difficulty: Hard
Section Reference: Choosing and Configuring HTML5 Tags for Input and Validation
The required attribute requires information in a field when the form is submitted. The email
attribute requires the user to enter an email address. The browser will display an error
message if the user submits the Web form without including an email address.
 
19. You are creating a Web form that will prompt the user for a password. Which attribute do
you use with the input element?
a) type="password"
b) password="required"
c) type=password
d) password="text"
 
Answer: a
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags for Input and Validation
You should use the type="password" attribute and value with the to display input element
to display a field for a password.
 
20. The pattern attribute works with which input types? (Choose all that apply.)
a) image
b) search
c) file
d) text
 
Answer: b, d
Difficulty: Medium
Section Reference: Choosing and Configuring HTML5 Tags for Input and Validation
You can use the pattern attribute with the text, search, url, telephone, email, and
password input types.