HTML - Questions & Answers
Welcome to the Master HTML Questions & Answers Guide curated specifically for BCA, MCA, B.Sc. Computer Science students preparing for university theory and viva examinations, as well as aspiring front-end developers preparing for technical coding interviews. This master collection is structured into five core topic categories covering fundamental syntax, semantics, multimedia, modern HTML5 web standards, form validation, and SEO best practices.
Category 1: HTML Architecture & Core Document Structure
HTML (HyperText Markup Language) is a standardized markup language used to structure content on the World Wide Web. Unlike programming languages such as C, C++, or Java:
- HTML has no computational logic: it lacks variables, loops, conditional branches (
if/else), data structures, and algorithmic execution. - HTML uses tags to annotate and give semantic meaning to raw text, instructing web browsers how to format and render headings, paragraphs, lists, links, and multimedia.
- It operates on a declarative paradigm, describing what should appear rather than the procedural steps to compute it.
The
Consequence of omission: If omitted, modern browsers switch to Quirks Mode (emulating 1990s Netscape and IE5 rendering bugs). In Quirks Mode, CSS box-sizing calculations, table rendering, and CSS inheritance behave erratically, breaking responsive layouts. Declaring
<!DOCTYPE html> declaration is an instruction to the web browser informing it that the document is written in modern HTML5. It is not an HTML tag and has no closing tag.
Consequence of omission: If omitted, modern browsers switch to Quirks Mode (emulating 1990s Netscape and IE5 rendering bugs). In Quirks Mode, CSS box-sizing calculations, table rendering, and CSS inheritance behave erratically, breaking responsive layouts. Declaring
<!DOCTYPE html> forces the browser into Standards Mode.
In web development terminology:
- Tag: The bracketed syntax marking the boundary of a component (e.g.,
<p>is the opening tag,</p>is the closing tag). - Element: The entire complete unit, spanning from the opening tag, through all enclosed text and child elements, to the closing tag (e.g.,
<p class="note">Hello World</p>). - Attribute: Key-value modifier pairs located inside the opening tag that configure the element's behavior or provide metadata (e.g.,
class="note"orsrc="logo.png").
Void elements are elements that cannot contain any internal text or child elements, and therefore must never have a closing tag. Under HTML5 standards, trailing slashes (
Common void elements include:
/>) are completely optional.
Common void elements include:
<img>, <br>, <hr>, <input>, <meta>, <link>, <source>, <area>, <base>, <col>, <embed>, <param>, <track>, and <wbr>.
HTML is the static textual source code authored by the developer. When the browser downloads the HTML document, its parsing engine parses the text and constructs an in-memory, tree-structured object representation called the DOM (Document Object Model). Each HTML element becomes a node in the tree. JavaScript cannot directly manipulate raw HTML text files; instead, it queries and modifies this live DOM tree dynamically in real time.
Category 2: Text Formatting, Typography & Hyperlinks
While visual browsers render them identically by default:
<b>is purely stylistic (physical bold) with zero semantic importance.<strong>conveys serious urgent semantic importance; screen readers announce strong text with louder, emphatic vocal inflection.<i>represents alternate voice or technical terms (physical italics).<em>indicates verbal stress emphasis that fundamentally alters the sentence's spoken meaning.
Key distinctions between standard display types:
- Block-Level (e.g.,
<div>,<p>,<h1>,<ul>): Always starts on a new line and stretches horizontally to fill 100% of the available container width. Honors top/bottom margins and height/width properties. - Inline (e.g.,
<span>,<a>,<strong>): Flows smoothly within text without forcing a line break. Width and height are governed strictly by its contents, and top/bottom margins are ignored.
When a hyperlink uses
Adding
target="_blank" to open a new tab, the newly opened page gains access to the originating page via the JavaScript window.opener object. A malicious external site can exploit this Reverse Tabnabbing vulnerability by executing window.opener.location = "fake-phishing-login.com" behind the user's back.
Adding
rel="noopener noreferrer" sets window.opener to null, isolating the new tab and suppressing the HTTP Referer header to protect user privacy.
Characters such as
<, >, &, and " are syntactically reserved by the HTML parser to define tags and attributes. If typed directly into text, the browser mistakes them for markup syntax or breaks the parser. HTML Character Entities (such as < for < and & for &) instruct the browser to render the literal symbol on-screen, preventing syntax errors and Cross-Site Scripting (XSS) injection.
An Absolute URL includes the full protocol, domain, and path (e.g.,
https://veewom.com/html/index.htm), pointing to an exact resource anywhere on the Internet. A Relative URL specifies a path relative to the current file or site root (e.g., ../css/style.css or /images/logo.png). Relative links ensure website portability across local development (localhost), staging, and production domains without editing file paths.
Category 3: Tables, Lists, Images & Media
A semantically accessible table consists of:
<caption>: Accessible title describing the table's contents.<thead>: Header section containing<tr>and<th>cells. Header cells must usescope="col"orscope="row"to associate headers with data cells for screen readers.<tbody>: Main data rows containing<td>data cells.<tfoot>: Summary/totals row at the bottom of the table.
Both attributes merge adjacent cells in a table:
colspan="N": Merges a single table cell horizontally acrossNadjacent columns.rowspan="N": Merges a single table cell vertically acrossNadjacent rows down the table.
The
alt (Alternative Text) attribute serves three crucial purposes:
- Accessibility (WCAG): Screen readers read the alt text aloud to visually impaired users who cannot see the graphic.
- Broken Links & Slow Connections: If an image fails to load due to network errors or 404s, the browser displays the alt text inside the broken image frame.
- Search Engine Optimization (SEO): Web crawlers (Googlebot) cannot "see" images; they rely heavily on descriptive alt text to index images in Google Image Search.
The
<picture> element is a responsive container that wraps multiple <source> tags and a fallback <img> tag. It enables two major web performance optimizations:
- Modern Next-Gen Formats: Serves lightweight WebP or AVIF images to modern browsers while serving standard JPG/PNG to legacy browsers via
type="image/webp". - Art Direction: Uses CSS media queries (
media="(max-width: 768px)") to serve tightly cropped vertical images to mobile phones and wide banner landscapes to desktop monitors.
Declaring explicit pixel dimensions allows the browser layout engine to calculate the image's aspect ratio and reserve layout space before the image finishes downloading. This completely prevents Cumulative Layout Shift (CLS)—a Google Core Web Vital metric where content jumps around unexpectedly on the screen as images load.
Category 4: Forms, User Input & Validation
Key differences:
- Data Location:
GETappends data visibly to the URL query string;POSTpackages data in the HTTP request body. - Security:
GETexposes passwords and tokens in history, logs, and bookmarks.POSTkeeps payloads hidden and encrypted under HTTPS. - Payload Limits:
GETis limited to ~2,048 characters.POSTsupports large multi-megabyte payloads. - File Uploads:
GETcannot upload binary files.POSTsupports files viamultipart/form-data. - Idempotency:
GETis idempotent (safe to repeat).POSTmodifies server state.
disabled: The input field is grayed out, cannot receive keyboard focus, cannot be edited, and its value is not submitted in the form payload.readonly: The input field is readable, can be selected, focused, and copied, but cannot be typed into. Its value is submitted in the form payload.
The
pattern attribute defines a JavaScript Regular Expression that the input value must satisfy before the browser permits form submission. For example, pattern="[0-9]{10}" validates a 10-digit mobile number, and pattern="[A-Z]{5}[0-9]{4}[A-Z]{1}" validates an Indian PAN card without requiring custom JavaScript.
The
for attribute binds the label to the id of an input control. This allows screen readers to announce the label when the input is focused, and enables users to click or tap the label text to focus the textbox or toggle a checkbox/radio button, expanding small mobile touch targets.
Standard URL encoding (
application/x-www-form-urlencoded) turns all form input into an ASCII character string, which destroys binary file data (images, PDFs, ZIPs). Setting enctype="multipart/form-data" separates the HTTP body into distinct MIME parts with unique boundary markers, allowing binary byte streams to transmit safely to the server.
Category 5: HTML5 Advanced Standards, Performance & SEO
Semantic elements (such as
<header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>) explicitly declare their meaning and purpose to both browsers and search engines. Unlike meaningless <div> tags, semantic elements:
- Enable screen readers to jump directly to key landmarks (e.g. bypassing navigation straight to
<main>). - Help search engines (Google) index primary content and distinguish articles from sidebars.
- Produce clean, maintainable, self-documenting codebases for developer teams.
Both attributes download JavaScript files in the background without blocking HTML parsing, but differ in execution timing:
async: Executes immediately the moment download completes, pausing HTML parsing mid-stream. Execution order is unpredictable. Ideal for independent analytics scripts (e.g., Google Analytics).defer: Waits until HTML parsing is completely finished before executing. Strictly guarantees original script execution order. Ideal for scripts dependent on DOM elements or other libraries (e.g., jQuery, Bootstrap).
<meta name="viewport" content="width=device-width, initial-scale=1.0"> tells mobile browsers to set the viewport width to the actual physical screen width of the device (1:1 scale). Without this meta tag, mobile browsers assume a desktop monitor width (usually 980px) and render the website miniature and zoomed-out, requiring the user to pinch and zoom.
Key differences:
- Storage Capacity: Cookies are limited to 4 KB; Web Storage provides 5 MB to 10 MB per domain.
- Network Overhead: Cookies are automatically transmitted in every single HTTP request header, wasting bandwidth. Web Storage data is purely local and never sent over the network unless explicitly scripted.
- Persistence:
localStoragepersists indefinitely until cleared;sessionStorageexpires when the browser tab is closed; cookies expire based on their expiration timestamp.
Search engine crawlers rely on semantic markup to understand content relevance:
<title>and<meta name="description">define the search result snippet and click-through rates.<h1>through<h6>establish content hierarchy and keyword significance.<article>signals syndicatable main story content.<a href="...">descriptive anchor text provides link equity and PageRank distribution.- Open Graph meta tags power rich visual previews when shared across social networks.
6. BCA Practical Exam & Viva Preparation Checklist
Tips for University Practical & Viva Success
- Be precise with tag names and attributes: Examiners frequently test whether you know void vs. container tags, and exact attribute names (e.g.,
colspanvs.rowspan,srcvs.href). - Emphasize HTML5 modern standards: Avoid deprecated tags like
<font>,<center>,<marquee>, and<frame>; explain CSS3 alternatives instead. - Highlight Accessibility and Performance: Mentioning WCAG compliance, screen readers,
alttags, and Core Web Vitals (CLS) demonstrates professional industry competence.
You may also like this!
© Veewom.com. | Managed by PinePL
