30 HTML Basic Exercises for Beginners with Solutions
Master beginner HTML skills with our comprehensive list of top 30 exercises. Dive into coding challenges that improve your understanding and proficiency in HTML, setting a solid foundation for intermediate challenges. Start your journey to HTML mastery today!
Learning Objectives:
By the end of these exercises, you will have a solid understanding of HTML basics, including structure, tags, text formatting, links, and images.
Exercise Instructions:
- Start with the first exercise and attempt to solve it before checking the hint or solution.
- Ensure you understand the logic behind each solution, as this will help you in more complex problems.
- Use these exercises to reinforce your learning and identify areas that may require further study.
1. Create a basic HTML document with a title "My First Webpage."
Required Input:
A basic HTML structure with a title.Expected Output:
The webpage displays a title "My First Webpage" in the browser tab.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
2. Add a header (<h1>) with the text "Welcome to My Webpage."
Required Input:
Header tag with specific text.Expected Output:
The webpage displays a large header with "Welcome to My Webpage."
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
3. Insert a paragraph (<p>) with any text describing yourself.
Required Input:
Paragraph with text content.Expected Output:
The webpage displays a paragraph with a brief self-description.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
4. Add a list (<ul>) of three favorite hobbies using list items (<li>).
Required Input:
An unordered list with three hobbies.Expected Output:
The webpage displays an unordered list with three items representing hobbies.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
5. Create a numbered list (<ol>) of three favorite movies using list items (<li>).
Required Input:
An ordered list with three movies.Expected Output:
The webpage displays a numbered list with three movie titles.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
6. Add an image (<img>) with any placeholder URL and an alt text "Placeholder Image."
Required Input:
An image tag with source and alt attributes.Expected Output:
The webpage displays an image with a placeholder if available.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
7. Create a link (<a>) that directs to "https://www.example.com" with the text "Visit Example."
Required Input:
A link with the href attribute.Expected Output:
The webpage displays a clickable link labeled "Visit Example" that opens the Example website.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
8. Add a horizontal line (<hr>) between sections of content.
Required Input:
A horizontal line separating two content sections.Expected Output:
The webpage displays a horizontal line dividing the sections.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
9. Create a new section with a subheader (<h2>) titled "About Me."
Required Input:
A subheader with specific text.Expected Output:
The webpage displays a section with a subheader titled "About Me."
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
10. Add a bolded phrase (<strong>) in a paragraph that emphasizes something you enjoy.
Required Input:
A paragraph with bolded text.Expected Output:
The webpage displays a paragraph with part of the text in bold to highlight something enjoyable.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
