Kit Library / Computer Science / Web Development
⚡ Topic Learning KitShared by a Veda learner · Generated with Veda AI
Veda Bites are swipeable micro-lessons — each one teaches exactly one idea. The bites below come from this kit — swipe through them in the app.
💡 Key Idea
Images, links, lists — the web's core trio.
Almost every webpage you visit relies on three HTML elements to look and behave the way it does.
↳ Master <img>, <a>, and list tags and you can build the visual and navigational skeleton of any page.
📖 Definition
One tag, one image, one src.
↳ <img> is a self-closing tag — it has no closing </img> and always needs src.
See the tag, see the result.
↳ Always include alt — it improves accessibility and appears when the image can't load.
📖 Definition
Click here — literally.
↳ The <a> tag needs both an href attribute and visible link text to work.
href is the doorway.
↳ Use target="_blank" when you want the link to open without leaving the current page.
⚖️ Comparison
Bullets or numbers — pick wisely.
↳ Both use <li> for items — only the outer tag changes the marker style.
Outer tag + <li> items = list.
↳ Every list item must sit inside its own <li> tag, nested within <ul> or <ol>.
📖 Definition
Perfect for glossaries and FAQs.
↳ Use <dl> when each item has a name and an explanation, like a dictionary entry.
⚠️ Common Mistake
No alt = broken accessibility.
↳ alt is not optional in good HTML — it's the image's voice for those who can't see it.
⚠️ Common Mistake
No </img> — it's self-closing.
↳ Void elements like <img> never get a closing tag.
🌍 Real World
You've clicked a thousand <a> tags.
↳ These three tags power nearly every clickable, visual, or structured element on the web.
🎯 Exam Tip
src, href, alt — memorize these.
↳ Mixing up src and href is the most common exam slip — src is for images, href is for links.
🧠 Memory Trick
src = source, href = hyperlink.
src stands for source — where the image comes from. href stands for hyperlink reference — where the link goes.
↳ src = see it, href = click it.
Same folder? Just the filename.
↳ Correct relative paths prevent the most common 'broken image' errors.
❓ Did You Know
Lists inside lists — totally legal.
You can place a `<ul>` or `<ol>` inside an `<li>` to create sub-lists — perfect for menus, outlines, and file trees.
↳ Nested lists let you build hierarchical structures without any CSS.
HTML images, links, and lists are the core building blocks for adding visuals, navigation, and structured content to web pages. The tag embeds pictures, the tag creates hyperlinks, and , , and organize content into me…
Full explanation, worked examples & memory tricks in the app
All 18 questions, laddered from warm-up to topper-level, each with its answer and the reasoning behind it.
Q1. Which tag is used to embed an image on a webpage?
BeginnerC · `<img>`
The `` tag embeds an image file into the page. `` and `` are not the correct tags for this job.
Q2. Which attribute of `<img>` gives the path or URL of the image file?
BeginnerC · `src`
`src` (source) tells the browser where the image lives. `href` belongs to the anchor tag, not ``.
Q3. Which tag creates a hyperlink?
BeginnerC · `<a>`
The `` tag, called the anchor tag, creates a hyperlink. Its destination is set by the `href` attribute.
Q4. Which tag creates a bulleted list?
BeginnerB · `<ul>`
`` creates an unordered (bulleted) list. `` creates a numbered list and `` wraps a single item.
Q5. A student writes `<img src="cat.jpg">` and the image loads, but a blind user cannot tell what it shows. Which attribute is missing?
BeginnerB · `alt`
The `alt` attribute provides the text description that screen readers announce. Without it the image is inaccessible.
Q6. Which tag wraps a single item inside a list?
BeginnerA · `<li>`
Each list item is wrapped in `` (list item) tags, whether the list is `` or ``.
Q7. The `<img>` tag is a void element — it has no closing tag and relies on attributes like `src` and `alt`.
BeginnerA · True
The `` tag is a void element — it has no closing tag and relies on attributes like `src` and `alt`.
Q8. A recipe page lists steps that must be followed in order. Which list type fits best?
IntermediateD · `<ol>`, because sequence matters
`` creates an ordered (numbered) list, which is right when the order of items matters, like recipe steps.
Q9. Which `href` value would jump to a section with `id="contact"` on the same page?
IntermediateA · `#contact`
An anchor link uses `#id` to jump to a section on the same page. `contact.html` would load a different page.
Q10. Which `href` value opens the user's mail client?
IntermediateD · `mailto:hi@site.com`
Email links use `mailto:` inside `href` to open the mail client. The other prefixes do not trigger that behaviour.
Q11. How do you turn an image into a clickable link?
IntermediateC · Wrap the `<img>` inside an `<a>` tag
Placing the `` inside `` makes the image the click target. `` has no `href` attribute of its own.
Q12. A page has a menu built as `<ul>` containing `<a>` tags. What does the `<ul>` contribute here?
IntermediateC · It gives the menu list structure
The list provides structure, the anchor provides the click target, and the image provides the visual. Destinations come from `href`.
Q13. Which pair of attributes on `<img>` is effectively mandatory for a working, accessible image?
IntermediateD · `src` and `alt`
`src` gives the browser something to fetch and `alt` keeps the image accessible. `width` and `height` are optional sizing attributes.
Q14. A student writes this and the indentation breaks: ```html <ul> <li>Fruits</li> <ul> <li>Apple</li> </ul> </ul> ``` What is the mistake?
AdvancedA · The inner `<ul>` must sit inside the outer `<li>`
A nested list must be placed inside an `` element, not between two `` tags. Closing the outer `` before the inner list breaks the structure.
Q15. A link reads `<a href="#">click here</a>`. Which statement best explains why this is poor practice?
AdvancedD · The link text tells a screen reader nothing about its destination
A link that says "click here" gives no information about where it goes. `href` may hold a URL, a file path, or an anchor.
Q16. A developer builds a list using `<br>` tags between items instead of `<ul>` and `<li>`. What is the main consequence?
AdvancedD · The list loses its semantic meaning for assistive technology
Writing real ``, `` and `` tags is what lets assistive technology, search engines and other programs understand the page. `` gives visual breaks but no structure.
Q17. Given the following HTML snippet, identify the issue with the nesting of lists and suggest a correction: ```html <ul> <li>Fruits <ul> <li>Apple</li> </li> <li>Vegetables</li> </ul> ```
AdvancedA · The outer `<li>` is incorrectly closed before the inner `<ul>` starts.
The outer `` is incorrectly closed before the inner `` starts, which breaks the structure. The correct nesting should have the inner `` entirely contained within the outer ``.
Q18. Analyze the following HTML code and determine what will happen when a user clicks the link: ```html <a href="mailto:info@example.com">Contact Us</a> ```
AdvancedD · The link will open the user's email client with a new message addressed to info@example.com.
The `mailto:` scheme in the `href` attribute will open the user's default email client with a new message addressed to info@example.com, allowing the user to send an email.
22 flashcards in this kit — the app reviews them with spaced repetition so the right card returns on the right day.
Every game is built from this kit's own content — scores feed your mastery, so playing counts as studying.
Word Match
Built from this kit's own content
True False
Built from this kit's own content
Memory Match
Built from this kit's own content
Flashcard Battle
Built from this kit's own content
Speed Quiz
Built from this kit's own content
Guess Term
Built from this kit's own content
Sequence Builder
Built from this kit's own content
Categorization
Built from this kit's own content
Revision Battle
Built from this kit's own content
Playable in the app
The full Veda Bites deck, complete notes, spaced-repetition flashcards, leveled MCQs, tests and games for this kit — plus Daily Facts and the Arena, every day.