Lists, Links & Images
Lists organize information, links connect webpages, and images make pages visually meaningful. These three features are used in almost every real website.
Lists
Create steps, syllabus, features, menus and grouped content.
Links
Connect pages, websites, emails, phone numbers and page sections.
Images
Add logos, banners, photos, galleries and visual examples.
Alt Text
Make images meaningful for accessibility and SEO.
After This Chapter, You Will Understand
This chapter helps you create practical website content and page navigation.
Lists
Create ordered, unordered and description lists.
Links
Create internal, external, email, phone and jump links.
Images
Add images using src, alt, width and height attributes.
Paths
Understand basic file paths for images and pages.
Ordered, Unordered and Description Lists
Lists help present content in a clean and readable way.
1 Unordered List
Use unordered lists when order is not important.
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
2 Ordered List
Use ordered lists when sequence or steps matter.
<li>Create folder</li>
<li>Create index.html</li>
<li>Open in browser</li>
</ol>
3 Description List
Use description lists for terms and explanations.
<dt>HTML</dt>
<dd>Structure of webpage</dd>
</dl>
Hyperlinks Using Anchor Tag
The anchor tag connects one page to another page, website, email, phone number or section.
4 Anchor Tag
The <a> tag is used to create hyperlinks. The most important attribute is href, which defines the link destination.
| Link Type | Code Example | Use |
|---|---|---|
| Internal Page Link | <a href="about.html">About</a> | Links to another page in same website. |
| External Website Link | <a href="https://aicpe.biz">AICPE</a> | Links to another website. |
| New Tab Link | <a href="https://aicpe.biz" target="_blank">Open</a> | Opens link in new browser tab. |
| Email Link | <a href="mailto:info@example.com">Email</a> | Opens email application. |
| Phone Link | <a href="tel:8421756789">Call</a> | Starts call on supported devices. |
| Jump Link | <a href="#contact">Contact</a> | Jumps to a section on same page. |
Adding Images with img Tag
Images improve visual communication and make a webpage more attractive.
5 Image Tag
The <img> tag is used to add images. It is an empty element, which means it does not need a closing tag.
Important Attributes
- src: Image path or source
- alt: Image description
- width: Image width
- height: Image height
6 Why alt Text Matters
The alt attribute provides a text description of an image. It is useful for accessibility, SEO and situations where the image cannot load.
Logo Image
Used in header and branding section.
Banner Image
Used in hero section or course cover.
Gallery Image
Used to show students, events or institute setup.
Basic Image and Link Paths
Correct file path is very important. Wrong path means broken link or missing image.
Same Folder
When image and HTML file are in the same folder.
Inside Folder
When image is inside an image folder.
Outside Folder
Use ../ to go one folder back.
Practice Lists, Links and Images
Edit the code and click Run Code to see the output.
Mistakes Students Should Avoid
These mistakes commonly create broken links and missing images.
Wrong Habits
- Writing li tags outside ul or ol
- Using “click here” as link text everywhere
- Forgetting href in anchor tag
- Writing wrong image path in src
- Not writing meaningful alt text
Correct Habits
- Keep li tags inside ul or ol
- Use clear link text like View Courses
- Check image path and spelling carefully
- Use alt text for important images
- Keep image names simple and lowercase
Test Your Understanding
Select the correct answers and check your score.
1. Which tag is used for unordered list?
2. Which tag is used to create a hyperlink?
3. Which attribute defines link destination?
4. Which tag is used to add image?
5. Which attribute provides image description?
Remember These Points
Revise these before moving to Chapter 7.
Unordered List
Use ul and li tags when order does not matter.
Ordered List
Use ol and li tags when steps or sequence matter.
Anchor Tag
The a tag creates links using the href attribute.
Image Tag
The img tag adds images using src and alt attributes.
Alt Text
Alt text describes image meaning for accessibility and SEO.
File Path
Correct path is required for links and images to work.