HTML Structure: Practice Questions

Question 1

Count the elements in the HTML below.

<body>
    <h1>Groceries</h1>
    <ul>
        <li>apples</li>
        <li>bread</li>
        <li>milk</li>
    </ul>
    <p>Don't forget the <a href="list.html">full list</a>.</p>
</body>

  1. How many <li> elements are there?

  2. How many <ul> elements?

  3. How many <a> elements?

  4. How many <p> elements?

  5. How many <h1> elements?

Answer

  1. 3

  2. 1

  3. 1

  4. 1

  5. 1

Question 2

Use the HTML below to answer the questions about its structure.

<body>
    <div>
        <h1>Title</h1>
        <p>Some <a href="more.html">text</a> here.</p>
    </div>
</body>

  1. What is the parent element of the <h1>?

  2. What are the direct children of the <div>?

  3. What is the parent element of the <a>?

  4. Is the <a> a direct child of the <div>? Explain in a few words.

Answer

  1. the <div>

  2. the <h1> and the <p>

  3. the <p>

  4. No – the <a> is nested inside the <p>, so it is a descendant of the <div> but not a direct child of it.

Question 3

The HTML below has one invalid closing tag.

<body>
    <div>
        <p>The quick brown fox</p>
        <p>jumps over the lazy dog.</p>
    </p>
</body>

  1. Which line contains the bug?

  2. What exactly is wrong?

  3. Which tag should replace it?

Answer

  1. Line 5 – the closing </p> tag.

  2. The closing </p> does not match the opening <div> on line 2.

  3. </div>

Question 4

A student wants the word “very” bold and the word “important” both bold and italic, but the tags below are tangled. (<strong> makes text bold; <em> makes it italic.)

<p>This is <strong>very <em>important</strong> text</em>.</p>

  1. What is wrong with the way the tags are written?

  2. Mark or briefly describe the changes needed so the tags nest cleanly and the words have the intended formatting.

Answer

  1. The <strong> and <em> tags overlap instead of nesting: <em> opens inside <strong>, but </strong> closes before </em>, so the tags cross each other’s boundaries. Tags must nest, never overlap.

  2. Move </em> to immediately after “important”, before </strong>. Now <em> opens and closes entirely inside <strong>, and ” text” is outside both. Marking this move on the HTML also earns credit.

Question 5

Consider this image element.

<img src="beach.jpg">

  1. Which attribute – the one every <img> should have for accessibility – is missing?

  2. Why does that attribute matter? Give one concrete reason.

  3. Write just the missing attribute with a sensible value.

Answer

  1. the alt attribute

  2. alt text is read aloud by a screen reader for a blind reader, and it is shown if the image fails to load; it keeps the page usable by people who cannot see the image.

  3. alt=“a sandy beach at sunset” (any real, descriptive alt text)

Question 6

For each element below, state whether it belongs in the <head> or in the <body> of a page.

  1. <title>

  2. <h1>

  3. <p>

  4. <img>

  5. <ul>

Answer

  1. head

  2. body

  3. body

  4. body

  5. body

Question 7

Study the nested list below.

<ul>
    <li>fruit
        <ul>
            <li>apple</li>
            <li>banana</li>
        </ul>
    </li>
    <li>vegetable</li>
</ul>

  1. How many <ul> elements are there?

  2. How many <li> elements are there in total?

  3. Which list items are indented one level deeper, nested inside “fruit”?

  4. Is “vegetable” nested inside “fruit,” or is it a sibling of “fruit” in the outer list?

Answer

  1. 2

  2. 4 (fruit, apple, banana, vegetable)

  3. apple and banana

  4. It is a sibling of “fruit” in the outer list (it is not nested inside fruit).

Question 8

An attribute is written inside an opening tag as name="value". For each opening tag below, list every attribute’s name and its value separately.

<a href="https://rtealwitter.com">
<img src="cat.jpg" alt="a photo of my cat">
Answer

Tag 1 (<a>): name = href, value = https://rtealwitter.com Tag 2 (<img>): name = src, value = cat.jpg name = alt, value = a photo of my cat

Question 9

Consider this link.

<a href="https://cats.com">dogs</a>

  1. What text does the reader see and click on?

  2. Where does clicking the link actually send them?

  3. Which attribute controls the destination?

Answer

  1. dogs (the text between the tags)

  2. https://cats.com

  3. the href attribute (The visible text and the href destination are independent of each other.)

Question 10

Answer these questions about the parts of an element.

  1. In <p>Hello</p>, identify the three parts: the opening tag, the content, and the closing tag. Together, what is the whole thing called?

  2. For the paragraph shown, how are its opening and closing tags written differently?

  3. An <img> has no closing tag. Why not?

Answer

  1. opening tag = <p>, content = Hello, closing tag = </p>; together they form an ELEMENT.

  2. For this paragraph, the closing tag has a slash (/) before the tag name. More generally, an opening tag can also contain attributes, while a closing tag cannot.

  3. <img> is a void element: it cannot contain child content, so HTML defines it without a closing tag. Its attributes identify and describe the image to display.

Question 11

Answer these questions about the standard skeleton every HTML page starts from.

  1. What must the very first line of a modern HTML page be?

  2. The entire document nests inside one element. Which element?

  3. That element has exactly two children. Name both, in order.

  4. Does the first line from part (a) have a closing tag?

Answer

  1. <!DOCTYPE html>

  2. the <html> element

  3. <head> then <body>

  4. No – <!DOCTYPE html> is a declaration, not a normal element, so it has no closing tag.

Question 12

Use the complete page below.

<!DOCTYPE html>
<html>
    <head>
        <title>My Page</title>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>Hello.</p>
        <p>Goodbye.</p>
    </body>
</html>

  1. How many <p> elements are on the page?

  2. How many elements are direct children of the <html> element?

  3. Is the text “My Page” shown on the page itself? If not, where does it appear?

  4. Does <!DOCTYPE html> count as one of the elements?

Answer

  1. 2

  2. 2 (the <head> and the <body>)

  3. No – “My Page” is the <title>, which appears in the browser tab (and as the search-engine name), not in the visible page body.

  4. No – <!DOCTYPE html> is a declaration, not an element.

Question 13

A student moved a line into the wrong section of the skeleton.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Page</title>
        <h1>My First Page</h1>
    </head>
    <body>
        <p>Hello, world.</p>
    </body>
</html>

  1. Which element is in the wrong section, and where does it belong?

  2. The browser may still show the heading anyway. Why is putting it there still a mistake?

Answer

  1. The <h1> is inside the <head>, but it belongs in the <body>.

  2. The <head> is for information ABOUT the page, not for visible content. Putting an <h1> there tells the browser something false about the page; even though the browser is forgiving and may still render it, that “lie” starts to cost you once CSS and search engines enter the picture.