Introduction

Hello, I’m Salman Ahmad, a teacher and web developer. In this lecture, we’ll explore the basics of HTML, the foundation of every website on the internet. Understanding how to use paragraphs, links, images, and lists in HTML is the first step towards creating meaningful and structured web pages. Whether you’re a school student just starting out or a beginner in web development, these elements will become the building blocks of everything you design online.

Think about it: when you read an article online, you see paragraphs of text, clickable links to more resources, images that make content engaging, and lists that break information into easy-to-read points. All of these are possible because of HTML tags. In this lesson, I’ll not only explain what each tag does but also show you best practices, real-world examples, and tips to avoid common mistakes. Let’s get started!

Paragraphs

Paragraphs are used in HTML to organize text into readable blocks. Each paragraph starts with <p> and ends with </p>.

Example Code:

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Output in Browser:

This is the first paragraph.

This is the second paragraph.

Why Are Paragraphs Important?

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]
  • They improve readability by separating ideas into sections.
  • Browsers automatically add some space before and after a paragraph for visual clarity.
  • Search engines analyze paragraphs to understand the context of content.

Best Practices for Paragraphs

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]
  • Use one main idea per paragraph.
  • Avoid making paragraphs too long; split them for better readability.
  • Combine with headings to give your text structure.

Links

Links allow us to jump to another webpage or another part of the same page. Links are created using the <a> tag. The href attribute tells the browser where the link goes.

Example Code:

<a href="https://www.example.com">Visit Example.com</a>

Types of Links

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]
  • External Links: Connect to outside websites.
  • Internal Links: Connect pages within the same website (e.g., about.html).
  • Email Links: Open the user’s default email app using mailto:.
  • Anchor Links: Jump to specific sections of the same page.

Best Practices for Links

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]
  • Use descriptive link text (e.g., “Read More about HTML” instead of “Click here”).
  • Always check that the link works and points to the correct page.
  • For external links, consider using target="_blank" to open in a new tab.

Images

Images make webpages more attractive and engaging. The <img> tag is used to insert images.

  • src attribute = file path (where the image is).
  • alt attribute = text description (for screen readers or if the image doesn’t load).

Example Code:

<img src="image.jpg" alt="A beautiful scenery">

Best Practices for Images

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]
  • Always use alt text for accessibility and SEO.
  • Compress images to reduce load time.
  • Use meaningful file names (e.g., html-example.png instead of img1.png).

Lists

Lists help organize information into clear, structured points. HTML provides two main types of lists: ordered lists and unordered lists. Each item in a list is placed inside an <li> (list item) tag.

Ordered List (Numbered List)

Created using <ol> tag. Each list item goes inside <li>.

<ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

Output in Browser:

  1. First Item
  2. Second Item
  3. Third Item

Unordered List (Bulleted List)

Created using <ul> tag. Each item goes inside <li>.

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

Output in Browser:

  • Apple
  • Banana
  • Mango

Best Practices for Lists

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]
  • Use ordered lists for steps, rankings, or sequences.
  • Use unordered lists for general collections without order.
  • Keep list items short and clear.

Quick Notes – HTML Basics

  • Paragraphs (<p>) – Used to display text in separate blocks. Example: <p>This is a paragraph.</p>
  • Links (<a>) – Used to connect web pages or resources. Syntax: <a href="URL">Text</a>
  • Images (<img>) – Used to insert images on a webpage. Syntax: <img src="image.jpg" alt="description"> (self-closing, no end tag).
  • Ordered List (<ol>) – Displays items in numbered order (1, 2, 3...). Useful for steps or rankings.
  • Unordered List (<ul>) – Displays items with bullets (•). Useful for lists without sequence.

Conclusion

HTML paragraphs, links, images, and lists form the backbone of web content. Without them, web pages would be plain and unstructured. By understanding how and when to use these elements, you can create user-friendly, visually appealing, and SEO-friendly websites. As you practice, try combining these elements together in small projects to strengthen your skills.

FAQs – HTML Basics

1. Can I use multiple paragraphs inside one <p> tag?

No. Each paragraph must be inside its own <p> tag. Nesting multiple paragraphs inside one tag is invalid HTML.

2. What happens if I don’t use alt text for an image?

If the image fails to load, the user will not know what the image represents. Screen readers for visually impaired users also rely on alt text. It is important for accessibility and SEO.

3. Can I style paragraphs, links, and lists with CSS?

Yes. CSS is used to change fonts, colors, sizes, spacing, and many other aspects of how these elements look on the webpage.

4. How many lists can I create inside one HTML page?

There’s no limit. You can create as many ordered or unordered lists as needed. Lists can even be nested inside each other.

5. What is the difference between relative and absolute links?

Relative links point to resources within your own site (e.g., about.html), while absolute links use the full URL (e.g., https://example.com/page.html).

MCQs – HTML Basics

  1. Which tag is used to create a paragraph in HTML?
    a) <para>
    b) <pg>
    c) <p>
    d) <text>

    Answer: c) <p>

  2. What does the browser automatically add before and after a paragraph?
    a) A line break only
    b) Space
    c) Bullet points
    d) Nothing

    Answer: b) Space

  3. Which tag is used to create a hyperlink in HTML?
    a) <link>
    b) <a>
    c) <href>
    d) <hyper>

    Answer: b) <a>

  4. What does the href attribute in the <a> tag define?
    a) Font size
    b) Background color
    c) Destination address of the link
    d) Title of the link

    Answer: c) Destination address of the link

  5. Which HTML tag is used to display an image?
    a) <picture>
    b) <src>
    c) <img>
    d) <image>

    Answer: c) <img>

  6. What is the purpose of the alt attribute in the <img> tag?
    a) To define the image width
    b) To add an alternative text description
    c) To set the image background
    d) To align the image

    Answer: b) To add an alternative text description

  7. Which of the following is TRUE about the <img> tag?
    a) It is a paired tag.
    b) It does not require a closing tag.
    c) It can only be used inside lists.
    d) It is used for creating links.

    Answer: b) It does not require a closing tag

  8. Which tag is used to create an ordered (numbered) list?
    a) <ul>
    b) <ol>
    c) <li>
    d) <list>

    Answer:Answer: b) <ol>