HTML Exercises 🎯

beginner
18 min

HTML Exercises 🎯

Welcome to the HTML Exercises lesson! This tutorial is designed to help you master HTML, the foundation of web development. Let's get started! 🚀

What is HTML? 📝

HTML (HyperText Markup Language) is the standard language for creating web pages. It defines the structure of a web page, allowing you to create text, links, images, and more.

Basic HTML Elements 💡

HTML Document Structure

Every HTML document starts with a <!DOCTYPE> declaration, followed by an <html> tag, which encloses the entire web page.

html
<!DOCTYPE html> <html> </html>

HTML Head and Body

The <head> section contains meta-information about the document, while the <body> section contains the visible content.

html
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

HTML Tags

HTML uses tags to define different parts of a web page. Each tag has an opening and closing tag. For example:

html
<h1>This is a heading</h1>

HTML Text Formatting 💡

Headings

Headings are used to organize content. There are six levels of headings, from <h1> (the largest) to <h6> (the smallest).

html
<h1>Heading Level 1</h1> <h2>Heading Level 2</h2> ... <h6>Heading Level 6</h6>

Paragraphs

Use the <p> tag to create paragraphs.

html
<p>This is a paragraph.</p>

Links

Create links using the <a> tag.

html
<a href="https://www.example.com">Link Text</a>

HTML Images 💡

Use the <img> tag to embed images in your web page.

html
<img src="image.jpg" alt="Image Description">

HTML Lists 💡

Ordered List

Use the <ol> tag for ordered lists. Each item in the list is a <li>.

html
<ol> <li>First item</li> <li>Second item</li> </ol>

Unordered List

Use the <ul> tag for unordered lists. Each item in the list is a <li>.

html
<ul> <li>First item</li> <li>Second item</li> </ul>

HTML Forms 💡

HTML forms allow users to interact with your web page. Use the <form> tag to create a form.

html
<form> <!-- Form elements go here --> </form>

HTML Quiz 💡

Question 1

What is the purpose of the <!DOCTYPE> declaration in HTML?

  1. It sets the character encoding for the HTML document
  2. It sets the HTML version for the HTML document
  3. It sets the color scheme for the HTML document
  4. It sets the font for the HTML document

Correct: B Explanation: The <!DOCTYPE> declaration specifies the Document Type Definition (DTD) for the HTML document, which helps to ensure that the document conforms to the HTML standard.

Question 2

What is the purpose of the <head> section in HTML?

  1. It contains the visible content of the web page
  2. It contains meta-information about the document
  3. It defines the structure of the web page
  4. It sets the character encoding for the HTML document

Correct: B Explanation: The <head> section contains meta-information about the HTML document, such as the title, style sheets, scripts, and more.

Question 3

What is the purpose of the <body> section in HTML?

  1. It contains the visible content of the web page
  2. It contains meta-information about the document
  3. It defines the structure of the web page
  4. It sets the character encoding for the HTML document

Correct: A Explanation: The <body> section contains the visible content of the web page, such as text, images, links, and more.

Question 4

What is the purpose of the <a> tag in HTML?

  1. It defines a hyperlink
  2. It defines a paragraph
  3. It defines a heading
  4. It defines an image

Correct: A Explanation: The <a> tag defines a hyperlink, which allows users to navigate to other web pages or resources.

Question 5

What is the purpose of the <img> tag in HTML?

  1. It defines a hyperlink
  2. It defines a paragraph
  3. It defines a heading
  4. It defines an image

Correct: D Explanation: The <img> tag defines an image in an HTML document.

Question 6

What is the purpose of the <ol> tag in HTML?

  1. It defines an ordered list
  2. It defines an unordered list
  3. It defines a paragraph
  4. It defines a heading

Correct: A Explanation: The <ol> tag defines an ordered list, which displays items in a numerical order.

Question 7

What is the purpose of the <ul> tag in HTML?

  1. It defines an ordered list
  2. It defines an unordered list
  3. It defines a paragraph
  4. It defines a heading

Correct: B Explanation: The <ul> tag defines an unordered list, which displays items in a bullet-point format.

Question 8

What is the purpose of the <form> tag in HTML?

  1. It defines a hyperlink
  2. It defines a paragraph
  3. It defines a heading
  4. It defines a form for user input

Correct: D Explanation: The <form> tag defines a form for user input, allowing users to interact with your web page.

Question 9

What is the purpose of the <h1> tag in HTML?

  1. It defines a heading of level 1
  2. It defines a paragraph
  3. It defines a form for user input
  4. It defines a hyperlink

Correct: A Explanation: The <h1> tag defines a heading of level 1, which is the largest heading level in HTML.

Question 10

What is the purpose of the <p> tag in HTML?

  1. It defines a paragraph
  2. It defines a heading
  3. It defines a form for user input
  4. It defines a hyperlink

Correct: A Explanation: The <p> tag defines a paragraph in an HTML document.