Unit II

XHTML & HTML5

Complete Study Guide

Theory • Examples • Practice Questions • Answers

History of HTML
■ From HTML 1.0 to HTML5 — the evolution of web markup

XHTML Rules
■ All 6 strict rules with valid/invalid examples

HTML5 vs HTML
■ 9 key differences across multimedia, storage, threading & more

Video & Audio Tags

■ Syntax, attributes, supported formats by browser

HTML5 Form Controls

■ New input types: email, date, range, color, file…

Form Validation
■ required, minlength, maxlength, pattern attribute

Regular Expressions
■ Metacharacters, quantifiers, character sets with examples

Unit II Study Guide | XHTML & HTML5 Page 1

 Practice Questions
■ 40+ questions across MCQ, short answer & coding

Unit II Study Guide | XHTML & HTML5 Page 2

 Table of Contents

PART A — XHTML
1. History of HTML
2. Problems with HTML & Need for XHTML
3. XHTML Rules (1–6) with Examples
4. HTML vs XHTML: Side-by-Side Comparison

PART B — HTML5
5. What is HTML5? Definition & Overview
6. HTML vs HTML5: 9 Detailed Differences
7. New HTML5 APIs
8. Video Tag — Syntax, Attributes, Formats
9. Audio Tag — Syntax, Attributes, Formats
10. HTML5 Additional Form Controls
11. Form Validation Attributes
12. Regular Expressions — Theory & Pattern Building

PART C — PRACTICE
13. Section A: Multiple Choice Questions (20 Qs)
14. Section B: Short Answer Questions (10 Qs)
15. Section C: Regex Pattern Questions (5 Qs)
16. Section D: Coding Questions (5 Qs)
17. Answer Key — All Sections

Unit II Study Guide | XHTML & HTML5 Page 3

 PART A

XHTML
Extensible HyperText Markup Language

1. History of HTML

Version Year / Author Key Contribution

HTML 1.0 Tim Berners-Lee First version of HTML ever created.

HTML 2.0 1995 Very similar to 1.0 with a few new features added.

HTML 3.0 Dave Raggett Fresh draft; many new abilities and more power for developers.

HTML 4.0 December 1997 New tags for stylesheets, scripts, frames, embedded objects,
complex tables/forms, accessibility.

XHTML 2000 Stricter XML-based version of HTML; separates content from

presentation.

HTML5 2014 Major overhaul with multimedia, APIs, semantic elements, and
more.

2. Problems with HTML & Why XHTML?

HTML was designed to be forgiving — browsers would silently fix broken tags, unclosed elements,
and mixed presentation + content. This caused several problems:

• Content + Presentation Mixed: Layout done with <table>, inline styles, and presentational
attributes like bgcolor, border, align. Made maintenance very painful.

• No Strict Syntax: Tags could be left unclosed, attributes did not need quotes, nesting rules were
ignored. Different browsers rendered broken HTML differently.

• Hard to Extend: HTML was not XML-based, so it could not easily interact with XML tools, parsers,
or other XML-based data.

• Mobile Devices: Small devices had strict parsers that couldn't tolerate sloppy HTML. A standard
was needed.

Unit II Study Guide | XHTML & HTML5 Page 4

 ■ Note: XHTML solves this by enforcing XML rules: the same document can be directed to many display
devices simply by swapping the stylesheet. Data-once, destination-many.

XHTML vs HTML — Core Distinction:

Feature HTML XHTML

Presentation Can mix content & style Must separate — use CSS

Case sensitivity Case-insensitive All tags MUST be lowercase

Closing tags Optional for many tags Mandatory for ALL tags

Attribute quoting Optional Mandatory double quotes

File extensions .html, .htm .xhtml, .xml, .xht

3. XHTML Rules — All 6 Explained

When writing a new XHTML document or converting an existing HTML document, you must follow all
six rules below strictly:

Rule 1 All Tags Must Be Lowercase

XHTML is a case-sensitive language. Every tag and every attribute name must be written
entirely in lowercase letters. Unlike HTML, <P> and <p> are NOT the same in XHTML.

✗ Invalid:

<!-- INVALID -->

<A Href="/[Link]">Click</A>
<P>Hello World</P>

✓ Valid:

<!-- VALID -->

<a href="/[Link]">Click</a>
<p>Hello World</p>

Unit II Study Guide | XHTML & HTML5 Page 5

 Rule 2 All Tags Must Be Closed

Every element must have a matching closing tag. Even void elements (elements with no
content) must be self-closed using a space and a forward slash before the closing angle
bracket: />

✗ Invalid:

<!-- INVALID -->

<p>This paragraph is not closed.
<br>
<img src="[Link]">

✓ Valid:

<!-- VALID -->

<p>This paragraph is properly closed.</p>
<br />
<img src="[Link]" />

Rule 3 All Attribute Values Must Be Quoted

Every attribute value must be wrapped in double quotes. Numeric values, boolean-looking
values, and all other values must be quoted. An unquoted value makes the document
invalid.

✗ Invalid:

<!-- INVALID -->

<img src=[Link] width=300 height=200 />
<table border=1>

✓ Valid:

<!-- VALID -->

<img src="[Link]" width="300" height="200" />
<table border="1">

Rule 4 No Attribute Minimization

HTML allows shorthand boolean attributes like checked, disabled, selected. XHTML
requires every attribute to have an explicit name AND value pair, even for boolean
attributes.

✗ Invalid:

<!-- INVALID -->

<input type="checkbox" checked>
<option selected>Option 1</option>
<input type="text" disabled>

✓ Valid:

<!-- VALID -->

<input type="checkbox" checked="checked">
<option selected="selected">Option 1</option>
<input type="text" disabled="disabled">

Unit II Study Guide | XHTML & HTML5 Page 6

 Rule 5 Use id Attribute Instead of name

XHTML deprecates the name attribute on elements like <img>, <a>, <form>, and <frame>.
The id attribute replaces it. This provides unique identification compatible with XML
standards.

✗ Invalid:

<!-- INVALID -->

<img src="[Link]" name="site_logo" />
<a name="top">Back to Top</a>

✓ Valid:

<!-- VALID -->

<img src="[Link]" id="site_logo" />
<a id="top">Back to Top</a>

Rule 6 All Tags Must Be Properly Nested

Tags must close in the reverse order they were opened (like matching parentheses).
Overlapping tags are illegal in XHTML. The last tag opened must be the first tag closed.

✗ Invalid:

<!-- INVALID (overlapping) -->

<b><i>Bold and Italic</b></i>
<p><strong>Text</p></strong>

✓ Valid:

<!-- VALID (correct nesting) -->

<b><i>Bold and Italic</i></b>
<p><strong>Text</strong></p>

4. HTML vs XHTML — Side-by-Side Code Comparison

The table below shows the same navigation document written first in HTML (with all its loose syntax)
and then corrected for XHTML:

HTML (Invalid / Sloppy) XHTML (Corrected / Strict)

Unit II Study Guide | XHTML & HTML5 Page 7

 <html><head></head><body> <html><head></head><body>
<nav> <nav>
<a href=#lesson1>Lesson 1</a> <!-- <a href="#lesson1">Lesson 1</a> <!--
unquoted --> quoted -->
<a href="#lesson2>Lesson 2</a> <!-- <a href="#lesson2">Lesson 2</a> <!--
missing quote --> fixed -->
</nav> </nav>
<a name="lesson1">Lesson 1</a> <!-- name <a id="lesson1">Lesson 1</a> <!-- id attr
attr --> -->
<p>Sub topic 1 <p>Sub topic 1</p>
<p>Sub topic 2 <p>Sub topic 2</p>
<br > <!-- unclosed br --> <br /> <!-- self-closed -->
<a name="lesson2">Lesson 2</div> <!-- <a id="lesson2">Lesson 2</a> <!-- correct
wrong closing --> -->
</body></html> </body></html>

■ Rule: XHTML file extensions are .xhtml, .xml, and .xht. Never use .html for an XHTML document.

Unit II Study Guide | XHTML & HTML5 Page 8

 PART B

HTML5
The Modern Web Standard

5. What is HTML5?
HTML (HyperText Markup Language) is the standard language for creating web pages. It is the
backbone of every website, providing structure and meaning to content.

HTML5 is the fifth and current major version of HTML. It is not just a markup language — it is a
platform. HTML5 introduces new semantic elements, built-in multimedia support, powerful JavaScript
APIs, better form controls, offline capabilities, and much more. It treats markup language as the core
technology to interact with internet technologies for structuring and presenting content.

■ Note: HTML5 was officially released in 2014 by the W3C.

6. HTML vs HTML5 — 9 Key Differences

#1 Definition

HTML HTML5

A new version of HTML with new functionalities and

Hypertext Markup Language — a primary Markup language as the core technology to interact
language for developing web pages. → with internet technologies for structuring and
presenting content.

#2 Multimedia Support

HTML HTML5

HTML5 has built-in support for video and audio.

HTML does NOT have native support for video
and audio. → They are integrated directly using <video> and
<audio> tags without needing Flash or plugins.

#3 Geographical (Geo) Support

HTML HTML5

Unit II Study Guide | XHTML & HTML5 Page 9

 Tracking user location is possible but the HTML5 includes the JavaScript Geolocation API
process is cumbersome and difficult, → which can be used to identify the location of any
especially from mobile devices. user accessing the website — easily and accurately.

#4 Storage

HTML HTML5

HTML5 provides multiple storage options:

Application Cache, Web Storage
HTML uses only browser cache memory as
temporary storage. → (localStorage/sessionStorage), Web SQL Database,
and IndexedDB. JavaScript can also run in the
background via JS APIs for storing data.

#5 Communication

HTML HTML5

Client-server communication was done HTML5 supports WebSockets which allows

through HTTP request-response cycles, full-duplex (two-way, simultaneous) communication
streaming, and long polling — no native socket → between client and server over a single TCP
support. connection.

#6 Browser Compatibility

HTML HTML5

HTML is compatible with almost all browsers HTML5 introduces many new tags and elements
since it has existed for a long time and and removes/modifies old ones. As a result, only
browsers have been modified to support all its → some modern browsers fully support all HTML5
features. features.

#7 Graphics Support

HTML HTML5

Vector graphics required third-party tools like HTML5 supports Vector Graphics by default through
Silverlight, Adobe Flash, VML, or SVG via → built-in <canvas> (2D/3D drawing API) and inline
external libraries. SVG (Scalable Vector Graphics).

#8 Threading

HTML HTML5

The browser interface (DOM) and JavaScript HTML5 introduces the JavaScript Web Worker API,
both run in a single thread. This can cause the which allows JavaScript to run in a background
page to become unresponsive when → thread separate from the browser interface thread,
JavaScript is executing heavy tasks. preventing UI blocking.

Unit II Study Guide | XHTML & HTML5 Page 10

 #9 Error Handling

HTML HTML5

HTML cannot handle inaccurate syntax or HTML5 defines a specific parsing algorithm that
other errors — behavior is undefined and → handles incorrect syntax gracefully and consistently
browser-dependent. across all compliant browsers.

7. New HTML5 APIs

HTML5 introduced a powerful set of JavaScript APIs that extend what browsers can do natively:

API Description

Multimedia APIs <video> and <audio> tags with JavaScript control methods (play, pause, volume,
currentTime, etc.)

Drag and Drop API Enables dragging and dropping elements within a page or between browser windows
using draggable attribute and ondrop/ondragover events.

Canvas 2D Context The <canvas> element with the getContext("2d") method provides a pixel-level
drawing surface for graphics, animations, and games.

HTML5 Web The postMessage() API allows safe cross-origin communication between iframes,
Messaging tabs, or windows.

WebSQL A client-side SQL database available in the browser (now deprecated in favour of
IndexedDB).

Geolocation API [Link]() — retrieves the user's current geographic

coordinates (with permission).

Web Workers Background JavaScript threads that run concurrently without blocking the UI thread.

Notifications API Allows web applications to send desktop notifications to the user (with permission).

WebSockets Enables persistent, full-duplex communication channels over a single TCP

connection between client and server.

Advantages of HTML5 over HTML

✓ Mobile-friendly and easy to use on all screen sizes.

✓ Web pages can contain a wide range of colors, shades, and font types.

✓ HTML5 is compatible with all modern web browsers.

✓ Supports client-side databases (Web Storage, IndexedDB).

Unit II Study Guide | XHTML & HTML5 Page 11

 ✓ Improved performance and security through cross-browser storage and sandboxed iframes.

8. HTML5 Video Tag

HTML5 features native audio and video support without needing Flash or plugins. The <video>
element embeds video content directly into the page.

Basic Syntax:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
<source src="[Link]" type="video/webm">
Your browser does not support the video tag.
</video>

Key Attributes:

Attribute Description

controls Adds the default browser controls: play/pause button, volume, seekbar, fullscreen.

autoplay Video starts playing automatically when the page loads. (Note: many browsers require
muted for autoplay to work.)

muted Mutes the video audio by default.

loop Video restarts automatically after it ends.

width / height Set the display dimensions. Always specify these to prevent page flickering during load.

poster An image URL to display as a thumbnail before the video plays.

preload Hints to the browser: "none" | "metadata" | "auto". Controls how much is preloaded.

src Directly specify a single video source (alternative to using <source> children).

The <source> Element:

Using multiple <source> elements lets you provide alternative formats. The browser picks the first
format it recognizes and can play. The fallback text (between <video>...</video>) is shown only in
browsers that don't support the video element at all.

Supported Video Formats by Browser:

Browser MP4 WebM Ogg

Edge ■ YES ■ YES ■ YES

Chrome ■ YES ■ YES ■ YES

Unit II Study Guide | XHTML & HTML5 Page 12

 Firefox ■ YES ■ YES ■ YES

Safari ■ YES ■ YES ■ NO

Opera ■ YES ■ YES ■ YES

Paragraph( 'caseSensitive': 1 Paragraph( 'caseSensitive': 1 Paragraph( 'caseSensitive': 1

'encoding': 'utf8' 'text': 'File 'encoding': 'utf8' 'text': 'MIME 'encoding': 'utf8' 'text': 'Notes'
Format' 'frags': Type' 'frags': 'frags': [ParaFrag(__tag__='b',
[ParaFrag(__tag__='b', bold=1, [ParaFrag(__tag__='b', bold=1, bold=1,
fontName='Helvetica-Bold', fontName='Helvetica-Bold', fontName='Helvetica-Bold',
fontSize=10, greek=0, italic=0, fontSize=10, greek=0, italic=0, fontSize=10, greek=0, italic=0,
link=[], rise=0, text='File Format', link=[], rise=0, text='MIME Type', link=[], rise=0, text='Notes',
textColor=Color(1,1,1,1), textColor=Color(1,1,1,1), textColor=Color(1,1,1,1),
us_lines=[])] 'style': 'bulletText': us_lines=[])] 'style': 'bulletText': us_lines=[])] 'style': 'bulletText':
None 'debug': 0 ) #Paragraph None 'debug': 0 ) #Paragraph None 'debug': 0 ) #Paragraph

MP4 video/mp4 Most widely supported; uses

H.264 codec

WebM video/webm Open format by Google; VP8/VP9

codec

Ogg video/ogg Open format; Theora codec;

Safari doesn't support

9. HTML5 Audio Tag

The <audio> element is used to embed audio content in a web page. It works similarly to <video>.

Basic Syntax:
<audio controls autoplay>
<source src="[Link]" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

The controls attribute adds play/pause/volume. The autoplay attribute starts audio automatically.
The <source> child elements list alternatives; the browser picks the first format it supports.

Supported Audio Formats by Browser:

Browser MP3 WAV OGG

Edge/IE ■ YES ■ YES* ■ YES*

Chrome ■ YES ■ YES ■ YES

Firefox ■ YES ■ YES ■ YES

Unit II Study Guide | XHTML & HTML5 Page 13

 Safari ■ YES ■ YES ■ NO

Opera ■ YES ■ YES ■ YES

Format MIME Type Notes

MP3 audio/mpeg Most universal; patented but

freely usable

WAV audio/wav Uncompressed; high quality, large

file size

OGG audio/ogg Open format; Vorbis codec; Safari

doesn't support

10. HTML5 Additional Form Controls

HTML5 introduced many new input types beyond text, password, radio, and checkbox. These new
types provide built-in validation, platform-specific UI (like date pickers and color wheels), and better
semantics.

Syntax / Attributes Description

type="email" Validates that input is a properly formatted email address. u

e

type="search" A search field — displays a clear button on some browsers. S

type="tel" For telephone numbers. Triggers numeric keyboard on mobile. +

2

type="url" Validates that input is a properly formed URL. h

e

type="number" Numeric spinner with min, max, step constraints. 1

min="1" max="10"
step="2"

type="range" A slider control for choosing a value within a range. 0

min="0" max="100"
step="5"

type="file" accept= File upload — accept filters file types. (F

"image/png,image/jp
eg"

type="date" Date picker (year, month, day). y

type="datetime-loca Combined date and time picker (no timezone). y

l" h

Unit II Study Guide | XHTML & HTML5 Page 14

type="month" Picker for year and month only. y

type="time" Time picker (hours and minutes). h

type="week" Picker for a week number within a year. y

type="color" A color picker widget. Returns a hex color value. #

11. HTML5 Form Validation

HTML5 provides built-in client-side validation through special attributes on input elements, without
requiring JavaScript.

required
Marks the field as mandatory. Form cannot be submitted without a value.

<input type="text" required>

minlength
Sets the minimum number of characters allowed.

<input type="text" minlength="6" required>

maxlength
Sets the maximum number of characters allowed.

<input type="text" maxlength="20">

min / max
For number and range inputs — sets minimum and maximum allowed values.

<input type="number" min="1" max="100">

pattern
Validates the input against a regular expression. The form will not submit if the value doesn't match.

<input type="text" pattern="[A-Za-z]{3,}" title="Minimum 3 letters">

title
Text shown in the browser's built-in validation error tooltip.

<input type="text" pattern="..." title="Error message shown here">

12. Regular Expressions (Regex) in HTML5 Pattern

Unit II Study Guide | XHTML & HTML5 Page 15

 The pattern attribute uses regular expressions (regex) — a formalized string of characters that
defines a search pattern. The input value must completely match the pattern for the form to be
considered valid. Regex is case-sensitive by default.

Metacharacters (Shorthand Classes)

Metachar Equivalent Meaning Example

\w [a-zA-Z0-9_] Word characters (letters, \w+ matches "hello_123"

digits, underscore)

\W [^a-zA-Z0-9_] Non-word characters \W matches "!" or " "

\d [0-9] Any digit \d{3} matches "042"

\D [^0-9] Any non-digit character \D matches "a" or "#"

\s [ \t\n\r] Whitespace characters \s matches a space or tab

\S [^ \t\n\r] Non-whitespace \S matches "A"

characters

. Any char except \n Any single character a.c matches "abc" or

(wildcard) "a9c"

Quantifiers
Symbol Meaning Example

* Zero or more of the preceding element a* matches "", "a", "aa", "aaa"

+ One or more of the preceding element a+ matches "a", "aa" but NOT ""

? Zero or one of the preceding element (optional) a? matches "" or "a"

{n} Exactly n repetitions a{3} matches "aaa" only

{n,} At least n repetitions a{2,} matches "aa", "aaa", "aaaa"...

{n,m} Between n and m repetitions (inclusive) a{2,4} matches "aa", "aaa", "aaaa"

Anchors & Special Characters

Symbol Meaning Example

^ Matches the START of a string (or inside [], ^abc matches "abcde" but not "xabc"
means NOT)

$ Matches the END of a string abc$ matches "xyzabc" but not "abcx"

Unit II Study Guide | XHTML & HTML5 Page 16

 | OR operator — matches either side cat|dog matches "cat" or "dog"

() Groups subpatterns — applies quantifiers to the (ab)+ matches "ab", "abab"

group

[] Character class — matches any one character [aeiou] matches any vowel
listed

[^] Negated class — matches any character NOT [^0-9] matches any non-digit
listed

[a-z] Range — matches any character in the range [a-z] matches any lowercase letter

\. Escaped dot — matches a literal period matches "." only

character

Common Pattern Examples

Pattern What it matches

[A-Za-z0-9_]{1,15} Username: letters, digits, underscore — max 15 chars

[a-z0-9.]{5,} Email local part: lowercase, digits, periods — at least 5

chars

[a-zA-Z][a-zA-Z0-9\-_.]{1,19} Username starting with a letter, 1–20 chars total

[0-9]{13,16} Credit card number: digits only, 13–16 digits

[A-Za-z]+ Only letters (upper or lower), one or more

[0-9]+ Only digits, one or more

\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} IPv4 address format e.g. [Link]

\d{1,2}/\d{1,2}/\d{4} Date in dd/mm/yyyy format

\d+(,\d{3})*(\.\d{1,2})? Currency: digits with optional thousands comma and

decimal

[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,4}$ Email address validation

^\d{10}$ Exactly 10-digit phone number

Worked Example: Dissecting \d+(,\d{3})*(\.\d{1,2})?

Part Meaning Valid Examples

\d+ One or more digits (the integer part) 12, 124, 1

(,\d{3})* Zero or more groups of: a comma followed by exactly 3 (empty), ,000, ,000,000
digits

(\.\d{1,2})? Optionally: a dot followed by 1 or 2 digits (decimal part) (empty), .5, .99

Unit II Study Guide | XHTML & HTML5 Page 17

 Valid values for this pattern:

■ 12.12 ■ 124.3 ■ 12.2 ■ 1,000.00 ■ 13,000,000.00 ■ 13,000,000.0 ■ 13,000,000

Invalid values:

■ 12.212 (3 decimal places) ■ 12,34.53 (only 2 digits after comma) ■ 1,0000.00 (4 digits after
comma) ■ 13,000,000. (trailing dot, no digits)

Unit II Study Guide | XHTML & HTML5 Page 18

 PART C

Practice Questions
MCQ • Short Answer • Regex • Coding

Section A: Multiple Choice Questions

Choose the correct answer for each question.

Q1. Who originally developed HTML?

a) Dave Raggett
b) Tim Berners-Lee
c) Marc Andreessen
d) Brendan Eich

Q2. In which year was XHTML released?

a) 1997
b) 2000
c) 2004
d) 2014

Q3. Which of the following is a VALID XHTML tag?

a) <BR>
b) <Br />
c) <br />
d) <BR/>

Q4. Which attribute does XHTML prefer over the "name" attribute?
a) class
b) key
c) title
d) id

Q5. Which of the following is INVALID in XHTML?

a) <b><i>text</i></b>
b) <b><i>text</b></i>
c) <p>Hello</p>
d) <img src="[Link]" />

Q6. Which file extensions are valid for XHTML? (Choose the complete list)
a) .html, .htm
b) .xhtml, .xml, .xht
c) .xhtml only

Unit II Study Guide | XHTML & HTML5 Page 19

 d) .xml only

Q7. What is the main advantage of separating content from presentation in XHTML?
a) Smaller file size
b) Faster JavaScript execution
c) Same data can be styled differently for different devices using CSS
d) Better browser caching

Q8. In HTML5, what does the <video> "controls" attribute do?

a) Sets video resolution
b) Adds play/pause/volume controls to the video player
c) Enables the video to loop
d) Specifies the video codec

Q9. Which of the following is NOT a supported HTML5 video format?

a) MP4
b) WebM
c) AVI
d) Ogg

Q10. Which HTML5 input type would you use for a slider control?
a) type="slider"
b) type="number"
c) type="range"
d) type="scale"

Q11. What does the HTML5 Geolocation API use to find the user's location?
a) GPS only
b) IP address only
c) [Link]()
d) [Link]()

Q12. What is the purpose of Web Workers in HTML5?

a) To create new browser tabs
b) To run JavaScript in a background thread without blocking the UI
c) To manage HTTP requests
d) To add workers to a web form

Q13. In HTML5, which communication technology allows full-duplex client-server

messaging?
a) AJAX
b) HTTP Polling
c) WebSockets
d) SSE only

Q14. What does the regex pattern [A-Za-z]{3,8} match?

a) Any string of 3 to 8 digits
b) Any string of 3 to 8 letters (upper or lowercase)
c) Exactly 3 uppercase letters followed by 8 lowercase letters
d) Any string starting with a letter

Unit II Study Guide | XHTML & HTML5 Page 20

 Q15. What does the ^ symbol mean inside square brackets [ ] in regex?
a) Start of string
b) End of string
c) Negation — match characters NOT in the set
d) Repetition

Q16. Which regex quantifier matches "zero or one" occurrence?

a) *
b) +
c) ?
d) {0}

Q17. Which HTML5 storage option allows JavaScript to run in the background?
a) localStorage
b) sessionStorage
c) Web Worker via JS API
d) WebSQL

Q18. The <audio autoplay> attribute means:

a) Audio loops forever
b) Audio is muted by default
c) Audio starts playing automatically when the page loads
d) Audio downloads in the background only

Q19. What is the MIME type for an MP3 audio file in HTML5?
a) audio/mp3
b) audio/mpeg
c) audio/wav
d) audio/ogg

Q20. Which validation attribute makes a form field mandatory in HTML5?

a) mandatory
b) validate
c) required
d) mustfill

Unit II Study Guide | XHTML & HTML5 Page 21

 Section B: Short Answer Questions

Q21. List all 6 rules of XHTML and give one example for each.
Answer:

Q22. What is the difference between HTML and XHTML in terms of attribute quoting?
Provide an invalid example and the corrected XHTML version.
Answer:

Q23. Explain what the "data-once, destination-many" principle means in the context of
XHTML.
Answer:

Q24. Compare HTML and HTML5 in terms of (a) Storage and (b) Threading.
Answer:

Q25. Write a complete HTML5 code snippet that embeds a video called "demo.mp4" with
controls, a fallback to "[Link]", and a poster image "[Link]".
Answer:

Q26. Write the HTML5 <audio> element to play "song.mp3" with autoplay and a fallback to
"[Link]".
Answer:

Q27. Explain the difference between minlength, maxlength, min, and max validation
attributes in HTML5. When would you use each?
Answer:

Q28. What does the regex pattern [a-zA-Z][a-zA-Z0-9\-_.]{1,19} match? Explain each part.
Answer:

Unit II Study Guide | XHTML & HTML5 Page 22

 Q29. For the regex \d+(,\d{3})*(\.\d{1,2})?, state whether each of the following is valid or
invalid and explain why: (a) 1,000.00 (b) 1,0000.00 (c) 13,000,000. (d) 12.12
Answer:

Q30. Describe the new HTML5 APIs introduced (list any five with a one-line description of
each).
Answer:

Unit II Study Guide | XHTML & HTML5 Page 23

 Section C: Regex Pattern Questions

Q31.
Write an HTML5 pattern attribute regex for a phone number that accepts any of these formats:
123-456-7890 | 123 456 7890 | 123.456.7890 | (123) 456 7890
Hint: Each part can be separated by a hyphen, space, or period. The area code may be in parentheses.
Your pattern:

Q32.
Write a regex pattern for a password that requires: at least 8 characters, at least one uppercase
letter, at least one lowercase letter, and at least one digit.
Hint: Use lookaheads (?=...)
Your pattern:

Q33.
Given pattern="[0-9]+" — list 3 valid inputs and 3 invalid inputs.
Your pattern:

Q34.
Given pattern="[A-Za-z0-9_]{1,15}" — which of these are valid?
(a) hello_World (b) my user (c) abc123 (d) this_is_too_long_username (e) User#1
Your pattern:

Q35.
Write a regex to validate an Indian mobile number: starts with 6, 7, 8, or 9, followed by exactly 9
more digits (total 10 digits).
Example valid: 9876543210, 7012345678
Your pattern:

Unit II Study Guide | XHTML & HTML5 Page 24

 Section D: Coding Questions

Q36.
Convert the following HTML code to valid XHTML. Identify and fix every error:
<HTML>
<Head></Head>
<BODY>
<IMG SRC=[Link] name=myPhoto>
<P>Welcome to my page
<BR>
<input type=checkbox checked>
<A HREF=#section1>Go to Section</A>
</BODY></HTML>

Your answer:

Q37.
Write a complete HTML5 registration form with the following fields:
• Name (text, required, min 3 chars)
• Email (email type, required)
• Phone (tel type, pattern for 10 digits)
• Age (number, min 18, max 60)
• DOB (date type)
• Password (password, pattern requiring 8+ chars with upper, lower, digit)
• Submit button
Your answer:

Q38.
Write the HTML5 code to create a media player page that:
• Embeds a video (video.mp4 / [Link]) with controls, autoplay, and a poster image
• Below the video, embeds an audio file (audio.mp3 / [Link]) with controls
• Both have fallback text for unsupported browsers
Your answer:

Unit II Study Guide | XHTML & HTML5 Page 25

 Q39.
Write an HTML5 form with an input for a username. Apply the pattern:
[a-zA-Z][a-zA-Z0-9-_.]{1,19}
Include a title that explains the rule. Make it required.
Your answer:

Q40.
Given this regex pattern for a currency field: \d+(,\d{3})*(\.\d{1,2})?
a) Write the HTML5 input element using this pattern
b) State whether "13,000,000.0" is valid — explain why
c) State whether "1,0000.00" is valid — explain why
Your answer:

Unit II Study Guide | XHTML & HTML5 Page 26

 PART D

Answer Key
Complete Solutions for All Sections

Section A — MCQ Answer Key

Q Ans Explanation

Q1 B Tim Berners-Lee invented HTML at CERN.

Q2 B XHTML was released in the year 2000 by W3C.

Q3 C All lowercase, self-closed with space: <br />

Q4 D XHTML uses id= attribute; name= is deprecated.

Q5 B <b><i>text</b></i> overlaps — <i> must close before <b>.

Q6 B Valid XHTML extensions: .xhtml, .xml, .xht

Q7 C Data-once, destination-many: same content, different stylesheets for different devices.

Q8 B controls adds the browser's default playback UI.

Q9 C AVI is not supported by <video>. MP4, WebM, Ogg are.

Q10 C type="range" creates a slider input.

Q11 C [Link]() is the Geolocation API method.

Q12 B Web Workers run JS in a background thread, keeping the UI responsive.

Q13 C WebSockets provide full-duplex bidirectional communication.

Q14 B [A-Za-z]{3,8} matches 3 to 8 upper or lowercase letters.

Q15 C Inside [], ^ means "NOT these characters": [^abc] matches anything except a, b, c.

Q16 C ? means zero or one occurrence of the preceding element.

Q17 C HTML5 Web Worker API allows background JS execution.

Q18 C autoplay causes the audio to play automatically on page load.

Q19 B The MIME type for MP3 is audio/mpeg.

Unit II Study Guide | XHTML & HTML5 Page 27

 Q20 C required attribute makes a field mandatory.

Section B — Short Answer Key

Q21 — 6 XHTML Rules

→ 1. Lowercase tags: <p> not <P>
→ 2. Close all tags: <p>text</p> and <br />
→ 3. Quote all attributes: width="300" not width=300
→ 4. No attribute minimization: checked="checked" not just checked
→ 5. Use id instead of name: id="myImg" not name="myImg"
→ 6. Proper nesting: <b><i>text</i></b> — inner closes first

Q22 — Attribute Quoting

→ HTML allows: <img src=[Link] width=300 /> (unquoted)
→ XHTML requires: <img src="[Link]" width="300" /> (all values double-quoted)
→ Reason: XHTML is XML-based; XML parsers reject unquoted attribute values.

Q23 — Data-once, Destination-many

→ XHTML separates content (HTML structure) from presentation (CSS styles).
→ The same XHTML document can be rendered differently on a desktop browser, mobile browser,
→ printer, or screen reader — just by applying a different CSS stylesheet to it.
→ You only maintain one source of data; the output adapts to the destination.

Q24 — Storage & Threading

→ Storage — HTML: only browser cache. HTML5: Application Cache, Web Storage (localStorage/
→ sessionStorage), Web SQL, IndexedDB. JS can also run background tasks via JS API.
→ Threading — HTML: DOM and JavaScript share a single thread (blocks UI on heavy computation).
→ HTML5: Web Worker API allows JavaScript to run in a separate background thread,
→ preventing the UI from freezing.

Q25 — Video Code

→ <video width="640" height="360" controls autoplay poster="[Link]">
→ <source src="demo.mp4" type="video/mp4">
→ <source src="[Link]" type="video/ogg">
→ Your browser does not support the video element.
→ </video>

Q26 — Audio Code

→ <audio controls autoplay>
→ <source src="song.mp3" type="audio/mpeg">
→ <source src="[Link]" type="audio/ogg">
→ Your browser does not support the audio element.
→ </audio>

Q27 — Validation Attributes

→ minlength: minimum number of characters for text inputs. e.g. minlength="6"

Unit II Study Guide | XHTML & HTML5 Page 28

 → maxlength: maximum number of characters for text inputs. e.g. maxlength="20"
→ min: minimum numeric/date value for number, range, date inputs. e.g. min="18"
→ max: maximum numeric/date value for number, range, date inputs. e.g. max="100"
→ Use min/max for numbers and dates; use minlength/maxlength for text length.

Q28 — Regex Explanation

→ [a-zA-Z] — First character must be a letter (upper or lower)
→ [a-zA-Z0-9\-_.] — Subsequent characters can be letters, digits, hyphens, underscores, or periods
→ {1,19} — The subsequent part is 1 to 19 characters long
→ Combined: total length is 1+1=2 to 1+19=20 characters, always starting with a letter.
→ Valid: "Alice", "User_1", "My-App.v2" | Invalid: "1user", "ab#c", too long (21+ chars)

Q29 — Pattern Validity

→ (a) 1,000.00 — ■ VALID: 1 digit, then ,000 (3 digits after comma), then .00 (2 decimals)
→ (b) 1,0000.00 — ■ INVALID: ,0000 has 4 digits after the comma; pattern requires exactly \d{3}
→ (c) 13,000,000. — ■ INVALID: has a trailing dot but no digits after it; (\.\d{1,2})? requires 1-2 digits if
dot is present
→ (d) 12.12 — ■ VALID: 2 digits, no comma groups, then .12 (2 decimal places)

Q30 — HTML5 APIs

→ 1. Multimedia API — <video>/<audio> tags + JS methods (play, pause, volume)
→ 2. Drag and Drop API — draggable attribute + ondrop/ondragover events
→ 3. Canvas 2D API — <canvas> + getContext("2d") for pixel-level drawing
→ 4. Geolocation API — [Link]() for user location
→ 5. Web Workers — background JS threads via new Worker("[Link]")
→ 6. WebSockets — new WebSocket(url) for full-duplex real-time communication
→ 7. Web Storage — localStorage (persistent) and sessionStorage (per session)
→ 8. Notifications API — Notification permission + new Notification("title")

Unit II Study Guide | XHTML & HTML5 Page 29

 Section C — Regex Answer Key

Q31 — Phone Number Pattern

Pattern:
(\(?\d{3}\)?[\s.\-]?\d{3}[\s.\-]?\d{4})

→ \(? — optional opening parenthesis

→ \d{3} — exactly 3 digits (area code)
→ \)? — optional closing parenthesis
→ [\s.\-]? — optional separator: space, dot, or hyphen
→ \d{3} — next 3 digits
→ [\s.\-]? — optional separator again
→ \d{4} — last 4 digits

Q32 — Password Pattern

Pattern:
(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}

→ (?=.*\d) — lookahead: at least one digit somewhere in the string

→ (?=.*[a-z]) — lookahead: at least one lowercase letter
→ (?=.*[A-Z]) — lookahead: at least one uppercase letter
→ .{8,} — any characters, at least 8 total

Q33 — [0-9]+ Valid/Invalid

→ Valid: "123", "0", "9999999"
→ Invalid: "abc" (letters), "12.5" (has a dot), "1 2" (has a space)

Q34 — [A-Za-z0-9_]{1,15} Validity

→ (a) hello_World — ■ VALID (letters and underscore, length OK)
→ (b) my user — ■ INVALID (space is not in [A-Za-z0-9_])
→ (c) abc123 — ■ VALID (letters and digits)
→ (d) this_is_too_long_username — ■ INVALID (exceeds 15 characters)
→ (e) User#1 — ■ INVALID (# is not in [A-Za-z0-9_])

Q35 — Indian Mobile Number

Pattern:
^[6-9]\d{9}$

→ ^[6-9] — starts with 6, 7, 8, or 9 (^ anchors to string start)

→ \d{9} — followed by exactly 9 more digits
→ $ — end of string (ensures total of exactly 10 digits)
→ Valid: 9876543210, 7012345678
→ Invalid: 1234567890 (starts with 1), 98765432 (only 8 digits)

Unit II Study Guide | XHTML & HTML5 Page 30

 Section D — Coding Answer Key

Q36 — Corrected XHTML

<!-- All tags lowercase, all attributes quoted, -->
<!-- all tags closed, id instead of name, -->
<!-- void elements self-closed -->
<html>
<head></head>
<body>
<img src="[Link]" id="myPhoto" />
<p>Welcome to my page</p>
<br />
<input type="checkbox" checked="checked" />
<a href="#section1">Go to Section</a>
</body>
</html>

Changes made: 1) All tags lowercased 2) src and name quoted 3) name→id 4) <p> closed 5)
<br>→<br /> 6) checked="checked" 7) HREF→href 8) <HTML>→<html>

Q37 — Registration Form

<!DOCTYPE html>
<html lang="en">
<head><title>Registration</title></head>
<body>
<form>
Name:
<input type="text" required minlength="3" /><br/>

Email:
<input type="email" required /><br/>

Phone:
<input type="tel" pattern="^\d{10}$"
title="10-digit number" required /><br/>

Age:
<input type="number" min="18" max="60" required /><br/>

Date of Birth:
<input type="date" /><br/>

Password:
<input type="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Min 8 chars, 1 upper, 1 lower, 1 digit" required /><br/>

<input type="submit" value="Register" />

</form>
</body></html>

Q38 — Media Player

Unit II Study Guide | XHTML & HTML5 Page 31

 <!DOCTYPE html>
<html lang="en">
<head><title>Media Player</title></head>
<body>
<h2>Video Player</h2>
<video width="640" height="360" controls autoplay poster="[Link]">
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video element.
</video>

<h2>Audio Player</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body></html>

Q39 — Username Form

<form>
Username:
<input type="text"
pattern="[a-zA-Z][a-zA-Z0-9\-_.]{1,19}"
title="Must start with a letter; 2-20 characters;
only letters, digits, hyphens, underscores, periods"
required />
<input type="submit" value="Submit" />
</form>

Q40 — Currency Pattern Analysis

a) HTML5 input element:
<input type="text"
pattern="\d+(,\d{3})*(\.\d{1,2})?"
title="Enter a valid currency amount e.g. 1,000.00"
required />

b) "13,000,000.0" — VALID
13 = \d+ (matches)
,000,000 = two groups of (,\d{3})* (each has exactly 3 digits after comma)
.0 = (\.\d{1,2})? — 1 decimal digit is within range {1,2}

c) "1,0000.00" — INVALID
After 1, the group (,\d{3})* requires EXACTLY 3 digits.
,0000 has 4 digits after the comma — does not match.

Unit II Study Guide | XHTML & HTML5 Page 32