Lesson Plan: The HTML Paragraph Tag (< p >)

Objective:

By the end of the lesson, students should understand the usage and purpose of the

(paragraph) tag in HTML. They should be able to create paragraphs in HTML, understand the default behavior of the

tag in browsers, and modify paragraph spacing using CSS.

1. Introduction to HTML Paragraph Tag (< p >)

• Purpose: Explain that the (< p >)
  tag is used to define a paragraph in HTML, and it is one of the most common tags for structuring text on a webpage.
• Key Concepts:
  • Paragraphs help to separate content visually and structurally on a webpage.
  • Browsers automatically add space (margin) before and after paragraphs to improve readability.
  • The default spacing can be changed with CSS.

Example Explanation:

• In this example, “Hello World!” is grouped inside a paragraph tag.

Classroom Activity:

• Ask students to write a simple HTML file that uses the paragraph tag:

• 2. Syntax of the Paragraph Tag

  • Opening Tag:
    

    (< p >)

  • Closing Tag:
    

    (<  / p >)

  Example:

Activity:

• Provide another example where students write two or more paragraphs:

3. Default Browser Behavior

• Automatic Spacing: Browsers automatically add a margin above and below each paragraph.
• Example:

• Explanation: Notice the space between the two paragraphs.

Activity:

• Ask students to open the browser and observe the spacing behavior when they write multiple paragraphs.

4. Modifying Paragraph Spacing with CSS

• Introduce the margin property in CSS to change paragraph spacing.

Example:

Activity:

• Have students change the margin value and observe the effect on paragraph spacing in the browser.

5. Default CSS Styles for the <p> Tag

• Example of Default Values:

• Explanation: Most browsers apply a default margin of around 1em to the top and bottom of each paragraph.

6. Practical Examples

Example 1:

• • Explanation: Each paragraph is separated automatically by the browser’s default margins.

  Example 2 (No Space Between Paragraphs):

• Explanation: Here, the margin is set to 0, so there will be no space between paragraphs.

7. Challenge Exercise

• Goal: Have students create a webpage with multiple paragraphs and modify the margins using CSS.

Instructions:

• Create three paragraphs with different text content.
• Use CSS to:
  • Add more space above the first paragraph.
  • Reduce the space between the second and third paragraphs.

Example Output:

8. Conclusion & Q&A

• Recap: Summarize how the <p> tag works, the default browser behavior, and how CSS can be used to modify the spacing between paragraphs.
• Q&A: Open the floor for any questions or clarifications from students.

Homework:

• Create a personal webpage with at least four paragraphs describing a topic of interest. Use CSS to modify the paragraph margins to your liking.

HTML Paragraphs – Videos

Related Videos:

Related Posts:

Python Glossary

What is the default value for Boolean variable in VB.NET?

Building a web page with HTML tags

What is Python?

Creating borders and space with CSS