HTML Basics: 246 MCQs with answers

`<!DOCTYPE html>`

The `` declaration must be the very first line to tell the browser this is an HTML5 document and prevent quirks mode.

`<html>`

The `` element is the root container that wraps all content in an HTML document.

`<h1>`

The `` tag is a visible heading element that belongs in the ``, not in the ``.

The browser may render the page in quirks mode, breaking layouts.

A missing `` can cause browsers to fall back to quirks mode, where CSS behaves unpredictably and layouts may break.

To prevent a flash of unstyled content (FOUC).

Linking CSS in the `` allows the browser to start styling the page immediately, preventing a flash of unstyled content.

The page content may be delayed from rendering while the script loads.

Placing large `` tags in the `` blocks rendering of the `` content until the script is downloaded and executed, delaying visible content.

`lang`

The `lang` attribute (e.g., `lang="en"`) tells screen readers and search engines the language of the page, improving accessibility and SEO.

The `<head>` is placed inside the `<body>`, which is incorrect.

The `` and `` are siblings, both nested directly inside ``. Placing `` inside `` is structurally invalid.

False

The `` declaration is not an HTML tag; it is an instruction to the browser about the HTML version.

True

This is correct. They are at the same level within the `` root element.

False

CSS `` tags should be placed in the `` to prevent a flash of unstyled content; placing them in the `` is not a best practice.

False

A valid HTML document must contain exactly one `` element.

—

The `` declaration is required as the first line to tell the browser the document uses HTML5.

—

The `` element is the root container for the entire HTML document.

—

The `` section holds metadata that is not directly visible on the page.

—

The `lang` attribute (e.g., `lang="en"`) helps screen readers and search engines understand the page language.

—

This is a foundational concept; the declaration is an instruction, not a tag.

—

These are the essential parts of the HTML skeleton.

—

Everything else is nested inside this element.

—

The `` is for information about the page, not visible content.

—

The `` is where all visible elements go.

—

UTF-8 is the standard encoding for web pages.

—

These are unique structural elements that cannot be repeated.

—

They are at the same level within the root element.

`</p>`

A closing tag has a forward slash before the tag name: ``. The other options are either an opening tag, a self-closing variant, or incorrect syntax.

The closing tag has a forward slash before the tag name.

The closing tag is identical to the opening tag except it includes a forward slash (`/`) right before the tag name, like ``.

`<br>`

`` is a self-closing (void) element that creates a line break. The others require closing tags because they wrap content.

Accessibility, SEO, and code readability

Semantic HTML uses meaningful tags that help screen readers, search engines, and developers understand the structure and purpose of content.

`<ul><li>Item 1</li><li>Item 2</li></ul>`

The `` element contains `` elements. Each `` must have its own closing tag. Option B shows the correct nesting pattern.

`<nav>`

`` is the semantic tag specifically designed for navigation menus. Using `` would work visually but lacks semantic meaning.

The browser treats everything after as part of that paragraph until it finds a closing tag or the end of the document.

Browsers are forgiving with HTML errors. If a closing tag is missing, the browser will often continue the element until it encounters another opening tag or the document ends, causing unexpected layout issues.

`<strong>` has semantic meaning (importance), while `<b>` is purely stylistic.

`` conveys that the content is important (semantic), whereas `` only makes text bold without additional meaning. Modern HTML favors semantic tags for accessibility and SEO.

False

Self-closing tags (void elements) like `` and `` do not have a closing tag because they don't wrap content.

True

While HTML doesn't require lowercase, using lowercase (e.g., `` not ``) is the standard convention for consistency and readability.

True

Semantic tags help search engines understand the structure and importance of content, which can positively impact SEO.

False

`` is a self-closing (void) element. It does not have a closing tag. The image source is specified using attributes like `src`.

—

The term 'element' refers to the complete structure: opening tag + content + closing tag. A 'tag' alone is just the markup.

—

The `` (anchor) tag creates hyperlinks. It requires an `href` attribute to specify the destination URL.

—

Nesting creates a parent-child relationship between elements, which browsers use to understand the document hierarchy.

—

`` is the most important (top-level) heading, and `` is the least important. The importance decreases as the number goes up.

—

This is the foundational definition. The answer should mention angle brackets and the pair structure.

—

The key point is the forward slash in the closing tag.

—

The answer should clarify that an element is more than just a tag — it includes the content and closing tag.

—

The answer should explain that these tags are 'empty' and provide at least two correct examples.

—

The answer should mention that it's for paragraphs and is a block-level element.

—

The answer should explain the hierarchy and that importance decreases as the number increases.

—

The answer should mention hyperlinks and the `href` attribute.

—

The answer should mention embedding images, self-closing nature, and the `src` attribute.

—

The answer should distinguish between unordered and ordered lists and mention ``.

—

The answer should mention both the convention (lowercase) and the rule (case-insensitive).

HyperText Markup Language

HTML stands for HyperText Markup Language. 'HyperText' refers to linked documents, and 'Markup' means using tags to annotate content.

`<img>`

`` is self-closing; it does not require a separate closing tag. Tags like ``, ``, and `` need a closing tag.

It does not support variables, loops, or conditional logic.

HTML is a markup language, not a programming language. It lacks programming constructs like variables, loops, and conditionals. It is declarative, describing content structure.

To provide alternative text for accessibility and SEO

The `alt` attribute provides a text description of the image. It is used by screen readers for accessibility and by search engines for indexing.

`<html>`

The `` element is the root element that wraps all content on the page. It contains `` and `` as child elements.

Using HTML tags that convey the meaning of content

Semantic HTML uses tags that describe the meaning of the content (e.g., ``, ``, ``). This improves accessibility and SEO.

`<img src='photo.jpg'>`

The correct tag for an image is ``, and the attribute for the file path is `src`. The `href` attribute is used for links (``).

It allows the same HTML to be styled differently for different devices.

Separation of concerns allows the same HTML content to be presented in different ways (e.g., desktop vs. mobile) by swapping CSS files, improving maintainability and accessibility.

False

HTML is a markup language, not a programming language. It cannot perform logic or calculations.

False

The `` element contains metadata (like the title and links to stylesheets), not visible content. The visible content goes in the `` element.

True

Search engines use HTML structure to index content. Semantic tags like ``, ``, and `` help search engines understand the page's content and rank it appropriately.

False

`` is a self-closing tag and does not need a separate closing tag. It is used to insert a line break.

—

Tags are the core of HTML. They are keywords enclosed in angle brackets (e.g., ``, ``) that tell the browser how to structure content.

—

The `alt` attribute provides alternative text that screen readers read aloud and search engines use to understand the image content.

—

The DOM is a tree-like representation of the HTML document that browsers and JavaScript use to interact with the page.

—

CSS (Cascading Style Sheets) handles colors, fonts, layout, and other visual aspects, while HTML focuses on content structure.

—

Full marks for stating the full form correctly.

—

Full marks for stating it is not a programming language and giving a reason (no logic/calculations).

—

Full marks for describing both tags and noting the forward slash in the closing tag.

—

Full marks for naming two correct self-closing tags (e.g., ``, ``, ``, ``).

—

Full marks for mentioning both accessibility and SEO benefits.

—

Full marks for naming both `` and `` with brief descriptions.

—

Full marks for stating it creates a link.

—

Full marks for mentioning metadata and that it is not visible on the page.

—

Full marks for explaining linking between documents.

`<h1>`

`` is the most important heading tag, used for the main title of the page. `` is the least important, and `` and `` are not valid heading tags.

A paragraph of text

The `` tag defines a paragraph, a block-level element for text content. Page titles use ``, hyperlinks use ``, and images use ``.

Exactly one

Best practice is to use exactly one `` per page to clearly indicate the main topic. Multiple `` tags can confuse search engines and screen readers.

It breaks the logical hierarchy for screen readers

Skipping heading levels disrupts the logical structure that screen readers rely on for navigation. While HTML allows it technically, it harms accessibility and user experience.

`<h2>Section Title</h2><p>Content here.</p>`

The correct structure uses a heading tag (``) followed by a paragraph (``) as separate block-level elements. Nesting a heading inside a paragraph or using a heading for content is incorrect.

To provide structural hierarchy and meaning

Headings define the structural hierarchy of content, helping both users and assistive technologies understand the organization. Visual styling should be handled by CSS, not headings.

A heading level was skipped, breaking hierarchy

Going from `` to `` skips ``, which breaks the logical heading hierarchy. This can confuse screen readers and reduce accessibility.

To understand the topic and structure of content

Search engines analyze heading tags to grasp the main topics and subtopics of a page, which influences search rankings. They do not use headings for speed, images, or spelling.

True

Browsers apply default margins to `` elements, creating visual spacing between paragraphs for readability.

False

While technically allowed, using multiple `` tags is not best practice as it dilutes the main topic and can confuse search engines and screen readers.

False

Headings are for structural hierarchy, not visual styling. Use CSS for font size and appearance.

True

Proper use of headings and paragraphs enhances readability for users, aids screen reader navigation, and helps search engines understand content, benefiting both accessibility and SEO.

—

`` is the least important heading in the hierarchy, used for the deepest level of subsections.

—

The `` tag is used to define a paragraph, a block-level element for text content.

—

Screen readers rely on the heading hierarchy to navigate content; skipping levels disrupts this structure.

—

CSS (Cascading Style Sheets) is used for styling, such as font size, while headings are reserved for structural meaning.

—

This is a foundational recall question about the heading tag range.

—

Tests understanding of the paragraph tag and its default rendering.

—

Reinforces the best practice of a single main heading.

—

Highlights a key difference between headings and paragraphs.

—

Reinforces that multiple `` tags are acceptable.

—

Covers the usage of lower-level headings.

—

Clarifies the relationship between headings and paragraphs.

—

Tests the core purpose of headings.

`<form>`

The `` element is the container that groups input fields and handles submission. The `` tag is used for individual fields, not for grouping.

`type`

The `type` attribute (e.g., text, password, email) defines how the input looks and behaves. The `name` attribute identifies the data, but does not control appearance.

The input's value is ignored on submission.

Without a `name` attribute, the input's value is not included in the form data when submitted. The form still submits, but the server never receives that field's data.

`type="submit"`

`` creates a button that submits the form. `type="button"` does nothing without JavaScript, and `type="reset"` clears the form.

Nothing happens; the button does nothing without JavaScript.

`type="button"` creates a generic button that does not submit the form. It requires JavaScript to add functionality. This is a common mistake.

`type="email"`

`type="email"` validates that the input looks like an email address and often brings up a keyboard with an '@' symbol on mobile devices.

Checkboxes allow multiple selections; radio buttons allow only one.

Checkboxes let users select multiple options, while radio buttons restrict selection to one option within a group. Both require a `name` attribute to submit data.

A submit button

Without a submit button (``), the user has no way to submit the form. While a `name` attribute is also needed for data to be sent, the immediate issue is the lack of a submission mechanism.

False

The `` element is an invisible container that groups inputs and controls submission. It does not have any visual appearance unless styled with CSS.

False

The `name` attribute is essential for the input's value to be included in the form data. Without it, the value is ignored on submission.

True

The `number` type limits input to numbers and provides a numeric keypad on mobile, making data entry easier.

False

`type="button"` creates a generic button that does not submit the form. It requires JavaScript to perform any action.

—

The `type` attribute controls the behavior and appearance of the input field.

—

The `password` type hides the characters as the user types for security.

—

A submit button triggers the form submission. Without it, the user has no way to send the data.

—

The `name` attribute acts as a key for the input's value in the form data. Without it, the value is ignored.

—

It acts as a wrapper for inputs and defines how data is sent.

—

Any three of these are acceptable.

—

It labels the data for the server.

—

The password type hides the characters.

—

It ensures only numbers are entered.

—

It is a container, not a visual element.

—

Any two valid examples are acceptable.

—

The name attribute identifies the data.

—

It helps both users and search engines identify the page.

—

This allows the browser to start styling the page immediately.

—

This prevents JavaScript from blocking the rendering of the page.

—

It is an older, stricter mode that can break modern CSS layouts.

—

For example, `` indicates English.

—

These tags belong in the `` section.

—

This order affects performance and resource loading.

The browser may enter quirks mode, causing unpredictable CSS rendering.

Without ``, browsers may fall back to quirks mode, an older rendering mode that can break CSS layouts. The page still loads, but styling may be inconsistent. The `` and `lang` attribute remain functional.

The `<head>` element is incorrectly placed inside the `<body>` element.

In a valid HTML document, `` and `` are siblings nested directly inside ``. Here, `` is placed inside ``, which violates the standard structure. The `` tag is correctly self-closing, the `lang` attribute is optional, and `` can be a direct child of ``.

At the end of the `<body>` section, so the page content renders before the script downloads and executes.

Placing `` at the end of `` is a best practice because the browser processes HTML top-to-bottom. This allows the visible content to load first, preventing a blank screen while the JavaScript downloads. Inside ``, a large script would block rendering until it finishes.

The `<head>` and `<body>` elements are siblings, both nested directly inside the `<html>` element.

In the standard HTML document structure, `` and `` are sibling elements, both directly inside the root `` element. The `` contains metadata and appears before ``, which holds visible content. They are not nested within each other.

The `<link>` tag for the CSS stylesheet is placed inside the `<body>` section instead of the `<head>`.

Placing `` for CSS in the `` allows the browser to load styles before rendering the ``. If the `` is in the ``, the browser may start rendering content without styles, causing a flash of unstyled content (FOUC). Missing `` causes quirks mode, not FOUC; `` placement affects the tab title, not styling; and `lang` affects…

—

The answer should explain the parent-child relationship and give a concrete example.

—

The answer should define semantic HTML and mention its benefits.

—

The answer should connect semantic tags to assistive technology use.

—

The answer should explain the practical consequence, not just that it's 'wrong'.

—

The answer should mention the DOM tree and parent-child relationships.

The `<strong>` element is a child of the `<p>` element, and the `<p>` element is a child of the `<article>` element.

In the nested structure, `` is inside ``, so it is a child of ``. The `` itself is inside ``, making it a child of ``. The correct option accurately describes this parent-child chain.

The `<nav>` tag provides semantic meaning that helps screen readers identify the navigation region, improving accessibility.

Semantic HTML tags like `` convey meaning about the content they wrap. Screen readers and other assistive technologies can use this information to help users navigate the page, which is a key accessibility benefit. A `` has no semantic meaning.

The browser will treat the text 'First paragraph' as a paragraph, and then treat 'Second paragraph' as a separate paragraph, but the first paragraph may incorrectly include subsequent content.

Browsers are forgiving with missing closing tags, but they may not close them exactly where intended. In this case, the first `` has no closing tag, so the browser might implicitly close it when it encounters the second ``, but the exact behavior can vary and may lead to unexpected nesting or styling issues. The correc…

```html <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> </ul> ```

The correct structure is to add a new `` element inside the ``, and the `` must have a proper closing tag ``. The first option shows exactly that. The second option has an extra `` that doesn't match any opening tag. The third option incorrectly closes the `` inside the last ``. The fourth option is a duplicate of the…

The `<strong>` tag conveys semantic importance, whereas `<b>` is a presentational tag with no semantic meaning.

In modern HTML, `` indicates that its content has strong importance, which is semantic. The `` tag is a presentational element that only makes text bold without adding meaning. Therefore, `` is preferred for accessibility and SEO.

—

Full marks for describing it as a tree structure and mentioning its use by browsers/scripts.

—

Full marks for explaining that tags describe meaning, not just appearance.

—

Full marks for mentioning separation of concerns and CSS.

—

Full marks for mentioning semantic tags and assistive technologies.

—

Full marks for clearly distinguishing structure (HTML) from presentation (CSS).

—

Full marks for listing three valid uses (e.g., email, mobile apps, e-books, documents).

The `<li>` elements are nested inside the `<ul>`, making them child nodes of the `<ul>` in the DOM.

In HTML, nesting creates a parent-child relationship. The `` is the parent element, and each `` is a child element nested inside it. This hierarchical structure is reflected in the Document Object Model (DOM).

HTML uses tags to annotate and describe the structure of content, but it lacks logic constructs like loops and conditionals.

HTML is purely declarative: it marks up content to define its meaning (e.g., headings, paragraphs). It does not include programming constructs such as variables, loops, or conditionals, which are essential for a language to be considered a programming language.

The `alt` attribute provides a text alternative for screen readers and helps search engines understand the image content.

The `alt` attribute supplies a textual description of an image. Screen readers use it to convey the image's content to visually impaired users, and search engines rely on it to index the image properly, improving both accessibility and SEO.

Approach A uses semantic HTML, which improves accessibility for screen readers and helps search engines understand the page structure.

Using `` is semantic HTML: it conveys the meaning that the content is a top-level heading. Screen readers can navigate by headings, and search engines use headings to infer content hierarchy. Approach B uses a generic `` with inline styles, which provides no semantic meaning and is less accessible.

Separation of concerns makes code cleaner, easier to maintain, and improves accessibility by keeping semantic meaning intact.

Separating HTML structure (using semantic tags like ``, ``) from CSS presentation (controlling colors, fonts, layout) follows the principle of separation of concerns. This approach results in cleaner, more maintainable code, and ensures that HTML retains its semantic meaning for accessibility and SEO, while CSS handles…

—

Focuses on the accessibility impact of skipping levels.

—

Connects heading usage to assistive technology.

—

Explains the SEO benefit of proper heading use.

—

Clarifies the separation of structure and style.

—

Tests understanding of block-level element rules.

—

Explains the negative consequences of misuse.

—

Tests the combined role of both elements.

The `<h3>` tag is a subsection of the first `<h2>` tag ("About Me").

In HTML heading hierarchy, `` represents a subsection under the nearest preceding `` tag. Here, "My Skills" appears after "About Me" and its content, so it is a sub-topic of "About Me." The second `` ("Contact") comes later, so the `` is not under it.

The snippet lacks an `<h1>` tag to define the page's main topic.

Best practice recommends using exactly one `` tag per page to represent the main title or topic. This snippet starts with a paragraph and then uses `` and `` tags, but no `` tag, which breaks the logical heading hierarchy and can confuse both users and search engines about the page's primary subject.

Because heading levels should not be skipped (from `<h2>` to `<h4>`).

Skipping heading levels (e.g., from `` directly to ``) breaks the logical document outline. It confuses screen readers that rely on heading hierarchy for navigation and can mislead search engines about the structure of the content. The correct approach would be to use `` for the subsection.

Screen readers use heading tags to create a navigable outline of the page, allowing users to jump between sections, while paragraphs provide the detailed content.

Screen readers rely on the semantic structure of HTML. Heading tags (`` to ``) create a hierarchical outline that users can navigate by jumping from heading to heading. Paragraphs contain the text content that is read in order. Together, they provide a clear, accessible structure that allows users with visual impairmen…

Use `<h1>` for the main heading and `<h2>` for the subheading, then use CSS (`font-size`) to adjust the visual size of the `<h2>`.

Headings should reflect the logical hierarchy of content, not visual appearance. The correct structure is to use `` for the main heading and `` for the subheading (since it is a subsection). Then, CSS can be used to adjust the font size of the `` to make it appear smaller if desired. This preserves the semantic meaning…

—

The keyboard adapts to the input type.

—

Submit triggers form submission; button is inert.

—

A submit button is essential for sending data.

—

The name attribute is the key for the data.

—

Checkboxes are for multiple choices; radio buttons are for single choice.

—

The button type is often confused with submit.

—

The email type improves usability and data quality.

The `<form>` element is missing an `action` attribute.

Without an `action` attribute, the form still submits (often to the current page), but the server may not process it as expected. However, the most likely reason the server receives *no* data is that the form's submission target is undefined or the form is not properly configured to send data. In many browsers, a missi…

`color=blue`

Radio buttons with the same `name` attribute form a group where only one can be selected at a time. When a radio button is selected and the form is submitted, only the selected radio button's `name=value` pair is sent. Here, `name="color"` and `value="blue"` for the selected option, so the server receives `color=blue`.…

Nothing happens unless JavaScript is attached to the button.

`` creates a generic button that does not have any default behavior. It does not submit the form or reset it. To make it perform an action, you must attach JavaScript (e.g., an `onclick` handler). In contrast, `` automatically submits the form when clicked. Therefore, without JavaScript, clicking this button does nothi…

It displays a keyboard optimized for email entry, including the '@' symbol and a '.com' key.

On mobile devices, `type="email"` triggers a specialized keyboard that includes keys commonly used in email addresses, such as the '@' symbol and often a '.com' key, making it easier and faster for users to type their email. It does not automatically submit the form, it does not fully prevent typos (though basic valida…

No data related to the checkbox is sent.

Checkboxes only send their name-value pair to the server when they are checked. If the checkbox is unchecked, it is not included in the form submission data at all. Therefore, when the user submits the form without checking the box, the server receives no data for the `subscribe` field. The other options are incorrect…

Move the `<script>` tag to the end of the `<body>`, just before `</body>`.

By default, a `` tag in the `` blocks HTML parsing and rendering until it is downloaded and executed. Moving the `` to the end of the `` ensures that the browser parses and renders the visible content (the `` and ``) before fetching and running the script, so users see content sooner. The `defer` attribute also works,…

The document is actually valid; the validator is incorrect.

The document is structurally valid HTML5. The `` element is allowed inside the `` (and optionally in the `` with scoped styles, but that's a different feature). The `` in the `` can modify the `` via the DOM; this does not violate HTML syntax. The `lang` attribute is recommended for accessibility but is not required fo…

Replace the DOCTYPE with `<!DOCTYPE html>` and add `<meta charset="UTF-8">` in the `<head>`.

The existing DOCTYPE triggers **quirks mode** or **almost standards mode** in older browsers, causing inconsistent rendering. To get consistent HTML5 standards mode, the DOCTYPE must be `` (case-insensitive). Adding `` is a best practice for character encoding. Adding a second DOCTYPE is invalid; only one DOCTYPE is al…

The `<head>` element is placed inside the `<body>`, so the browser ignores the `<title>` and `<link>` tags because they are not in the document's `<head>`.

In valid HTML, the `` element must be a direct child of `` and must appear before the ``. When the browser encounters `` inside ``, it does not treat it as the document's head; instead, it is parsed as an unknown element in the body. Consequently, the `` and `` are not recognized as metadata, so the title is empty and…

Change the `lang` attribute to `lang="es"` on the `<html>` tag and update the `<title>` and `<p>` content to Spanish.

The `lang` attribute on the `` element tells the browser and assistive technologies (like screen readers) the primary language of the document. For a Spanish page, `lang="es"` is required. However, the content (title and body text) must also be in Spanish; otherwise, the page would be marked as Spanish but display Engl…

The `<strong>` element is a child of the `<p>` element, and the `<p>` element is a child of the `<article>` element.

In the snippet, `` is placed inside the `` element, meaning the `` is the direct parent of ``. The `` is the parent of `` and ``, so `` is a child of `` and a grandchild of ``. Option B correctly identifies this parent-child relationship.

Both paragraphs are displayed correctly because browsers automatically add closing tags for `<p>` elements.

Browsers are forgiving with HTML errors. When a `` tag is opened without a closing tag, the browser implicitly closes it when it encounters the next block-level element (like another ``). Thus, both paragraphs are displayed correctly, though the first `` is technically unclosed. Option A accurately describes this behav…

`<strong>` adds semantic importance to the enclosed text, while `<b>` only applies bold styling without conveying importance.

In modern HTML, `` indicates strong importance or urgency (semantic), whereas `` is a presentational element that draws attention without adding semantic weight. Option B correctly captures this distinction.

```html <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> </ul> ```

All options appear identical in the JSON, but the correct answer is the one that adds a new `` element inside the ``, properly nested after the existing `` items. Option A (the first) is the correct representation of adding a third list item with proper nesting.

The `<nav>` tag provides semantic meaning, improving accessibility for screen readers and aiding search engines in understanding the page structure.

Semantic HTML tags like `` convey meaning about the content they enclose. Screen readers can announce a navigation landmark, and search engines can better index the site. A `` with a class provides no such semantic information. Option B correctly highlights these benefits.

The `<img>` element is a child of the `<article>` element, and the `<article>` element is a descendant of the `<body>` element.

In the DOM tree, `` is a direct child of ``, and `` is a direct child of ``, making `` a child of `` and `` a descendant of ``. The other options incorrectly describe the hierarchical relationships.

Using `<nav>` improves accessibility by allowing screen readers to identify the navigation region, and improves SEO by helping search engines understand the page structure.

Semantic elements like `` provide meaningful structure that assistive technologies use to navigate content (e.g., jumping to navigation), and search engines use to better index the page. The other options incorrectly claim negative or neutral effects.

Approach A is better because it uses a heading tag, which provides semantic meaning for accessibility and SEO, while Approach B uses a generic `<div>` that lacks semantic structure.

Using `` provides semantic meaning (it is a top-level heading), which helps screen readers navigate and search engines understand content hierarchy. A `` has no semantic meaning, making Approach B less accessible and SEO-friendly, even if both look similar with inline styles.

The claim is incorrect because `<span>` is an inline element by default, regardless of its parent; nesting does not change its display type.

The `` element is an inline element by default in HTML. Nesting it inside a block-level element like `` does not change its display type; it remains inline. The other options incorrectly describe `` or the effect of nesting.

The `<h1>` and `<p>` elements may have inconsistent styling across email clients, and the `<img>` might not display if images are blocked, but the `alt` attribute provides a fallback.

Email clients often have limited CSS support, so headings and paragraphs may appear differently. Images may be blocked by default, but the `alt` attribute provides descriptive text. Hyperlinks are widely supported in email. The `` and `` tags are standard and generally safe.

The heading hierarchy is broken because `<h4>` is used directly under `<h2>`, skipping `<h3>`.

The heading hierarchy requires that levels are not skipped. Using `` directly after `` skips ``, breaking the logical structure for screen readers and SEO. The correct approach would be to use `` under `` before using ``.

Use `<h4>Technologies Used</h4>` directly after the `<h3>Project A</h3>`.

Since "Technologies Used" is a sub-subsection under "Project A" (which is an ``), the next logical level is ``. Using `` would break the hierarchy by jumping up a level, using `` would imply it is at the same level as "Project A", and using a paragraph with bold loses the semantic meaning of a heading.

`<h3>Accessories</h3><p>Chargers, cases, etc.</p>`

Since "Accessories" is a subsection under "Electronics" (which is an ``), it should be at the `` level, matching "Laptops" and "Phones". Using `` would make it a top-level section, `` would incorrectly subordinate it, and a paragraph with bold loses semantic meaning.

The structure is correct because `<h3>` is properly nested under `<h2>` and the hierarchy is maintained, even though not all `<h2>` sections have `<h3>` subsections.

The heading hierarchy is maintained: `` is followed by `` for each tip, and `` is used appropriately as a subsection under "Tip 2". It is not required that every `` have an ``; headings only need to reflect the content structure. The hierarchy is not broken because levels are not skipped.

The code has two issues: heading levels are skipped (from `<h2>` to `<h4>` under "Fiction") and the hierarchy is inconsistent because `<h3>` is used under "Non-Fiction" while `<h4>` is used under "Fiction".

Under "Fiction" (an ``), the next logical level should be ``, but the student used ``, skipping ``. Additionally, under "Non-Fiction" (also an ``), the student correctly used ``, creating inconsistency. Both issues break proper heading hierarchy and confuse assistive technologies.