Skip to main content

Practical Exercise 1: Basic HTML Document

In this practical HTML exercise, we will learn how to create a basic HTML file with the minimum structure. We will add the !DOCTYPE tag at the beginning and the html, head, and body tags.

Objective​

Create a Basic HTML Document

Activity​

Create a basic HTML file with the minimum structure <!DOCTYPE html>, <html>, <head>, <body>.

Interactive Solution​

DivZone ad link Logo
AI PlatformTurn Code into Customers.Try it free

Solution with Complete HTML Code​

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Basic HTML Document</title>
  </head>
  <!-- This is an HTML comment -->
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Exercise Variants​

Once you understand the minimum structure, try these variants to reinforce what you've learned.

Variant 1: Adding lang and meta charset​

Every professional HTML document should declare the language and character encoding to avoid issues with special characters.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is a paragraph with special characters: ñ, ç, é, ü.</p>
  </body>
</html>
  • lang="en": tells the browser and search engines that the content is in English.
  • <meta charset="UTF-8" />: ensures that special characters display correctly.

Variant 2: Adding Explanatory Comments​

Comments are essential for documenting your code. They don't show in the browser but help understand what each section does.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Page with Comments</title>
  </head>
  <body>
    <!-- Main heading: there should only be one h1 per page -->
    <h1>Welcome to My Site</h1>

    <!-- Main content section -->
    <p>This is the main content of the page.</p>

    <!-- Footer with contact information -->
    <footer>
      <p>Contact: info@mysite.com</p>
    </footer>
  </body>
</html>

Mini-Challenge: Put It to the Test​

Create an HTML document that meets all of the following requirements:

  • Declare <!DOCTYPE html>
  • Include the lang="en" attribute and meta charset="UTF-8"
  • Its <title> should be "My First Page"
  • Include a comment <!-- Start of content --> before the body
  • Display an <h1> saying "Welcome" and a <p> with your name

Try to solve it without looking at the previous examples. When you're done, compare your solution with the code from Variant 1.

Common Mistakes When Creating an HTML Document​

MistakeWhy It's a Problem
Forgetting <!DOCTYPE html>The browser enters "quirks mode" and may render the page incorrectly
Not closing tags properlyCauses content to display in a disorganized or incorrectly nested way
Not including lang="en"Screen readers and search engines don't know the content language
Forgetting <meta charset="UTF-8" />Special characters display as strange symbols ()
Placing content outside <body>All visible content must go inside <body>, not between <head> or outside <html>

Frequently Asked Questions​

What happens if I don't include <!DOCTYPE html>?​

The browser enables compatibility mode (quirks mode), which emulates the behavior of older browsers. This can make your page look different across different browsers and cause some CSS properties to not work as expected. Always start your HTML documents with <!DOCTYPE html>.

Is HTML case-sensitive?​

No. HTML is not case-sensitive: <HTML>, <html>, and <Html> are equivalent. However, best practice conventions recommend always writing tags in lowercase (<html>, <body>, <p>) because it's more readable and consistent with XHTML and modern frameworks.

🚀 Practice with DivZone AI

Have you created your first HTML document? Take it to the next level: generate a complete web app with DivZone AI and analyze the automatically generated HTML code. You'll see how basic structure, headings, and much more are applied in a real project.

info

🔎 Check out the following sections for more information on this topic: