CS: Introduction to HTML: Tags and Structure
Building web pages with elements, nesting, and basic page structure
CS: Introduction to HTML: Tags and Structure
Building web pages with elements, nesting, and basic page structure
CS - Grade 6-8
- 1
In your own words, explain what an HTML tag is. Give one example of an opening tag and one example of a closing tag.
Most closing tags look like the opening tag but include a slash.
An HTML tag is a marker that tells the browser how to structure or display content. An example of an opening tag is <p>, and an example of a closing tag is </p>. - 2
Write the HTML element that would display this sentence as a paragraph: My favorite website teaches science and math.
The correct HTML element is <p>My favorite website teaches science and math.</p>. The <p> tag marks the sentence as a paragraph. - 3
Label each part of this HTML element: <h1>My First Web Page</h1>. Identify the opening tag, content, and closing tag.
The content is the text between the two tags.
The opening tag is <h1>. The content is My First Web Page. The closing tag is </h1>. - 4
Write a basic HTML document structure that includes <!DOCTYPE html>, <html>, <head>, <title>, and <body>. Use the title My Page and include one paragraph in the body.
The title goes inside the head, and the visible paragraph goes inside the body.
A correct answer is <!DOCTYPE html><html><head><title>My Page</title></head><body><p>This is my page.</p></body></html>. The document includes the required document type, root element, head, title, and body. - 5
What is the purpose of the <body> section in an HTML document?
The <body> section contains the content that appears on the web page, such as headings, paragraphs, images, links, and lists. - 6
What is the purpose of the <head> section in an HTML document?
Think about information the browser needs before showing the page.
The <head> section contains information about the page, such as the title shown in the browser tab and other page settings. Most content in the head is not displayed directly on the page. - 7
Fix the HTML so the tags are properly closed: <p>Welcome to coding
The fixed HTML is <p>Welcome to coding</p>. The paragraph needs a closing </p> tag. - 8
Fix the nesting problem in this HTML: <p>I like <strong>HTML</p></strong>
Close the inside tag before closing the outside tag.
The fixed HTML is <p>I like <strong>HTML</strong></p>. The <strong> tag must be closed before the paragraph tag because it was opened inside the paragraph. - 9
Write the HTML for an unordered list with three items: apples, bananas, and oranges.
A correct answer is <ul><li>apples</li><li>bananas</li><li>oranges</li></ul>. The <ul> tag creates the list, and each <li> tag creates a list item. - 10
Write an HTML link that displays the words Visit LivePhysics and goes to https://www.livephysics.com.
The web address goes inside the href attribute.
The correct link is <a href="https://www.livephysics.com">Visit LivePhysics</a>. The href attribute tells the browser where the link should go. - 11
In this image tag, identify the tag name and two attributes: <img src="cat.jpg" alt="A gray cat sleeping">.
The tag name is img. The two attributes are src and alt. The src attribute gives the image file, and the alt attribute describes the image. - 12
Look at this structure: <html><head><title>Pets</title></head><body><h1>All About Pets</h1><p>Pets need care.</p></body></html>. Which part would be visible on the web page?
Content inside the body is what users usually see on the page.
The visible part on the web page would be the heading All About Pets and the paragraph Pets need care. The title Pets appears in the browser tab, not in the main page content. - 13
Choose the best tag for the largest main heading on a page and explain your choice: <p>, <h1>, or <li>.
The best tag is <h1> because it marks the largest and most important heading on a page. The <p> tag is for paragraphs, and the <li> tag is for list items. - 14
Create a small HTML body section with a heading that says Space Facts and a paragraph that says The Moon orbits Earth.
Use <h1> for the heading and <p> for the paragraph.
A correct answer is <body><h1>Space Facts</h1><p>The Moon orbits Earth.</p></body>. The heading and paragraph are both placed inside the body section. - 15
Find and explain two mistakes in this HTML: <html><head><title>Games</head></title><body><h1>Fun Games</h1></body></html>
Check whether tags are closed in the reverse order from how they were opened.
One mistake is that the title tag is closed in the wrong order. It should be <title>Games</title> before closing the head. Another mistake is that </head> should come after the title closes. A fixed version is <html><head><title>Games</title></head><body><h1>Fun Games</h1></body></html>.