Module 2: Basic HTML Structure
Topic Introduction
Welcome to Module 2 of Web System and Technologies! In our previous lesson, we explored
the fascinating history of the web and the key technologies that power it. Now, it's time to
dive into the very foundation of every webpage you've ever seen: HTML, which stands for
HyperText Markup Language.
Think of HTML as the skeleton of a website. It provides the core structure and content, such
as headings, paragraphs, and images. Without this essential structure, a website would just
be a jumble of raw text. By the end of this module, you will have the skills to create your
very own basic HTML page from scratch, a crucial first step in your journey to becoming a
web developer.
Learning Objectives:
By the end of this module, you will be able to:
Define the purpose of HTML and its fundamental role in web development.
Identify and explain the core components of a basic HTML document, including the
doctype declaration, and the <html>, <head>, and <body> tags.
Construct a well-structured, valid HTML page using essential tags like <title>, <h1>,
and <p>.
Demonstrate an understanding of the relationship between HTML tags and their
content.
Detailed Content
To create a valid HTML page, you must follow a specific, required structure. This structure
ensures that web browsers can correctly interpret and display your content. Let's break
down the essential components of a basic HTML document, starting from the very first line
of code.
1. The <!DOCTYPE html> Declaration
The very first line of any HTML file is the <!DOCTYPE html> declaration. This isn't an HTML
tag itself, but rather an instruction to the web browser. It tells the browser that the
document it's about to read is an HTML5 document. This is a crucial step that ensures the
browser renders the page in a standard, modern way, avoiding older "quirks mode" that can
lead to rendering inconsistencies.
2. The <html> Element
Following the DOCTYPE declaration, the <html> tag serves as the root element of the
entire document. Every single piece of content and metadata on your webpage—from the
title in the browser tab to the text on the screen—must be nested within this opening
<html> and closing </html> tag pair. It's the ultimate container for all your code.
3. The <head> Element
The <head> element is an important part of the page that contains metadata—data about
the HTML document itself. The content of the <head> section is not directly visible on the
webpage. Instead, it provides essential information for the browser and search engines,
such as links to stylesheets, scripts, and the page's title.
The <title> Tag: One of the most important tags inside the <head> is the <title> tag.
The text placed within this tag is what appears on the browser tab or window title
bar. This title is also used when a user bookmarks your page and is a key factor for
search engine optimization (SEO), as it helps search engines understand the page's
content.
4. The <body> Element
The <body> element is where you place all the content that will be visible to the user in the
browser window. This includes everything from paragraphs and headings to images, links,
and forms. If a user can see it on the page, it belongs inside the <body> tags.
Basic Content Tags: Within the <body>, you'll use various tags to structure your
content. Heading tags, ranging from <h1> (most important) to <h6> (least
important), are used for titles and subtitles. The <p> tag is used to create a simple
paragraph of text.
Here is the complete structure of a basic HTML document, which you can use as a template
for your projects:
Example Problems & Solutions
Example 1: Creating a Simple "About Me" Page
Problem: Create an HTML file named about_me.html with a title of "About Me," a main
heading that says "My Name is [Your Name]," and a paragraph introducing yourself.
Solution:
Step-by-Step Explanation:
1. Start with the DOCTYPE and <html>: The first line, <!DOCTYPE html>, declares
the document type. The <html> tags then enclose the entire document.
2. Add the <head> Section: This section is for metadata. The <title> tag inside sets
the text "About Me" to appear on the browser's tab.
3. Create the <body> Section: This is the container for all visible content.
4. Add a Heading and Paragraph: An <h1> tag is used for the main heading, and a
<p> tag is used for the introductory paragraph.
Example 2: Fixing a Broken HTML Document
Problem: The following HTML code has several errors. Identify and correct them to create
a valid HTML document that displays "Hello, World!" on the page.
Solution:
Step-by-Step Explanation:
1. Missing DOCTYPE and <html>: The original code is missing the required <!
DOCTYPE html> declaration and the root <html> tag. These were added to create a
valid document.
2. Incorrect Tag Nesting: The <head> and <body> tags were incorrectly nested inside
a <p> tag. The correct structure requires that <head> and <body> are direct
children of the <html> tags.
Example 3: Adding Multiple Headings and Paragraphs
Problem: Create an HTML page for a short blog post. The page should have a title, a main
heading for the post title, a sub-heading for a section, and two paragraphs of text.
Solution:
Step-by-Step Explanation:
1. Set the Title: The <title> tag is used to set the page's title to "My First Blog Post."
2. Main Post Title and Paragraph: An <h1> tag is used for the main heading, followed
by a <p> tag for the first paragraph.
3. Sub-heading and Paragraph: An <h2> tag is used for the sub-section title, followed
by another <p> tag for the second paragraph. This demonstrates how to structure
content with varying levels of importance.
Individual Activities
1. Activity (Laboratory): Building Your First Webpage
Instructions:
Using a simple text editor (like Notepad, Visual Studio Code, or Sublime Text), create a new
file named my_profile.html. Write the HTML code to create a simple personal profile page.
Your page should include:
1. The correct DOCTYPE declaration and root <html> tags.
2. A <head> section with a <title> tag that says "My Profile".
3. A <body> section containing:
o An <h1> heading with your full name.
o A <p> paragraph about your hobbies or interests.
o A <p> paragraph about your favorite quote or motto.
Save the file and open it in a web browser (like Chrome, Firefox, or Edge) to see your
creation come to life!
